A Pen by Konstantina Tsarvouli

Tutorials of (A pen by konstantina tsarvouli) by Konstantina tsarvouli

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Konstantina Tsarvouli</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin=""/>
    <link rel="stylesheet" href="style.css">
    <title>Hello, map! :p </title>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  </head>

  <body>
    <!-- <div class="jumbotron jumbotron-fluid fixed-top">
      <div class="container">
        <h1 class="display-4">Fluid jumbotron</h1>
        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
      </div>
    </div> -->
      <div class="wrap">
    <h1 class='text-center header mb-2 pb-1'>Wellcome to the <strong>#Greek-Team Udacity</strong> Travelling Card Project </h1>
    <div class='container-fluid'>
      <div class='row'>
        <div class='col-md-2'>
          <!-- <button id='xyButton' type="button" class="btn btn-success">Get Coordinates<br> from map</button> -->
          <!-- start of madness -->
            <nav class="nav flex-column nav-pills">
                <a class="nav-link text-center" id='xyButton' href="#">Get Coordinates From Map</a>
                <li class="nav-item dropdown text-center">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Change Skin</a>
                    <div class="dropdown-menu">
                      <a class="dropdown-item disabled" href="#">Comming Soon...</a>
                      <a class="dropdown-item disabled" href="#">Comming Soon...</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Default Skin</a>
                    </div>
                  </li>
                <a class="nav-link text-center" href="#">About</a>
                <a id="toggleContributorsBtn" class="nav-link text-center" href="#">List of Contributors</a>
            </nav>
            <hr>
            <ul id="listOfContributors" class="list-group text-center hidden">
                <button class="btn btn-light up"><i class="fas fa-arrow-circle-up"></i></button>
                <li class="list-group-item contributor"></li>
                <li class="list-group-item contributor"></li>
                <li class="list-group-item contributor"></li> 
                <li class="list-group-item contributor"></li>
                <li class="list-group-item contributor"></li>
                <button class="btn btn-light down mb-1"><i class="fas fa-arrow-circle-down"></i></button>
            </ul>
          <!-- /end of madness -->
        </div>
        <div class='col-md-6'>
            <div class='mx-auto' id="mapid"></div>
        </div>  
        <!-- Default Style Card -->
        <div id='defaultCard' class='col-md-4'>
          <div class="card mx-auto  bg-warning mb-3 text-center" style="width: 20rem;">
            <img class="card-img-top" id='cardImage' src="./img/udacity.png" alt="Card image cap">
              <div class="card-block">
                <h4 class="card-title" id='cardTitle'>Travel - Trading Card</h4>
                <p class="card-text" id = 'cardText'>This is an open source project made by students of Google Challenge Scholarship: Front-End Web Dev. The purpose of this project is to further develop our skills by contributing to this project ;P. <br> Click on a marker on the map to expand the holiday trading card!<br> You can contribute to this Open Source project on <a href='https://github.com/Userrrfriendly/Udacity_Travel_Trade_Cards' target='blank'>GitHub</a></p>
              </div>
            </div>
        </div> 
        <!-- end  Default Style -->
        <!-- Start Animal Card -->
        <div id="animalCard" class="card mb-4 col-md-4 tsigourof_ben6oqe">
          <a class="card-switch" href="#">
            <h2 class="card-title">Mount Beshtau</h2>
            <img class="card-img" src="http://photos.wikimapia.org/p/00/01/23/04/79_big.jpg" alt="Beshtau">
            <div class="card-body">
              <h3 class="card-subtitle">Бешта́у — изолированная пятиглавая гора — лакколит, высочайшая из 17 останцовых магматических гор Пятигорья на Кавказских Минеральных Водах. Высота 1400м. Памятник природы. Дала название окружающей местности (Пятигорье) и городу Пятигорску.</h3>
              <ul class="card-list-group">                
                <li><span class="card-list-group-item">Text from &lt;span&gt; Element: </span>Text from &lt;li&gt; element</li>
                <li><span class="card-list-group-item">Text from &lt;span&gt; Element: </span>Text from &lt;li&gt; Element</li>
                <li><span class="card-list-group-item">Text from &lt;span&gt; Element: </span>Text from &lt;li&gt; lement</li>
                <li><span class="card-list-group-item">Text from &lt;span&gt; Element: </span>Text from &lt;li&gt; element</li>
              </ul>
              <p class="card-text">Additionally, the ancient dorp is of great archaeological interest. On the highest spot, there are the remnants of two palaeo-Christian basilicas of the 5th century that where places that welcomed the worshipers until the pre-Christian years. In the sanctum many sailors had been frequent visitors because they had been travelling to the island in order to transfer marble. The sailors used to engrave on the stepping-stones the names of their beloved ones and theirs, too.</p>
            </div><!-- /.card-body -->
          </a><!-- /.card-switch -->
        </div>
        <!-- /End Animal Card  -->
      </div>
    </div> <!--end container  -->
    </div>
    <div id="footer">
        <span>Greek-Team Udacity - Front-end Developer Challenge 2017</span>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <!-- <script
  src="http://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script> -->
    <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <!-- Leaflet JS -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
    crossorigin=""></script>
    <!-- my Script -->
    <script src='app.js'></script>

