Add a population heat map

4 files changed, 28 insertions, 1 deletions

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 @@
 
 	<script src="resources/leaflet/dist/leaflet-src.js"></script>
 	<script src="resources/leaflet-hash/leaflet-hash.js"></script>
+	<script src="resources/heatmap/src/heatmap.js"></script>
+	<script src="resources/heatmap/src/heatmap-leaflet.js"></script>
 	<script src="resources/libs/locate/L.Control.Locate.js"></script>
 	<script src="resources/leaflet-minimap/src/Control.MiniMap.js"></script>
 	<script src="resources/op2geojson.js"></script>
diff --git a/resources/heatmap b/resources/heatmap
new file mode 160000
+Subproject e69a5bbedfd9718ebe0ac2bf161a28503c1285e
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) {