aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorChristopher Baines <cbaines8@gmail.com>2013-02-03 13:39:44 +0000
committerChristopher Baines <cbaines8@gmail.com>2013-02-03 13:39:44 +0000
commite923b225e830cf83367f720cd6be3859e15bf404 (patch)
tree851d17d441932ff0b2b3d46eb842e84c11d71ea9
parenta4367d5c946cea388851d511c8c1e41b9c6b617f (diff)
parent31c59cac49991fa2f31d0e31d224968991593640 (diff)
downloadhealth-map-e923b225e830cf83367f720cd6be3859e15bf404.tar
health-map-e923b225e830cf83367f720cd6be3859e15bf404.tar.gz
Merge remote-tracking branch 'fodaro/master'
Conflicts: resources/map.js
-rw-r--r--resources/map.js141
1 files changed, 75 insertions, 66 deletions
diff --git a/resources/map.js b/resources/map.js
index 6567510..abc362f 100644
--- a/resources/map.js
+++ b/resources/map.js
@@ -1,3 +1,66 @@
+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 settlement layer
+ self.settlementLayer = L.geoJson({ type: "FeatureCollection", features: [] }, {
+ style: function(feature) {
+ return {fillColor: 'green',
+ weight: 2,
+ opacity: 1,
+ color: 'black',
+ dashArray: '3',
+ fillOpacity: 0.1};
+ },
+ onEachFeature: function(feature, layer) {
+ var center;
+ if (feature.geometry.type === "Point") {
+ center = feature.geometry.coordinates;
+ } else {
+ center = feature.geometry.coordinates[0];
+ }
+
+ var displayProperties = { name: feature.properties["name"], population: feature.properties["population"] };
+ if (typeof displayProperties["name"] == "undefined")
+ displayProperties["name"] = "Unknown";
+ if (typeof displayProperties["population"] == "undefined")
+ displayProperties["population"] = "Unknown";
+
+ layer.bindPopup(self.settlementPopupTemplate({ properties: displayProperties, coordinate: center }));
+ }
+ });
+ map.addLayer(self.settlementLayer);
+
+ // Layer controller
+ self.layersControl = L.control.layers().addTo(map);
+ self.layersControl.addOverlay(self.settlementLayer, "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 +181,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++;
@@ -151,7 +213,12 @@ function displayMap(self, map) {
});
}
- function createCatchmentAreaVillageLayer(catchmentArea) {
+ function addSettlementsForArea(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,15 +227,14 @@ 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 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);
});
}
@@ -178,35 +244,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};
- },
- onEachFeature: function(feature, layer) {
- var center;
- if (feature.geometry.type === "Point") {
- center = feature.geometry.coordinates;
- } else {
- center = feature.geometry.coordinates[0];
- }
-
- var displayProperties = { name: feature.properties["name"], population: feature.properties["population"] };
- if (typeof displayProperties["name"] == "undefined")
- displayProperties["name"] = "Unknown";
- if (typeof displayProperties["population"] == "undefined")
- displayProperties["population"] = "Unknown";
-
- layer.bindPopup(self.settlementPopupTemplate({ properties: feature.properties, coordinate: center }));
- },
- });
- map.addLayer(self.villageLayer);
- self.layersControl.addOverlay(self.villageLayer, "Settlements");
- self.villageLayer.clearLayers();
// For each catchment area polygon
_.each(
_.filter(data.features,
@@ -217,8 +254,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);
}
);
@@ -247,7 +283,7 @@ function displayMap(self, map) {
_.each(self.catchmentAreas, function(catchmentArea, i) {
// Update the data for each CatchmentAreaVillageLayer
- createCatchmentAreaVillageLayer(catchmentArea);
+ addSettlementsForArea(catchmentArea);
});
}
});
@@ -275,7 +311,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.settlementPopupTemplate = _.template('<a href="http://www.openstreetmap.org/edit?editor=potlatch2&lat=<%= coordinate[1] %>&lon=<%= coordinate[0] %>&zoom=18">\
+ self.settlementPopupTemplate= _.template('<a href="http://www.openstreetmap.org/edit?editor=potlatch2&lat=<%= coordinate[1] %>&lon=<%= coordinate[0] %>&zoom=18">\
<img src="resources/img/potlatch.png"></a>\
<a href="http://www.openstreetmap.org/edit?editor=remote&lat=<%= coordinate[1] %>&lon=<%= coordinate[0] %>&zoom=18">\
<img src="resources/img/josm.png"></a>\
@@ -285,34 +321,7 @@ $(document).ready(function() {
<tr><td>Population</td><td align="right"><%= properties["population"] %></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);