</body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>
/* Downloaded from https://www.codeseek.co/ */
#mapid {
    height: 100%;
    min-height: 40em;
}
#animalCard {
    display:none;
}

.header {
    font-family: monospace;
    background-color: #3f7aa2;
    color: #fff;
    font-size: 28px;
}

body {
    background-color: #f5f5f5;
}

.hidden {
    display: none;
}

.list-group-item:hover {
    cursor: pointer;
}

/******************
Default Styles
************************/

/* body {
    padding-top: 54px;
  }

  @media (min-width: 992px) {
    body {
      padding-top: 56px;
    }
  } */

  /* Bootstrap Card styling overide */

  .card {
    background-color: #fff;
    background-clip: border-box;
    border: none;
  }

  .card-body {
    padding: 0; /* changed */
  }

  .card-title {
    margin-bottom: 0; /* changed */
  }

  .card-subtitle {
    margin-top: 0; /* changed */
    margin-bottom: 0;
  }

  .card-link:hover {
    text-decoration: none;
  }

  .card-link + .card-link {
    margin-left: 0; /* changed */
  }

  .card-img {
    width: 100%;
    /* border-radius: 0; changed */
  }

  ul {
    margin-top: 0;
    margin-bottom: 0; /* changed */
  }

  /* Number of columns for different screen widths */

  @media (min-width: 576px) {
      .card-columns {
          -webkit-column-count: 1;
          -moz-column-count: 1;
          column-count: 1;
      }
  }

  @media (min-width: 768px) {
      .card-columns {
          -webkit-column-count: 2;
          -moz-column-count: 2;
          column-count: 2;
      }
  }

  @media (min-width: 992px) {
      .card-columns {
          -webkit-column-count: 3;
          -moz-column-count: 3;
          column-count: 3;
      }
  }

  /* Making any card linkable without changing the styling, please don't change */

  .card-switch {
  color: inherit;
  text-decoration: none;
  }

  .card-switch:hover {
  color: inherit;
  text-decoration: none;
  }

  .card-switch {
  color: inherit;
  text-decoration: none;
  }

  .card-switch:hover {
  color: inherit;
  text-decoration: none;
  }

  @media screen and (max-width: 769px) {
      .card {
          margin-top: 5em;
      }
      #mapid {
        margin-top: 2em;
      }
  }

  nav a, ul li {
      color: #242021;
  }
  /*****  scss overrides  *****/
  /* nav a:hover, dropdown-item:hover, ul li:hover {
      background-color: #242021 !important;
      color: #fff !important;
  } */
  nav a:hover, dropdown-item:hover, ul li.list-group-item:hover {
    background-color: #242021 !important;
    color: #fff !important;
  }
  .bg-warning {
      background-color: #fff !important;
  }

  .nav-pills .show > .nav-link {
      background-color: #242021 !important;
  }

  .header {
      padding: 20px 0px !important;
  }

  .nav {
      background-color: #fff;
      border-radius: 4px;
  }

  .card-block {
      background: #fff;
      padding: 20px 20px;
      text-align: justify;
  }

  #footer {
      height: 30px;
      background-color: #2b516b;
      color: #fff;
      text-align: center
  }

  .wrap {
    min-height: calc(100vh - 30px);
  }

 /********************************** Card Styles ***************************/
  /* sample stolen data */
  /* Card no 1  */
.style1 {
    background-color: #fafbfc;
    padding: 15px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 14px;
    color: #303030;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border: 1px solid #dbe2e9;
    border-radius: 7px;
  }

  .style1 .card-title {
    margin: 18px;
      font-size: 1.5em;
    font-weight: bold;
      text-transform: uppercase;
    text-align: center;
  }

  .style1 img.card-img {
      border: 1px solid #dbe2e9;
      border-radius: 7px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }

  .style1 .card-body {
    margin-top: 18px;
    padding: 5px 15px;
    border: 1px solid #dbe2e9;
      border-radius: 7px;
  }

  .style1 .card-subtitle {
    margin: 18px 0;
    text-align: center;
    font-size: 1.1em;
    font-style: italic;
      color: #90b4d6;
      border-bottom: 1px solid #dbe2e9;
    padding-bottom: 18px;
  }

  .style1 .card-list-group {
      list-style: none;
    padding-left: 0;
    border-bottom: 1px solid #dbe2e9;
    padding-bottom: 18px;
  }

  .style1 .card-list-group span {
      font-weight: bold;
  }

  .style1 .card-text {
    padding: 18px 0;

  }

  /* Card no 2  */
