forked from hackgvl/leaflet-google-sheets-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
63 lines (52 loc) · 2.16 KB
/
index.html
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
<html>
<head>
<title>Greenville Historical Markers Map</title>
<meta name="description" content="A map of Historical Markers Greenville, SC."/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<link rel="stylesheet" href="./map.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<!--<script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?key=bA5WISoAPsk5r0GJ3hHGTkAMFEskFOA2"></script>-->
<script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?key=Atv9lY8GulJ8iga3XhHUtXzY5AY44f7J"></script>
</head>
<body>
<div id="map">
</div>
<script>
// using leafletjs.com and its GeoJSON
function onEachFeature(feature, layer) {
// does this feature have a property named popupContent?
if (feature.properties && feature.properties.title) {
var popuphtml = "<strong>" + feature.properties.title + "</strong><ul><li>Notes: " + feature.properties.notes + "</li><li>Marker ID: " + feature.properties.property3 + "</li></ul>";
layer.bindPopup(popuphtml);
}
}
// Read JSON to variable via http://stackoverflow.com/questions/8191238/how-can-i-set-json-into-a-variable-from-a-local-url
function readJSON(file) {
var request = new XMLHttpRequest();
request.open('GET', file, false);
request.send(null);
if (request.status == 200)
return request.responseText;
};
var geoJsonData = JSON.parse(readJSON('geojson.php'));
var mapLayer = MQ.mapLayer(), map;
map = L.map('map', {
layers: mapLayer,
center: [ 34.8507212,-82.3985128 ],
zoom: 15
});
L.control.layers({
'Map': mapLayer,
'Hybrid': MQ.hybridLayer(),
'Satellite': MQ.satelliteLayer(),
'Dark': MQ.darkLayer(),
'Light': MQ.lightLayer()
}).addTo(map);
// map.locate({setView: true, maxZoom: 16});
L.geoJson(geoJsonData, {
onEachFeature: onEachFeature
}).addTo(map);
</script>
</body>
</html>