diff options
| -rw-r--r-- | resources/map.js | 98 |
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 © <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 © <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); |