.style2 {
    padding: 5px;
    border: 1px solid white;
    border-radius: 10px;
    box-shadow: 0 0 5px 6px #ccc;
    background-image: url(https://s26.postimg.org/lpbpvvcxl/glitter_background.jpg);
}

.style2 .card-title {
    font-family: 'Lato', sans-serif;
    padding-left: 5px;
    color: black;
    text-transform: uppercase;
    text-align: center;
    font-size: 1.3em;
    margin: 1em 0;
}

.style2 img.card-img {
    border: 1px solid white;
    border-radius: 10px;
}

.style2 .card-body {
    margin-top: 5px;
    padding: 5px;
    border: 1px solid white;
    border-radius: 10px;
    background-color: #E0E0E0;
}

.style2 .card-subtitle {
    font-style: italic;
    font-size: 0.8em;
    margin: 1em 0;
}

.style2 .card-list-group {
    font-family: 'Catamaran', sans-serif;
    font-size: small;
    list-style-type: none;
    display: block;
    padding-left: 5px;
    padding-right: 5px;
}

.style2 .card-list-group span {
    font-weight: bold;
}

.style2 .card-text {
    font-family: 'Catamaran', sans-serif;
    font-size: small;
    padding-left: 5px;
    padding-right: 5px;
    margin: 1em 0;
}

.style2 .card-link {
  display: none;
}
/* Card no 3  */
.ThomasZ {
 font-family: 'Great Vibes', black, cursive;
  border-radius: 15px;
  padding: 10px 15px;
  border: 1px solid black;
  background-image: url("https://n6-img-fp.akamaized.net/free-photo/grunge-paper-background_1048-6689.jpg?size=338&ext=jpg");
  box-shadow: 5px 7px 20px #dda04f;
}

.ThomasZ .card-title {
  margin: 1em 0;
  padding:10px;
  text-align: center;
  font-size: 45px;
  border-radius: 5px;
  box-shadow: 0px 2px 15px black;
  color:black;
  text-shadow: 2px 2px 10px #dda04f;
  background: url("https://image.freepik.com/free-photo/grunge-paper-background_1048-6689.jpg");
}

.ThomasZ img.card-img {
  border-radius: 5px;
  box-shadow: 0px 2px 15px #fcb455;
}

.ThomasZ .card-body {
  background: url("https://image.freepik.com/free-photo/grunge-paper-background_1048-6689.jpg");
  margin: 25px 0;
  padding: 8px;
  font-size: 20px;
  font-weight: 500;
  text-shadow: 2px 2px 10px #dda04f;
  line-height: 1.2em;
  box-shadow: 0px 2px 15px black;
}

.ThomasZ .card-subtitle {
  text-align: center;
  text-shadow: 2px 2px 10px #dda04f;
  font-size: 20px;
}

.ThomasZ .card-list-group {
  padding: 20px 0;
  list-style-type: none;
  padding-left: 30px;
}

.ThomasZ .card-list-group span {
  font-weight: bold;
}

.ThomasZ .card-link {
 display: none;
}

/* Card no 4  */
.tsigourof_ben6oqe {
  border: 1px solid #BEBEBE;
  padding:10px;
  background-color: #F0E68C;
  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.2)
}

.tsigourof_ben6oqe .card-title {
  font-size: 1.3em;
  margin: 1em 0;
}

.tsigourof_ben6oqe img.card-img {
  background: white;
}

.tsigourof_ben6oqe .card-body {
  margin-top: 5px;
  border:1px solid #D3D3D3;
  padding: 25px 10px;
  background-color: #f3eba5;
  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.2)
}

.tsigourof_ben6oqe .card-subtitle {
  font-style: italic;
  font-size: 0.9em;
}

.tsigourof_ben6oqe .card-list-group {
  list-style-type: none;
  padding-left: 3em;
  margin: 1em 0;
}

.tsigourof_ben6oqe .card-list-group span {
  font-weight: bold;
}

.tsigourof_ben6oqe3 .card-text {
  font-size: 0.9em;
}

.tsigourof_ben6oqe .card-link {
   display: none;
}

/******************** Add your style here *******************************/

 .ntina_t {
    border: 1px solid #BEBEBE;
    padding:10px;
    background-color: #F0E68C;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.2)
  }
  .ntina_t {
    font-size: 1.3em;
    margin: 1em 0;
  }
  .ntina_t img.card-img {
    background: white;
  }
  .ntina_t.card-body {
    margin-top: 5px;
    border:1px solid #D3D3D3;
    padding: 25px 10px;
    background-color: #f3eba5;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.2)
  }
  .ntina_t.card-subtitle {
    font-style: italic;
    font-size: 0.9em;
  }
