-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
87 lines (73 loc) · 2.46 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
<title>
Heatmap with Leaflet
</title>
<!-- link to leaflet css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<!-- map is full width and height of device -->
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no" />
<style>
body{
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<!-- remotely access the Leaflet.heatmap plugin -->
<script src="leaflet-heat.js"></script>
<script src="leaflet.ajax.min.js"></script>
<script src="togeojson.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!-- leaflet js -->
<div id="map">
</div>
<script>
var map = L.map('map',{center: [-34.6424883, 150.8659966],
zoom: 15
});
var geoJsonToPoints = function(geoJson) {
var pts = [];
for (var i =0; i < geoJson.features.length; i++) {
for (var j=0; j < geoJson.features[i].geometry.coordinates.length; j++) {
pts.push([geoJson.features[i].geometry.coordinates[j][1], geoJson.features[i].geometry.coordinates[j][0]])
}
}
return pts;
}
// OSM Baselayer
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
var baseLayers = {
"OSM": osm
};
var overlays = {};
var layerControl = L.control.layers(baseLayers, overlays, {'position':'bottomleft'}).addTo(map);
$.ajax('example_1.gpx').done(function(xml) {
var track = toGeoJSON.gpx(xml);
var linesLayer = L.geoJson(track);
linesLayer.addTo(map);
layerControl.addOverlay(linesLayer, 'Lines (example 1)');
var points = geoJsonToPoints(track);
console.log(points);
var heat = L.heatLayer(points, {"radius": 8}).addTo(map);
layerControl.addOverlay(heat,'Heatmap (example 1)');
$.ajax('example_2.gpx').done(function(xml) {
var track = toGeoJSON.gpx(xml);
var linesLayer = L.geoJson(track);
linesLayer.addTo(map);
layerControl.addOverlay(linesLayer, 'Lines (example 2)');
var points = geoJsonToPoints(track);
console.log(points);
var heat = L.heatLayer(points, {"radius": 8}).addTo(map);
layerControl.addOverlay(heat,'Heatmap (example 2)');
});
});
</script>
</body>
</html>