diff options
| -rw-r--r-- | .gitmodules | 3 | ||||
| -rw-r--r-- | examples/cycleparkingheatmap.html | 76 | ||||
| -rw-r--r-- | examples/index.html | 1 | ||||
| m--------- | resources/leaflet-heat | 0 |
4 files changed, 80 insertions, 0 deletions
diff --git a/.gitmodules b/.gitmodules index c788e02..3565164 100644 --- a/.gitmodules +++ b/.gitmodules @@ -22,3 +22,6 @@ [submodule "resources/hartley-library-map-data"] path = resources/hartley-library-map-data url = git@sourcekettle.ecs.soton.ac.uk:projects/hartley-library-map-data.git +[submodule "resources/leaflet-heat"] + path = resources/leaflet-heat + url = https://github.com/Leaflet/Leaflet.heat.git diff --git a/examples/cycleparkingheatmap.html b/examples/cycleparkingheatmap.html new file mode 100644 index 0000000..17b5116 --- /dev/null +++ b/examples/cycleparkingheatmap.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> +<head> + <title>Cycle Parking Heat Map</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> + + <link rel="stylesheet" href="../src/leaflet-soton.css" /> + + <link rel="stylesheet" href="../resources/leaflet/dist/leaflet.css" /> + + <style> + body { + padding: 0; + margin: 0; + } + + html, body, #map { + height: 100%; + } + </style> +</head> +<body> + <div id="map"></div> + + <script src="../resources/leaflet/dist/leaflet.js"></script> + <script src="../resources/leaflet-heat/dist/leaflet-heat.js"></script> + + <script src="../src/leaflet-soton.js"></script> + + <script type="text/javascript"> + LS.imagePath = '../resources/images/'; + LS.dataPath = '../data.json'; + + var map = LS.map('map', { + indoor: false, + }); + + LS.getData(function(data) { + var heatmapData = []; + + console.log(data); + + data.bicycleParking.features.forEach(function(feature) { + var lat, + lon; + + if (feature.geometry.type === "Point") { + lat = feature.geometry.coordinates[1]; + lon = feature.geometry.coordinates[0]; + } else if (feature.geometry.type === "Polygon") { + lat = feature.geometry.coordinates[0][0][1]; + lon = feature.geometry.coordinates[0][0][0]; + } + + if ("capacity" in feature.properties) { + for (var i=0; i<feature.properties.capacity; i++) { + heatmapData.push([lat, lon]); + } + } else { + heatmapData.push([lat, lon]); + } + }); + + var heat = L.heatLayer(heatmapData, { + radius: 20, + blur: 5, + gradient: { + 0.4: 'green', + 0.65: 'lime', + 1: 'green' + } + }).addTo(map); + }); + </script> +</body> +</html> diff --git a/examples/index.html b/examples/index.html index c835004..fb1095b 100644 --- a/examples/index.html +++ b/examples/index.html @@ -94,6 +94,7 @@ h6 { font-size: 1em; line-height: 1.3125; } <li><a href="workstations.html">Workstations Example</a></li> <li><a href="zepler.html">Zepler Example</a></li> <li><a href="vendingmachines.html">Vending Machines Example</a></li> + <li><a href="cycleparkingheatmap.html">Cycle Parking Heatmap Example</a></li> </ul> <h2>OpenStreetMap</h2> diff --git a/resources/leaflet-heat b/resources/leaflet-heat new file mode 160000 +Subproject 9a41e607d2c22d07543e9e979b3d599d686d212 |