/* Downloaded from https://www.codeseek.co/ */
const mymap = L.map('mapid').setView([39.00496, 22.9248], 6);
const $animalCard = $('#animalCard');
const $defaultCard = $('#defaultCard');
const $listOfContributors = $('#listOfContributors');
const contributors = {};
const arrOfObjectsContributors = []; //arrayOfObjects - currently has no point of existance - probably will be removed
const arrOfContributors = [];
let contDropDownList =[]; // [ ['User Name',badge, 'data-foum-name','data-state']]; //array of arrays
let markers = {};
let defaultClass = 'tsigourof_ben6oqe';
let xyOnClick = false;
const $pinButton = $('<button type="button" class="btn btn-outline-dark mb-1 mt-1">xalkidiki den exei</button>'); //currently has no point of existance - probably will be removed
const data = [
  {
    //{
   //To add a new pin on the map (with default-bootstrap-style-card)
   //Uncomment the following lines and change the values
   userName: 'Konstantina Tsarvouli', //not required but will probably added somewher in the page in a latter update
   udacityForumUserName: "ntina_t",
   placeName: "Kavala",
   altPlaceName: "Καβάλα",
   description: "Kavala is amphitheatrically built on the slopes of Mt. Symvolo, making it one of the most beautiful cities in Greece. Its location near Egnatia and its port gives Kavala its strategic and economic importance.   ",
   latLong:[40.95207, 24.40956],
   imgUrl: "http://www.clickatlife.gr/fu/p/70307/632/395/0x000000000053d416/2/kabala.jpg",
   country: "Greece",
   cardText: "Its oldest neigberhood is Panagia, which has been uninterruptedly inhabited since the 7th century BC.The most important sights  are the Castle, the Acropolis, the Imaret and the old Lighthouse at the end of Theodorou Pavlidou str. Is was named as'Mecca of tobacco'. From 1918 onwards operated in Kavala around 50 tobacco companies and there were about 160 tobacco warehouses. There is a tobacco museum nowadays.",
   cardList: [["Text from &ltspan&gt Element: ","Text from &ltli&gt element"],["Text from &ltspan&gt Element: ","Text from &ltli&gt Element"],["Text from &ltspan&gt Element: ","Text from &ltli&gt lement"],["Text from &ltspan&gt Element: ","Text from &ltli&gt element"]],
   animalCard: false
   },
   
    userName:'Veniamin Tsigourof',
    udacityForumUserName:'tsigourof_ben6oqe',
    placeName:'Thassos, Ancient Quarries',
    altPlaceName:'Αλυκή Θάσσου, Αρχαία Λατομεία',
    description:'Alykes is a peninsula of archaeological interest where the ancient quarry of marble is situated. The quarry of marble was used from the ancient to byzantine years. Huge marble rocks are discernible under the surface of the sea.',
    latLong:[40.60436,24.74364],
    imgUrl:'./img/thassos_aliki.jpg',
    country:'Greece',
    cardText: 'Additionally, the ancient dorp is of great archaeological interest. On the highest spot, there are the remnants of two palaeo-Christian basilicas of the 5th century that where places that welcomed the worshipers until the pre-Christian years. In the sanctum many sailors had been frequent visitors because they had been travelling to the island in order to transfer marble. The sailors used to engrave on the stepping-stones the names of their beloved ones and theirs, too.',
    cardList: [["Text from &ltspan&gt Element: ","Text from &ltli&gt element"],["Text from &ltspan&gt Element: ","Text from &ltli&gt Element"],["Text from &ltspan&gt Element: ","Text from &ltli&gt lement"],["Text from &ltspan&gt Element: ","Text from &ltli&gt element"]],
    animalCard: false
  },
  {
    userName:'Veniamin Tsigourof',
    udacityForumUserName:'tsigourof_ben6oqe',
    placeName:'Patmos, Xora',
    altPlaceName:'Πάτμος, Χώρα',
    description:'Η Πάτμος είναι ελληνικό νησί του Αιγαίου Πελάγους υπαγόμενο, κατά τους αρχαίους Έλληνες, στις Νότιες Σποράδες, κατά δε τη σύγχρονη πολιτική διαίρεση της χώρας στη Δωδεκάνησο.',
    latLong:[37.30903, 26.54765],
    imgUrl:'http://www.discovergreece.com/~/media/images/highlight-large-images/az/p/patmos/panoramic-view-patmos.ashx?w=820&h=483&crop=1',
    country:'Greece',
    cardText: 'Additionally, the ancient dorp is of great archaeological interest. On the highest spot, there are the remnants of two palaeo-Christian basilicas of the 5th century that where places that welcomed the worshipers until the pre-Christian years. In the sanctum many sailors had been frequent visitors because they had been travelling to the island in order to transfer marble. The sailors used to engrave on the stepping-stones the names of their beloved ones and theirs, too.',
    cardList: [["Text from &ltspan&gt Element: ","Text from &ltli&gt element"],["Text from &ltspan&gt Element: ","Text from &ltli&gt Element"],["Text from &ltspan&gt Element: ","Text from &ltli&gt lement"],["Text from &ltspan&gt Element: ","Text from &ltli&gt element"]],
    animalCard: false
  },
  {
    userName:'Veniamin Tsigourof',
    udacityForumUserName:'tsigourof_ben6oqe',
    placeName:'Mount Beshtau',
    altPlaceName:'Бештау',
    description:'Бешта́у — изолированная пятиглавая гора — лакколит, высочайшая из 17 останцовых магматических гор Пятигорья на Кавказских Минеральных Водах. Высота 1400м. Памятник природы. Дала название окружающей местности (Пятигорье) и городу Пятигорску.',
    latLong:[44.09749, 43.02235],
    imgUrl:'./img/beshtau.jpg',
    country:'Russia',
    cardText: 'Additionally, the ancient dorp is of great archaeological interest. On the highest spot, there are the remnants of two palaeo-Christian basilicas of the 5th century that where places that welcomed the worshipers until the pre-Christian years. In the sanctum many sailors had been frequent visitors because they had been travelling to the island in order to transfer marble. The sailors used to engrave on the stepping-stones the names of their beloved ones and theirs, too.',
    cardList: [["Text from &ltspan&gt Element: ","Text from &ltli&gt element"],["Text from &ltspan&gt Element: ","Text from &ltli&gt Element"],["Text from &ltspan&gt Element: ","Text from &ltli&gt lement"],["Text from &ltspan&gt Element: ","Text from &ltli&gt element"]],
    animalCard: true
  },
  {
    userName: 'Thomas Zegos',
    udacityForumUserName: "ThomasZ",
    placeName: "Serres, Upper Poroia",
    altPlaceName: "Σέρρες, Άνω Πορόια",
    description: "Upper Poroia is a large settlement of Serres in Macedonia. It is built on the foot of Mount Belles northwest of Lake Kerkini. It 's an alternative and homely place for relaxion. Horseback riding and hiking are remarkable entertaining activities you couldn't lose.",
    latLong:[41.285892, 23.035583],
    imgUrl: "https://image.ibb.co/m1PiUR/Ano_Poroia.jpg", //"./img/Ano-Poroia.jpg",
    country: "Greece",
    cardText: 'Additionally, the ancient dorp is of great archaeological interest. On the highest spot, there are the remnants of two palaeo-Christian basilicas of the 5th century that where places that welcomed the worshipers until the pre-Christian years. In the sanctum many sailors had been frequent visitors because they had been travelling to the island in order to transfer marble. The sailors used to engrave on the stepping-stones the names of their beloved ones and theirs, too.',
    cardList: [["Text from &ltspan&gt Element: ","Text from &ltli&gt element"],["Text from &ltspan&gt Element: ","Text from &ltli&gt Element"],["Text from &ltspan&gt Element: ","Text from &ltli&gt lement"],["Text from &ltspan&gt Element: ","Text from &ltli&gt element"]],
    animalCard: false
  },
  {
    userName: 'Thodoris Pliakas',
    udacityForumUserName: "theorios",
    placeName: "Volos",
    altPlaceName: "Βόλος",
    description: "Volos is the newest of the Greek port cities, built at the innermost point of the Pagasetic Gulf and at the foot of Mount Pilio (Pelion, the land of the Centaurs). It includes the municipal units of Volos, Nea Ionia and Iolkos, as well as smaller suburban communities.",
    latLong:[39.3630, 22.9408],
    imgUrl: "https://thumb.ibb.co/bY0ig6/volos.jpg",
    country: "Greece",
    cardText: 'Additionally, the ancient dorp is of great archaeological interest. On the highest spot, there are the remnants of two palaeo-Christian basilicas of the 5th century that where places that welcomed the worshipers until the pre-Christian years. In the sanctum many sailors had been frequent visitors because they had been travelling to the island in order to transfer marble. The sailors used to engrave on the stepping-stones the names of their beloved ones and theirs, too.',
    cardList: [["Text from &ltspan&gt Element: ","Text from &ltli&gt element"],["Text from &ltspan&gt Element: ","Text from &ltli&gt Element"],["Text from &ltspan&gt Element: ","Text from &ltli&gt lement"],["Text from &ltspan&gt Element: ","Text from &ltli&gt element"]],
    animalCard: false
  },
  {
    userName: 'Athanasios Markou',
    udacityForumUserName: "TheLastMoikan",
    placeName: "Mytilene",
    altPlaceName: "Μυτιλήνη",
    description: "Mytilene is a city founded in 11th century BC, also it is the capital and port of island Lesbos. Mytilene is built on the southeast edge of the island and it is the seat of metropolitan bishop of the Orthodox church. The city has a port with ferries that serves some nearby islands and the mainland cities of Pireaus, Athens and Thessaloniki. Besides, there are more than 15 commercial producers that produce ouzo (an alcholic drink)." + '<hr>' + 'The town of Mytilene has a large number of neoclassical buildings, public and private houses. Some of them are the building of the Lesbos Prefecture, the old City Hall, the Experimental Lyceum and various mansions and hotels all over the town. The Baroque church of Saint Therapon dominates at the port with its impressive style.',
    latLong:[39.1041231, 26.5585513],
    imgUrl: "https://preview.ibb.co/mw4AeR/Mytilene.jpg",
    country: "Greece",
    cardText: 'The town of Mytilene has a large number of neoclassical buildings, public and private houses. Some of them are the building of the Lesbos Prefecture, the old City Hall, the Experimental Lyceum and various mansions and hotels all over the town. The Baroque church of Saint Therapon dominates at the port with its impressive style.',
    cardList: [["Text from &ltspan&gt Element: ","Text from &ltli&gt element"],["Text from &ltspan&gt Element: ","Text from &ltli&gt Element"],["Text from &ltspan&gt Element: ","Text from &ltli&gt lement"],["Text from &ltspan&gt Element: ","Text from &ltli&gt element"]],
    animalCard: false
  },
    {
    userName: 'Thomas Zegos',
    udacityForumUserName: "ThomasZ",
    placeName: "Chalkidiki, Afytos",
    altPlaceName: "Χαλκιδική, Άφυτος",
    description: "Afytos is a village in Chalkidiki, northern Greece. It is one of the most beautiful places for vacation. You can take a lot of pictures near the sea, eat good seafood and of course, you can take a dip in the sea. And, if you 're lucky you will see dolphins, too. This place is highly recommended for couples.",
    latLong:[40.098651,23.436987],
    imgUrl: "./img/Afytos.jpg",
    country: "Greece",
    animalCard:false
  },
    {
    userName: 'Christina-Angeliki Antoniou',
    udacityForumUserName: "xrisaant",
    placeName: "Trikala",
    altPlaceName: "Τρίκαλα",
    description: "Trikala (Greek: Τρίκαλα) is a city in northwestern Thessaly, Greece. The region of Trikala has been inhabited since prehistoric times, with the first indications of permanent settlement been uncovered in the cave of Theopetra, and dating back to approx. 49,000 BC!",
    latLong:[39.555634, 21.766896],
    imgUrl: "https://upload.wikimedia.org/wikipedia/commons/d/d7/Lithaiosrivertrikala.jpg",
    country: "Greece",
	  cardText: 'The city of Trikala is built on the ancient city of Trikka or Trikke, which was founded around the 3rd millennium BC . The city straddles the Lithaios river,which is a tributary of Pineios and took its name from the nymph Trikke, daughter of Penaeus, or according to others, daughter of the river god Asopus. It was considered to be the birthplace and main residence of the healing god Asclepius and is mentioned in Homers Iliad as having participated in the Trojan War.' + '</br>' + 'Trikala region has a distinctive geology including Meteora, an UNESCO World Heritage Site home to 24 ancient Orthodox Christian monasteries precariously perched on top of a complex network of sandstone boulders,the Forests of Pili,the Pindus mountain villages and the ski resorts of Pertouli.' + '</br>' + 'Nowdays Trikala has the distinction of being the first smart city in Greece, integrating technology-powered solutions into the daily life of the municipality and delivering government services to citizens through e-governance',
    cardList: [["Population: ","81,355"],["Area: ","T607.59 km2"],["Administrative region: ","Thessaly"],["Sights: ","Temble Asklepieion of Trikke, Byzantine Castle build by Justinian,Osman Shah Mosque designed by Mimar Sinan ,Old City of Trikala, Meteora, Lithaios river and the Central Bridge"]],
    animalCard:false //originally true will ask christina about style
  },
   {
     userName: 'Anastasios Agathaggelou', //not required but will probably added somewher in the page in a latter update
     udacityForumUserName: "Tagathag",
     placeName: "Thessaloniki",
     altPlaceName: "Θεσσαλονίκη",
     description: "The city was founded around 315 BC by the King Cassander of Macedon, on or near the site of the ancient town of Therma and 26 other local villages. He named it after his wife Thessalonike, a half-sister of Alexander the Great and princess of Macedon as daughter of Philip II. Under the kingdom of Macedon the city retained its own autonomy and parliament and evolved to become the most important city in Macedon",
     latLong:[40.623156, 22.945599],
     imgUrl: "./img/thessaloniki.jpg",
     country: "Greece",
     animalCard:false
    },
    {
      userName: 'Eleni Nistikaki',
      udacityForumUserName: "elenica99426rl6",
      placeName: "Chania, Crete",
      altPlaceName: "Χανιά Κρήτη",
      description: "<strong>Crete is the place where Zeus, king of gods, was born!</strong><br>Since the ancient times, the city of Chania has faced many conquerors and the influences of many civilizations through time, evident on the city monuments. The beautiful city of Chania managed to preserve its original colors and historical character, despite the fast-growing tourist industry. It is considered as one of the most beautiful cities of Greece and the most picturesque city of Crete. The city of Chania is also characterized by a rich cultural life. A plethora of cultural events are organized every year (exhibitions, festivals, theatrical and musical performances, ect.)",
      latLong:[35.516253, 24.018549],
      imgUrl: "http://www.publicdomainpictures.net/pictures/150000/velka/old-venetian-harbor-1454681052DYt.jpg",
      country: "Greece",
      animalCard:false
    },	
	
  //To add a new pin on the map (with default-bootstrap-style-card) 
  //Uncomment the following lines and change the values
  // userName: 'Your Real Name', //not required but will probably added somewher in the page in a latter update
  // udacityForumUserName: "ThomasZ",
  // placeName: "Serres, Upper Poroia",
  // altPlaceName: "Σέρρες, Άνω Πορόια",
  // description: "this text goes for descritption.",
  // latLong:[43.285892, 22.035583],
  // imgUrl: "./img/plaaceholder.jpg",
  // country: "Greece"
];

