CoffeeAndCode/map.html at master · LearningToCodeTogether/CoffeeAndCode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<!--Cindy's first real html page
For Coffee and Code by Meetup Learning to Code -->

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <!--css-->
  <link rel="stylesheet" type="text/css" href="mapPageStyle.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Import max CDN so you don't have to download stuff from bootstrap-->
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!--Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
  integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
  crossorigin=""/>

  <!--Leaflet JavaScript (after Leaflet CSS) -->
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
  integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
  crossorigin=""></script>

  <!-- nice animationmarker -->
  <script src="AnimatedMarker.js"></script>


</head>

<body>
  <!-- Title above the mapViewer -->
  <div class="jumbotron text-center">
    <h1>Coffee and Code</h1>
    <p>Use the pan function to explore you're code-buddies in the mapViewer!</p>
  </div>

    <!--Andere manier mapViewer in pagina(zonder bootstrap)-->
    <div id="mapid"></div>


  <script>

    // In this section begins the mapmagic


    // Initialize the mapViewer (default= Location Codaisseur)
    // initialize the mapViewer
    var mapViewer = L.map('mapid').setView([52.339365, 4.856508], 13);

    // get the tile layers from Mapbox for a good background in the viewer (from OSM)
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      id: 'mapbox.streets'
    }).addTo(mapViewer);

    // get LatLong of location clicked on the map
    var popup = L.popup();
    function onMapClick(e) {
      popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mapViewer);
    }
    mapViewer.on('click', onMapClick);

    // show visitors where the Codaisseur is located
    var markerArrCodaisseur = [52.339365, 4.856508]
    L.marker(markerArrCodaisseur).addTo(mapViewer)
    .bindPopup("Here is <b>the Codaisseur!</b> <br />Homebase for everyone joining <b>Learning To Code!</b>").openPopup();

    // marker for participants and given [lat, long] of participants
    var markerArrPart = [];
    var coordArr = [
      [52.450216, 4.995168],
      [52.334927, 4.951586],
      [52.397148, 4.643296],
      [52.367449, 4.856472],
      [52.360087, 4.885139],
      ];
    // name label for the participants
    var popupArrPart = [];
    var nameArr = [
      "Truus",
      "Jason",
      "Monica",
      "Wang",
      "Ali",
    ];

    for (i in coordArr) {
      var itemMarker = coordArr[i];
      var itemPopup = nameArr[i];
      markerArrPart.push(L.marker(itemMarker).addTo(mapViewer)
      .bindPopup("<b>" + itemPopup +  "</b> <br /> lives arounds here!"));
    }


  </script>


  <!-- Menus below the map -->
  <div class="container text-center">
    <div class="row">

      <div class="col-sm-4">
        <h3>Empty column left</h3>
        <p>white space left</p>
      </div>
      <div class="col-sm-4">
          <img src="Images/Group 3.png" alt="logoPeople">
          <img src="Images/pins.png" alt="logoPins">
          <img src="Images/settings-gear-64.png" alt="logoSettings">
      </div>
      <div class="col-sm-4">
        <h3>Empty column right</h3>
        <p>white space right.</p>
      </div>


    </div>
  </div>

</body>
</html>