From db408996fa441654c6aaa5688706b2b10fd3b04a Mon Sep 17 00:00:00 2001 From: Christopher Baines Date: Fri, 15 Feb 2013 20:26:14 +0000 Subject: Add a population heat map --- .gitmodules | 3 +++ index.html | 2 ++ resources/heatmap | 1 + resources/map.js | 24 +++++++++++++++++++++++- 4 files changed, 29 insertions(+), 1 deletion(-) create mode 160000 resources/heatmap diff --git a/.gitmodules b/.gitmodules index 377a496..44adeff 100644 --- a/.gitmodules +++ b/.gitmodules @@ -10,3 +10,6 @@ [submodule "resources/leaflet-minimap"] path = resources/leaflet-minimap url = git://github.com/Norkart/Leaflet-MiniMap.git +[submodule "resources/heatmap"] + path = resources/heatmap + url = git://github.com/pa7/heatmap.js.git diff --git a/index.html b/index.html index 3e96e9d..ab87e40 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,8 @@ + + diff --git a/resources/heatmap b/resources/heatmap new file mode 160000 index 0000000..e69a5bb --- /dev/null +++ b/resources/heatmap @@ -0,0 +1 @@ +Subproject commit e69a5bbedfd9718ebe0ac2bf161a28503c1285e1 diff --git a/resources/map.js b/resources/map.js index 64484f3..8a006bc 100644 --- a/resources/map.js +++ b/resources/map.js @@ -172,6 +172,21 @@ function initMap(self) { map.addLayer(self.settlementsLayerGroup); self.layersControl.addOverlay(self.settlementsLayerGroup, "Settlements"); + self.populationHeatMap = new L.TileLayer.heatMap({ + radius: 20, + opacity: 0.8, + gradient: { + 0.45: "rgb(0,0,255)", + 0.55: "rgb(0,255,255)", + 0.65: "rgb(0,255,0)", + 0.95: "yellow", + 1.0: "rgb(255,0,0)" + } + }); + + map.addLayer(self.populationHeatMap); + self.layersControl.addOverlay(self.populationHeatMap, "Population Heat Map"); + var emptyFeatureCollection = { type: "FeatureCollection", features: [] }; var hospitalIcon = L.icon({ @@ -360,14 +375,20 @@ function displayMap(self, map) { var displayProperties = { name: feature.properties["name"], population: feature.properties["population"] }; if (typeof displayProperties["name"] == "undefined") displayProperties["name"] = "Unknown"; - if (typeof displayProperties["population"] == "undefined") + if (typeof displayProperties["population"] == "undefined") { displayProperties["population"] = "Unknown"; + } else { + self.populationHeatMapData.push({lat: center[1], lon: center[0], value: feature.properties.population}); + } layer.bindPopup(self.editorTemplate({coordinate: center}) + self.settlementTemplate(displayProperties)); } }); self.settlementsLayerGroup.addLayer(self.catchmentAreaSettlementsLayers[catchmentArea.id]); + self.populationHeatMap.addData(self.populationHeatMapData); + self.populationHeatMap.redraw(); + var healthPost = self.healthPosts[catchmentArea.properties.subject]; var center; @@ -393,6 +414,7 @@ function displayMap(self, map) { _.each(self.amenitiesShown, function(amenity) { self.amenities[amenity] = []; }); + self.populationHeatMapData = []; // Convert the data to GeoJSON self.converter.fetch("http://overpass-api.de/api/interpreter", query, zoom, function(data) { -- cgit v1.2.3