/***************************
*    Show Contributors     *
***************************/
// function addContributor() {
//     for( i=0; i < data.length; i++) {
//             document.getElementsByClassName('contributor')[i].innerHTML = data[i].userName;
//     }
// }
// addContributor();

/****************************
Leaflet - Initialize map
***************************/
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '<a href="https://carto.com/">Carto </a>|   <a href="https://www.openstreetmap.org">OpenStreetMap</a>',
}).addTo(mymap);
/****************************
 Leaflet  - EXTENDING THE ICON CLASS- snippet from https://stackoverflow.com/questions/25683871/assign-id-to-marker-in-leaflet
 ****************************/
const MarkerIcon = L.Icon.extend({
  options: {
      customId: ""
  }
});
//This is used to create the option customId on the MarkerIcon that will work as unique id for each marker on the map and for each element of the markers object
/****************************
 Leaflet - Icons - markers
***************************/
const myDefaultMarker = new MarkerIcon({
  customId: "",
  iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon-2x.png',
  iconSize: [25,41]
});
//  const iconArcheology = L.icon({
//   iconUrl: './img/archeology.svg',
//   iconSize: [40,40],
//   iconAnchor: [40,40],
//   popupAnchor: [-3,-76]
// });

function generateMarkers(arr) {
  let id = 0;
  arr.forEach(function(element) {
    element.id = id;
    const idString = id.toString();
    L.marker(element.latLong, {icon: myDefaultMarker, customId: idString, title:element.placeName}).addTo(mymap)
    .on('click', markerClick)
    .bindPopup(`<b>${element.placeName}</b><br>${element.altPlaceName}`);
    markers[id] = element;
    id+=1;
  });
};
generateMarkers(data);
/****************************
Leaflet - map Click Events
***************************/
function markerClick(e) {
  const customId = this.options.customId;
  if (!markers[customId].animalCard) {
    $defaultCard.show();
    $animalCard.hide();
    $('#cardImage').attr('src', markers[customId].imgUrl);
    $('#cardTitle').html(markers[customId].placeName);
    $('#cardText').html(markers[customId].description);
  } else {
    $defaultCard.hide();
    $animalCard.show();
    //
    const currentClass = markers[customId].udacityForumUserName;
    $animalCard.removeClass(defaultClass).addClass(currentClass);
    defaultClass = currentClass;
    $('.card-img').attr('src', markers[customId].imgUrl);
    $('.card-title').html(markers[customId].placeName);
    $('.card-subtitle').html(markers[customId].description);
    $('.card-text').html(markers[customId].cardText);
    let listItems = $('.card-list-group li');
    for (let i = 0; i < 4; i++) {
      const span = $('<span class="card-list-group-item">Diet:</span>').html(markers[customId].cardList[i][0]);//global?
      $(listItems[i]).html(markers[customId].cardList[i][1]).prepend(span);
    }
  }
};
//Get Coordinates From Map
const popup = L.popup();
function onMapClick(e) {
    popup
      .setLatLng(e.latlng)
      .setContent("You clicked the map at " + e.latlng.toString())
      .openOn(mymap);
};

