leaflet-tutorial/index.html at master · geyerbri/leaflet-tutorial · 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
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css">
    <title>Leaflet Tutorial</title>
  </head>
  <body>
    <h1>Example Page</h1>
    <p>Hello World!</p>
    <div id="map-here" style="height: 500px"></div>
    <script src="leaflet/leaflet.js"></script>
    <script type="text/javascript">
      var map = L.map('map-here').setView([42.731105, -84.475239], 17);
      L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: '&copy; <a href="https://mapbox.com" target="_blank">Mapbox</a> simple streets; example by Brian',
        tileSize: 512,
        zoomOffset: -1,
        id: 'geyerbri-msu/ck9dirxky02e91ild7rwxfk4d',
        accessToken: 'pk.eyJ1IjoiZ2V5ZXJicmktbXN1IiwiYSI6IkxTRGhIQnMifQ.HbqL3TWxcEQLB61NEzCNYA'
      }).addTo(map);
      var pins = L.geoJSON().addTo(map);
      var geoJSON = [
        {
          type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [-84.478339, 42.732217]
            },
            properties: {
              title: 'LEADR',
              building: 'Old Horticulture',
              url: 'http://leadr.msu.edu',
              image: 'https://farm7.static.flickr.com/6223/6240985827_66d54a66b2_b.jpg',
            }
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [-84.473638, 42.729234]
            },
            properties: {
              title: 'Department of Anthropology',
              building: 'Baker Hall',
              url: 'https://anthropology.msu.edu',
              image: 'https://upload.wikimedia.org/wikipedia/commons/b/b5/MSU_Baker_Hall.jpg',
            }
          }
      ];
      pins.on('layeradd', function(e) {
        var marker = e.layer,
            feature = marker.feature,
            content = "<img src=" + feature.properties.image + " style='float:left;height:150px; padding-right:10px'><strong><a title=" + feature.properties.title + " target='_blank' href=" + feature.properties.url + ">" + feature.properties.title + "</a></strong><br>" + feature.properties.building + "<div style='clear:both'></div>";
        marker.bindPopup(content, {minWidth: 400, autoPanPadding: [5,5], closeButton: true});
      });
      pins.addData(geoJSON);
    </script>
  </body>
</html>