aboutsummaryrefslogtreecommitdiff
path: root/resources
diff options
context:
space:
mode:
Diffstat (limited to 'resources')
-rw-r--r--resources/map.js300
1 files changed, 152 insertions, 148 deletions
diff --git a/resources/map.js b/resources/map.js
index ad45853..f261f3f 100644
--- a/resources/map.js
+++ b/resources/map.js
@@ -1,3 +1,153 @@
+function displayMap(self, map) {
+
+ function createQueryData(bbox) {
+ return "data=[out:json];(" +
+ "(node[amenity=hospital]("+ bbox +");way[amenity=hospital]("+ bbox +");node(w););" +
+ "(node[amenity=doctors]("+ bbox +");way[amenity=doctors]("+ bbox +");node(w););" +
+ "(node[amenity=dentist]("+ bbox +");way[amenity=dentist]("+ bbox +");node(w););" +
+ "(node(" + bbox + ");relation[type=boundary][boundary=catchment_area];way(r);node(w););" +
+ ");out;";
+ }
+
+ function highlightFeature(e) {
+ var layer = e.target;
+
+ layer.setStyle({
+ weight: 5,
+ color: '#666',
+ dashArray: '',
+ fillOpacity: 0.1
+ });
+
+ if (!L.Browser.ie && !L.Browser.opera) {
+ layer.bringToFront();
+ }
+ }
+
+ function resetHighlight(e) {
+ self.catchmentAreaLayer.resetStyle(e.target);
+ }
+
+ var hospitalIcon = L.icon({
+ iconUrl: 'resources/img/hospital.png',
+
+ iconSize: [18, 18],
+ iconAnchor: [9, 9], // point on the icon corresponding to marker's location
+ popupAnchor: [2, -9] // point to open the popup from relative to iconAnchor
+ });
+
+ var zoom = map.getZoom();
+ if (zoom < 10) {
+ return;
+ }
+
+ // Make the bounding box string
+ var bounds = map.getBounds();
+ var sw = bounds.getSouthWest();
+ var ne = bounds.getNorthEast();
+ bbox = [sw.lat, sw.lng, ne.lat, ne.lng].join(',');
+
+ // Get the data
+ var data = createQueryData(bbox);
+
+ // Convert the data to GeoJSON
+ converter = new op2geojson();
+ converter.fetch("http://overpass-api.de/api/interpreter", data, zoom, function(data) {
+ if (jQuery.isEmptyObject(self.amenityLayers)) {
+ var markers = {};
+ var catchmentAreaForAmenity = {};
+
+ _.each(
+ _.filter(data.features,
+ function(feature) {
+ return _.contains(_.values(feature.properties), "catchment_area");
+ }),
+ function(catchmentArea) {
+ catchmentAreaForAmenity[catchmentArea.properties["subject"]] = catchmentArea;
+ });
+
+ // Now deal with the catchment areas
+ self.catchmentAreaLayer = L.geoJson(data, {
+ style: function(feature) {
+ return {fillColor: 'green',
+ weight: 2,
+ opacity: 1,
+ color: 'black',
+ dashArray: '3',
+ fillOpacity: 0.1};
+ },
+ onEachFeature: function(feature, layer) {
+ layer.on({
+ mouseover: highlightFeature,
+ mouseout: resetHighlight,
+ click: function() {
+ markers[feature.properties.subject].openPopup();
+ }
+ });
+ },
+ filter: function(feature, layer) {
+ return _.contains(_.values(feature.properties), "catchment_area");
+ }
+ });
+
+ _.each(self.amenities, function(amenity, i) {
+ self.amenityLayers[amenity] = L.geoJson(data, {
+ style: function(feature) {
+ return {color: 'red',
+ fillColor: 'red',
+ fillOpacity: 0.2,
+ weight: 10};
+ },
+ onEachFeature: function(feature, layer) {
+ var center;
+ if (feature.geometry.type === "Point") {
+ layer.options.icon = hospitalIcon;
+ center = feature.geometry.coordinates;
+ } else {
+ center = feature.geometry.coordinates[0];
+ }
+
+ var catchmentArea = catchmentAreaForAmenity[feature.id];
+
+ var format = new OpenLayers.Format.GeoJSON;
+ var openLayersGeo = format.parseGeometry(catchmentArea.geometry);
+
+ var areaInSquareMeters = openLayersGeo.getGeodesicArea();
+ var areaString = areaInSquareMeters.toFixed(2) + "m" + "2".sup();
+ if (areaInSquareMeters > 1000000) {
+ areaString = (areaInSquareMeters / 1000000).toFixed(2) + "km" + "2".sup();
+ }
+ var areaProperties = { area: areaString }
+
+ layer.bindPopup(self.popupTemplate({ properties: $.extend(feature.properties, areaProperties), coordinate: center }));
+
+ markers[feature.id] = layer;
+ },
+ filter: function(feature, layer) {
+ return _.contains(_.values(feature.properties), amenity);
+ }
+ });
+
+ map.addLayer(self.amenityLayers[amenity]);
+ self.layersControl.addOverlay(self.amenityLayers[amenity],
+ self.amenities[i].charAt(0).toUpperCase() + self.amenities[i].slice(1));
+ });
+
+ map.addLayer(self.catchmentAreaLayer);
+ self.layersControl.addOverlay(self.catchmentAreaLayer, "Catchment Areas");
+ } else {
+ self.catchmentAreaLayer.clearLayers();
+ self.catchmentAreaLayer.addData(data);
+
+ _.each(self.amenities, function(amenity, i) {
+ // Update the data for each amenity layer
+ self.amenityLayers[amenity].clearLayers();
+ self.amenityLayers[amenity].addData(data);
+ });
+ }
+ });
+}
+
$(document).ready(function() {
var self = this; // the HTMLDocument
@@ -20,14 +170,6 @@ $(document).ready(function() {
<tr><td>Average distance of all villages from health structure</td><td></td></tr>\
</table>');
- var hospitalIcon = L.icon({
- iconUrl: 'resources/img/hospital.png',
-
- iconSize: [18, 18],
- iconAnchor: [9, 9], // point on the icon corresponding to marker's location
- popupAnchor: [2, -9] // point to open the popup from relative to iconAnchor
- });
-
self.tileLayer = L.tileLayer('http://{s}.www.toolserver.org/tiles/osm-no-labels/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
@@ -47,15 +189,6 @@ $(document).ready(function() {
L.control.locate().addTo(map);
- function createQueryData(bbox) {
- return "data=[out:json];(" +
- "(node[amenity=hospital]("+ bbox +");way[amenity=hospital]("+ bbox +");node(w););" +
- "(node[amenity=doctors]("+ bbox +");way[amenity=doctors]("+ bbox +");node(w););" +
- "(node[amenity=dentist]("+ bbox +");way[amenity=dentist]("+ bbox +");node(w););" +
- "(node(" + bbox + ");relation[type=boundary][boundary=catchment_area];way(r);node(w););" +
- ");out;";
- }
-
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend');
@@ -65,139 +198,9 @@ $(document).ready(function() {
legend.addTo(map);
map.on('moveend', function(e) {
- var zoom = map.getZoom();
- if (zoom < 10) {
- return;
- }
-
- // Make the bounding box string
- var bounds = map.getBounds();
- var sw = bounds.getSouthWest();
- var ne = bounds.getNorthEast();
- bbox = [sw.lat, sw.lng, ne.lat, ne.lng].join(',');
-
- // Get the data
- var data = createQueryData(bbox);
-
- // Convert the data to GeoJSON
- converter = new op2geojson();
- converter.fetch("http://overpass-api.de/api/interpreter", data, zoom, function(data) {
- if (jQuery.isEmptyObject(self.amenityLayers)) {
- var markers = {};
- var catchmentAreaForAmenity = {};
-
- _.each(
- _.filter(data.features,
- function(feature) {
- return _.contains(_.values(feature.properties), "catchment_area");
- }),
- function(catchmentArea) {
- catchmentAreaForAmenity[catchmentArea.properties["subject"]] = catchmentArea;
- });
-
- console.log(catchmentAreaForAmenity);
-
- // Now deal with the catchment areas
- self.catchmentAreaLayer = L.geoJson(data, {
- style: function(feature) {
- return {fillColor: 'green',
- weight: 2,
- opacity: 1,
- color: 'black',
- dashArray: '3',
- fillOpacity: 0.1};
- },
- onEachFeature: function(feature, layer) {
- layer.on({
- mouseover: highlightFeature,
- mouseout: resetHighlight,
- click: function() {
- markers[feature.properties.subject].openPopup();
- }
- });
- },
- filter: function(feature, layer) {
- return _.contains(_.values(feature.properties), "catchment_area");
- }
- });
-
- _.each(self.amenities, function(amenity, i) {
- self.amenityLayers[amenity] = L.geoJson(data, {
- style: function(feature) {
- return {color: 'red',
- fillColor: 'red',
- fillOpacity: 0.2,
- weight: 10};
- },
- onEachFeature: function(feature, layer) {
- var center;
- if (feature.geometry.type === "Point") {
- layer.options.icon = hospitalIcon;
- center = feature.geometry.coordinates;
- } else {
- center = feature.geometry.coordinates[0];
- }
-
- var catchmentArea = catchmentAreaForAmenity[feature.id];
-
- var format = new OpenLayers.Format.GeoJSON;
- var openLayersGeo = format.parseGeometry(catchmentArea.geometry);
-
- var areaInSquareMeters = openLayersGeo.getGeodesicArea();
- var areaString = areaInSquareMeters.toFixed(2) + "m" + "2".sup();
- if (areaInSquareMeters > 1000000) {
- areaString = (areaInSquareMeters / 1000000).toFixed(2) + "km" + "2".sup();
- }
- var areaProperties = { area: areaString }
-
- layer.bindPopup(self.popupTemplate({ properties: $.extend(feature.properties, areaProperties), coordinate: center }));
-
- markers[feature.id] = layer;
- },
- filter: function(feature, layer) {
- return _.contains(_.values(feature.properties), amenity);
- }
- });
-
- map.addLayer(self.amenityLayers[amenity]);
- self.layersControl.addOverlay(self.amenityLayers[amenity],
- self.amenities[i].charAt(0).toUpperCase() + self.amenities[i].slice(1));
- });
-
- map.addLayer(self.catchmentAreaLayer);
- self.layersControl.addOverlay(self.catchmentAreaLayer, "Catchment Areas");
- } else {
- self.catchmentAreaLayer.clearLayers();
- self.catchmentAreaLayer.addData(data);
-
- _.each(self.amenities, function(amenity, i) {
- // Update the data for each amenity layer
- self.amenityLayers[amenity].clearLayers();
- self.amenityLayers[amenity].addData(data);
- });
- }
- });
+ displayMap(self, map);
})
- function highlightFeature(e) {
- var layer = e.target;
-
- layer.setStyle({
- weight: 5,
- color: '#666',
- dashArray: '',
- fillOpacity: 0.1
- });
-
- if (!L.Browser.ie && !L.Browser.opera) {
- layer.bringToFront();
- }
- }
-
- function resetHighlight(e) {
- self.catchmentAreaLayer.resetStyle(e.target);
- }
-
function onLocationFound(e) {
self.currentLocation = e.latlng;
var radius = e.accuracy / 2;
@@ -213,4 +216,5 @@ $(document).ready(function() {
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 12});
+ displayMap(self, map);
});
generated by cgit v1.2.3 (git 2.45.0) at 2024-11-23 21:16:19 +0000