// Enable / Disable Coordinates on click
$('#xyButton').on('click', function() {
  if (!xyOnClick) {
    xyOnClick = !xyOnClick;
    mymap.on('click', onMapClick);
    $('#xyButton').text('Disable Coordinates on click').toggleClass('active'); //.removeClass('btn-success').addClass('btn-warning');
  } else {
    xyOnClick = !xyOnClick;
    mymap.off('click', onMapClick);
    $('#xyButton').text('Get Coordinates from the map').toggleClass('active'); //.removeClass('btn-warning').addClass('btn-success');
  }
});
//Toggle List of Contributors
$('#toggleContributorsBtn').on('click', function() {
  $listOfContributors.slideToggle(500,"swing");
});
//populate list of contributors
function getContributors() {
  Object.keys(markers).forEach(function(key) {
    //Loops through the object. snippet from https://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object
    if (contributors[markers[key].udacityForumUserName] == null) {
        // checks if undefined or null. code snippet from https://stackoverflow.com/questions/2647867/how-to-determine-if-variable-is-undefined-or-null
        contributors[markers[key].udacityForumUserName] = [key];
    } else {
        contributors[markers[key].udacityForumUserName].push(key);
    }
  });
};
getContributors();

function  contrToArray() {
  Object.keys(contributors).forEach(function(key) {
    let temp = {};
    temp[key] = contributors[key];
    arrOfObjectsContributors.push(temp);
    arrOfContributors.push(key);
  });
};
contrToArray();

