-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
67 lines (60 loc) · 2.48 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
64
65
66
67
<html>
<head>
<link rel="stylesheet" type="text/css" href="./lib/leaflet/leaflet.css" />
<script type="text/javascript" src="./lib/leaflet/leaflet.js"></script>
<link rel="stylesheet" href="./lib/leaflet.markercluster/MarkerCluster.css" />
<link rel="stylesheet" href="./lib/leaflet.markercluster/MarkerCluster.Default.css" />
<style>
.leaflet-popup-content p {
margin: 0 0;
}
.leaflet-popup-content p:hover {
outline: 1px black solid;
}
</style>
<script src="./lib/leaflet.markercluster/leaflet.markercluster-src.js"></script>
<script>
var map;
var ajaxRequest;
var plotlist;
//var plotlayers=[];
function initmap() {
// set up the map
map = new L.Map('map');
// create the tile layer with correct attribution
var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors | <a href="https://www2.imda.gov.sg/-/media/Imda/Files/Community/Consumer-Education/WirelessSG/Hotspot_List1.pdf?la=en">Wireless@sg location</a> | postal code to lat/lon by <a href="https://docs.onemap.sg/">onemap</a> | Last Updated: August 2019';
var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
// start the map in singapore
map.setView(new L.LatLng(1.35, 103.8),11);
map.addLayer(osm);
// add a map scale
L.control.scale().addTo(map)
var markers = L.markerClusterGroup({ disableClusteringAtZoom: 17 });
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'leaflet_data.json', true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
var plotlist = JSON.parse(xobj.responseText);
for (i=0;i<plotlist.length;i++) {
var plotll = new L.LatLng(plotlist[i].lat,plotlist[i].lon, true);
var plotmark = new L.Marker(plotll);
plotmark.data=plotlist[i];
markers.addLayer(plotmark);
//map.addLayer(plotmark);
plotmark.bindPopup("<h3>"+plotlist[i].name+"</h3>"+plotlist[i].details);
//plotlayers.push(plotmark);
}
map.addLayer(markers);
}
};
xobj.send(null);
}
</script>
</head>
<body onload="initmap();">
<div id="map" style="width: 100%;height: 100%;"></div>
</body>
</html>