hellocodelab/index.html at master · codelaboc/hellocodelab · 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
<!DOCTYPE html>
<meta charset="utf-8"/>
<html>
    <head>
        <title>Hacktoberfest 2016: Downtown Fullerton Boba.js Locations
        </title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
        <script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous"></script>
        <style>
            body, html,
            #mapid {
                height: 100%;
            }
        </style>
    </head>
    <body>
      <div id="mapid"></div>

      <script>
      var myMap   = L.map('mapid').setView([33.871426620471276,-117.92432248592375], 17);
      var myTiles = L.tileLayer('http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png', {
        attribution: 'Made at CodeLab OC'
      }).addTo(myMap);
      var mySpots = $.getJSON('hacktober.geojson', function(data) {
          console.log(data)
          L.geoJson(data, {
            style: {
              radius: 6,
              fillColor: "#E9692C",
              color: "#E9692C",
              fillOpacity: 1
            },
            pointToLayer: function(feature, latlon) {
              return L.circleMarker(latlon).bindPopup(feature.properties.name + "<br>" + feature.properties.offers);
            }
          }).addTo(myMap);
      });
      // mySpots is the response to getJSON request
      // getJSON takes one parameter, hacktober.geojson
  	</script>
  </body>
</html>