$('.contributor').on('click', function(){
  switch ($(this).attr('data-state')) {
    case 'idle':
      let arrayOfPins = contributors[$(this).attr('data-forum-name')];
      $('<div class="pins"></div>').clone().insertAfter(this);
      for (let i = 0; i< arrayOfPins.length; i++) {
        let placeName = markers[contributors[$(this).attr('data-forum-name')][i]].placeName;
        let lat = markers[contributors[$(this).attr('data-forum-name')][i]].latLong[0];
        let long = markers[contributors[$(this).attr('data-forum-name')][i]].latLong[1];
        tempButton = $('<button type="button" class="btn btn-outline-dark mb-1 mt-1">' + placeName + '</span></button>');
        tempButton.attr('data-lat', lat).attr('data-long', long);
        $(this).next('div.pins').append(tempButton);
      };
      $(this).attr('data-state','expanded'); 
      break;
    case 'expanded':
      $(this).next('div.pins').toggleClass('hidden');
      $(this).attr('data-state','collapsed'); 
      break;
    case 'collapsed':
      $(this).next('div.pins').toggleClass('hidden');
      $(this).attr('data-state','expanded'); 
      break;
    };
});

function showContributors() { 
  //Object.keys(obj).length //number of keys( contributors)  
  for (let i=0; i< arrOfContributors.length ; i++) {
    //arrOfContributors[i] //forumname
    let tempElement = [
      markers[contributors[arrOfContributors[i]][0]].userName, //User Name
      '<span class="badge badge-light ml-1">' + contributors[arrOfContributors[i]].length + '</span>',//badge
      arrOfContributors[i], //data-forum-name
      'idle' //data-state
    ];
    contDropDownList.push(tempElement);
    if (i<5) {
      document.getElementsByClassName('contributor')[i].innerHTML = contDropDownList[i][0];
      $($('.contributor')[i])
        .attr('data-forum-name', arrOfContributors[i])
        .attr('data-state','idle')
        .append($(contDropDownList[i][1]));
    }
  }
};
showContributors();

