mapTests/index.html at master · jwitow/mapTests · 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
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
     <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
 integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
 crossorigin=""></script>

 <style>
    #mapid { position: absolute;
            top:0;
            right:0;
            left:0;
            bottom:0;}
    </style>


</head>
<body>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> -->

    <div id="mapid"></div>


    <script>
        var url = 'https://spreadsheets.google.com/feeds/list/1-mBTpswygRIahu9AsnqqOSQaDSM1Zu6GKF2mzc7txNc/od6/public/basic?alt=json'

        var mymap = L.map('mapid').setView([ 62.58332647, -114.4500116 ], 13);

     var layer =  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            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>',
            maxZoom: 18,
            id: 'mapbox/light-v9',
            accessToken: 'pk.eyJ1IjoibW9yZ2FuYnJhYXRlbiIsImEiOiJjazVtc216M3cwcmthM29wY2s4NTdiMDZ6In0.jcbsx8PTyrpUTlusureNJg'
            }).addTo(mymap);

            var geojsonMarker = {
                'radius': 6,
                'opacity': 0.5,
                'color': "red"
            };


            function forEachFeature(feature, layer) {
                var popupContent = feature.properties.Site;

                if (feature.properties && feature.properties.popupContent) {
                    popupContent += feature,properties.popupContent;
                }
                    layer.bindPopup(popupContent);
            };

            //var myData = L.geoJSON(null, {onEachFeature: forEachFeature, style: style});
            var myData = L.geoJson(null, {
                    onEachFeature: forEachFeature,
                    pointToLayer: function (geometry, coordinates){
                        return L.circleMarker (coordinates, geojsonMarker);
                    }

            });

            //get GeoJson data and create features.
            $.getJSON(url, function(data){
                    myData.addData(data);
            });

            myData.addTo(mymap);


    </script>

</body>

</html>