aboutsummaryrefslogtreecommitdiff
path: root/resources
diff options
context:
space:
mode:
Diffstat (limited to 'resources')
-rw-r--r--resources/map.js98
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);