//Attach the click on body because the button.btn-outline-dark elements are added dynamically 
$('body').on('click','button.btn-outline-dark', function() {
  const lat = parseFloat($(this).attr('data-lat'));
  const long = parseFloat($(this).attr('data-long'));
  mymap.setView([lat,long],11);
})

$('button.down').on('click', function() {
  const lastIndex = $($('.contributor')[4]).attr('data-forum-name'); //last index forumID
  const firstIndex = $($('.contributor')[0]).attr('data-forum-name'); //first index forumID
  if (arrOfContributors.indexOf(lastIndex) < arrOfContributors.length-1) {
    const $firstElement = $($('.contributor')[0]);
    const $lastElement = $($('.contributor')[4]);
    $('div.pins').remove();
    for (let i = 0; i<5; i++) {
      $($('.contributor')[i]).attr('data-state','idle');
    }
    $firstElement
    .html(contDropDownList[arrOfContributors.indexOf(lastIndex) + 1][0])
    .attr('data-forum-name', arrOfContributors[arrOfContributors.indexOf(lastIndex) + 1 ])
    .attr('data-state','idle')
    .append($(contDropDownList[arrOfContributors.indexOf(lastIndex) + 1][1]));
    $($lastElement).after($firstElement);
  }
}
);

$('button.up').on('click', function() {
  const lastIndex = $($('.contributor')[4]).attr('data-forum-name'); //last index forumID
  const firstIndex = $($('.contributor')[0]).attr('data-forum-name'); //first index forumID
  if (arrOfContributors.indexOf(firstIndex) -1 >= 0) {
    const $firstElement = $($('.contributor')[0]);
    const $lastElement = $($('.contributor')[4]);
    $('div.pins').remove();
    for (let i = 0; i<5; i++) {
      $($('.contributor')[i]).attr('data-state','idle');
    }
    $lastElement
    .html(contDropDownList[arrOfContributors.indexOf(firstIndex) - 1][0])
    .attr('data-forum-name', arrOfContributors[arrOfContributors.indexOf(firstIndex) -1 ])
    .attr('data-state','idle')
    .append($(contDropDownList[arrOfContributors.indexOf(firstIndex) - 1][1]));
    $($firstElement).before($lastElement);
  }
}
);

/***************************
 KNOWN BUGS && IMPROVEMENTS
 ***************************/
//GET GOORDINATES BUTTON BECOMES BLUE ON CLICK
//travelling card = postcard 
//Maybe add a feaure so that a user can place two images in a single pin...
//...by clicking on the card image the next one will toggle
//list of contributors need to populate it

This awesome code ( A Pen by Konstantina Tsarvouli ) is write by Konstantina Tsarvouli, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Konstantina Tsarvouli