diff options
| author | Christopher Baines <cb15g11@soton.ac.uk> | 2014-05-23 08:24:15 +0100 |
|---|---|---|
| committer | Christopher Baines <cb15g11@soton.ac.uk> | 2014-05-23 08:24:15 +0100 |
| commit | b50598a53ad04a985890539c3407ff7108754b70 (patch) | |
| tree | 4b944d07ec77bb2589da4f8350b42b7021320046 /examples | |
| parent | 2fa8f0a43b43eaadec6c0b150e86464c4b4b1bda (diff) | |
| download | leaflet-soton-b50598a53ad04a985890539c3407ff7108754b70.tar leaflet-soton-b50598a53ad04a985890539c3407ff7108754b70.tar.gz | |
Add a cycle parking heat map
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/cycleparkingheatmap.html | 76 | ||||
| -rw-r--r-- | examples/index.html | 1 |
2 files changed, 77 insertions, 0 deletions
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> |