Stop village icons being recreated every move

Also moved map initialisation code into the initMap method.

1 files changed, 54 insertions, 44 deletions

diff --git a/resources/map.js b/resources/map.js
index b51e456..27e4de8 100644
--- a/resources/map.js
+++ b/resources/map.js
@@ -1,3 +1,50 @@
+function initMap(self) {
+	self.tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+		maxZoom: 18,
+		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
+	});
+
+	// Create the map
+	var map = L.map( 'map', {
+		zoom: 12,
+		layers: [self.tileLayer],
+	}).setView([12.4822, -11.9463], 11);
+
+	self.amenities = ["hospital", "doctors", "dentist"];
+    self.amenityLayers = {};  // contains the layers for each amenity type
+    self.catchmentAreas = {};
+
+	// Create the village layer
+	self.villageLayer = L.geoJson({ type: "FeatureCollection", features: [] }, {
+		style: function(feature) {
+			return {fillColor: 'green',
+					weight: 2,
+					opacity: 1,
+					color: 'black',
+					dashArray: '3',
+					fillOpacity: 0.1};
+		}
+	});
+	map.addLayer(self.villageLayer);
+
+	// Layer controller
+	self.layersControl = L.control.layers().addTo(map);
+	self.layersControl.addOverlay(self.villageLayer, "Settlements");
+
+	L.control.locate().addTo(map);
+
+	// Legend
+    var legend = L.control({position: 'bottomright'});
+    legend.onAdd = function (map) {
+        var div = L.DomUtil.create('div', 'info legend');
+        div.innerHTML += '<img src="resources/img/hospital.png"> Hospital<br>';
+        return div;
+    };
+    legend.addTo(map);
+
+	return map;
+}
+
 function displayMap(self, map) {
 
 	function createQueryData(bbox) {
@@ -118,7 +165,6 @@ function displayMap(self, map) {
 
                     _.each(settlements, function(settlement) {
                         if (typeof settlement.properties.population != "undefined") {
-                            console.log(settlement.properties.population);
                             population += parseInt(settlement.properties.population);
                         } else {
                             numberOfSettlementsWithoutPopulation++;
@@ -152,6 +198,11 @@ function displayMap(self, map) {
     }
 
     function createCatchmentAreaVillageLayer(catchmentArea) {
+		if (typeof catchmentArea.settlements != 'undefined') {
+			return;
+		}
+
+		// Create the bounding polygon for the query
         var poly = "";
         _.each(catchmentArea.geometry.coordinates[0], function(coordinatePair) {
             poly += coordinatePair[1] + " " + coordinatePair[0] + " ";
@@ -160,8 +211,7 @@ function displayMap(self, map) {
 
         var query = 'data=[out:json];(node(poly:"' + poly + '");<;node(w););out;';
 
-        // Convert the data to GeoJSON
-		// TODO: Don't refetch villages on every map move
+        // Fetch village data
         self.converter.fetch("http://overpass-api.de/api/interpreter", query, zoom, function(data) {
             data.features = _.filter(data.features, function(feature) {
                                     return _.contains(_.keys(feature.properties), "place") ||
@@ -178,19 +228,6 @@ function displayMap(self, map) {
 	self.converter.fetch("http://overpass-api.de/api/interpreter", query, zoom, function(data) {
 		if (jQuery.isEmptyObject(self.amenityLayers)) {
 
-			self.villageLayer = L.geoJson(data, {
-				style: function(feature) {
-					return {fillColor: 'green',
-							weight: 2,
-							opacity: 1,
-							color: 'black',
-							dashArray: '3',
-							fillOpacity: 0.1};
-				}
-			});
-			map.addLayer(self.villageLayer);
-			self.layersControl.addOverlay(self.villageLayer, "Settlements");
-			self.villageLayer.clearLayers();
             // For each catchment area polygon
 			_.each(
 				_.filter(data.features,
@@ -259,34 +296,7 @@ $(document).ready(function() {
 <tr><td>Average distance of all settlements from health structure</td><td align="right"><%= properties["average_settlement_dist"] %></td></tr>\
 </table>');
 
-	self.tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-		maxZoom: 18,
-		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
-	});
-
-	var map = L.map( 'map', {
-		zoom: 12,
-		layers: [self.tileLayer],
-	}).setView([12.4822, -11.9463], 11);
-    // TODO: Not sure why the above call to setView is needed
-
-	self.amenities = ["hospital", "doctors", "dentist"];
-    // This contains the layers for each of the above amenities
-    self.amenityLayers = {};
-    self.catchmentAreas = {};
-    self.villageLayers = {};
-
-	self.layersControl = L.control.layers().addTo(map);
-
-	L.control.locate().addTo(map);
-
-    var legend = L.control({position: 'bottomright'});
-    legend.onAdd = function (map) {
-        var div = L.DomUtil.create('div', 'info legend');
-        div.innerHTML += '<img src="resources/img/hospital.png"> Hospital<br>';
-        return div;
-    };
-    legend.addTo(map);
+	var map = initMap(self);
 
 	map.on('moveend', function(e) {
 		displayMap(self, map);