From 9ab440f1369957b5e1225bfb4f3191dfb0caebb2 Mon Sep 17 00:00:00 2001 From: Harry Cutts Date: Sun, 3 Feb 2013 13:24:58 +0000 Subject: Stop village icons being recreated every move Also moved map initialisation code into the initMap method. --- resources/map.js | 98 +++++++++++++++++++++++++++++++------------------------- 1 file changed, 54 insertions(+), 44 deletions(-) (limited to 'resources') 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 © OpenStreetMap 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 += ' Hospital
'; + 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() { Average distance of all settlements from health structure<%= properties["average_settlement_dist"] %>\ '); - self.tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - maxZoom: 18, - attribution: 'Map data © OpenStreetMap 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 += ' Hospital
'; - return div; - }; - legend.addTo(map); + var map = initMap(self); map.on('moveend', function(e) { displayMap(self, map); -- cgit v1.2.3 From 31c59cac49991fa2f31d0e31d224968991593640 Mon Sep 17 00:00:00 2001 From: Harry Cutts Date: Sun, 3 Feb 2013 13:28:36 +0000 Subject: Rename "villages" to "settlements" --- resources/map.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) (limited to 'resources') diff --git a/resources/map.js b/resources/map.js index 27e4de8..552bc76 100644 --- a/resources/map.js +++ b/resources/map.js @@ -14,8 +14,8 @@ function initMap(self) { self.amenityLayers = {}; // contains the layers for each amenity type self.catchmentAreas = {}; - // Create the village layer - self.villageLayer = L.geoJson({ type: "FeatureCollection", features: [] }, { + // Create the settlement layer + self.settlementLayer = L.geoJson({ type: "FeatureCollection", features: [] }, { style: function(feature) { return {fillColor: 'green', weight: 2, @@ -25,11 +25,11 @@ function initMap(self) { fillOpacity: 0.1}; } }); - map.addLayer(self.villageLayer); + map.addLayer(self.settlementLayer); // Layer controller self.layersControl = L.control.layers().addTo(map); - self.layersControl.addOverlay(self.villageLayer, "Settlements"); + self.layersControl.addOverlay(self.settlementLayer, "Settlements"); L.control.locate().addTo(map); @@ -197,7 +197,7 @@ function displayMap(self, map) { }); } - function createCatchmentAreaVillageLayer(catchmentArea) { + function addSettlementsForArea(catchmentArea) { if (typeof catchmentArea.settlements != 'undefined') { return; } @@ -211,14 +211,14 @@ function displayMap(self, map) { var query = 'data=[out:json];(node(poly:"' + poly + '");<;node(w););out;'; - // Fetch village data + // Fetch settlement 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") || feature.properties["landuse"] == "residential"; }); catchmentArea.settlements = data.features; - self.villageLayer.addData(data); + self.settlementLayer.addData(data); }); } @@ -238,8 +238,7 @@ function displayMap(self, map) { // Add it to the associative array self.catchmentAreas[catchmentArea.properties["subject"]] = catchmentArea; - // Create a village layer - createCatchmentAreaVillageLayer(catchmentArea); + addSettlementsForArea(catchmentArea); } ); @@ -268,7 +267,7 @@ function displayMap(self, map) { _.each(self.catchmentAreas, function(catchmentArea, i) { // Update the data for each CatchmentAreaVillageLayer - createCatchmentAreaVillageLayer(catchmentArea); + addSettlementsForArea(catchmentArea); }); } }); -- cgit v1.2.3