diff options
| -rw-r--r-- | resources/map.js | 278 | ||||
| -rw-r--r-- | resources/op2geojson.js | 3 |
2 files changed, 123 insertions, 158 deletions
diff --git a/resources/map.js b/resources/map.js index 02a45d3..a822085 100644 --- a/resources/map.js +++ b/resources/map.js @@ -47,180 +47,137 @@ function displayMap(self, map) { var ne = bounds.getNorthEast(); bbox = [sw.lat, sw.lng, ne.lat, ne.lng].join(','); - 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"); - } - }); + self.converter = new op2geojson(); + var markers = {}; + + function createCatchmentAreaLayer(data) { + return 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); - } - }); + function createAmenityLayer(data, amenity) { + return 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 = self.catchmentAreas[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)); - }); + function createCatchmentAreaVillageLayer(catchmentArea) { - map.addLayer(self.catchmentAreaLayer); - self.layersControl.addOverlay(self.catchmentAreaLayer, "Catchment Areas"); - } else { - self.catchmentAreaLayer.clearLayers(); - self.catchmentAreaLayer.addData(data); + var poly = ""; + _.each(catchmentArea.geometry.coordinates[0], function(coordinatePair) { + poly += coordinatePair[1] + " " + coordinatePair[0] + " "; + }); + poly = poly.slice(0, -1); + + var query = 'data=[out:json];(node(poly:"' + poly + '");<;node(w););out;'; + + // Convert the data to GeoJSON + + self.converter.fetch("http://overpass-api.de/api/interpreter", query, zoom, function(data) { + if (typeof self.villageLayers[catchmentArea.id] == 'undefined') { + + self.villageLayers[catchmentArea.id] = L.geoJson(data, { + style: function(feature) { + return {fillColor: 'green', + weight: 2, + opacity: 1, + color: 'black', + dashArray: '3', + fillOpacity: 0.1}; + }, + filter: function(feature, layer) { + return _.contains(_.keys(feature.properties), "place") || + feature.properties["landuse"] == "residential"; + } + }); + + map.addLayer(self.villageLayers[catchmentArea.id]); + } else { + self.villageLayers[catchmentArea.id].clearLayers(); + self.villageLayers[catchmentArea.id].addData(data); + } + }); + } - _.each(self.amenities, function(amenity, i) { - // Update the data for each amenity layer - self.amenityLayers[amenity].clearLayers(); - self.amenityLayers[amenity].addData(data); - }); - } - }); + var query = createQueryData(bbox); - converter.fetch("http://overpass-api.de/api/interpreter", data, zoom, function(data) { + // Convert the data to GeoJSON + self.converter.fetch("http://overpass-api.de/api/interpreter", query, zoom, function(data) { if (jQuery.isEmptyObject(self.amenityLayers)) { - var markers = {}; - var catchmentAreaForAmenity = {}; + // For each catchment area polygon _.each( _.filter(data.features, function(feature) { return _.contains(_.values(feature.properties), "catchment_area"); }), function(catchmentArea) { - catchmentAreaForAmenity[catchmentArea.properties["subject"]] = catchmentArea; - }); + // Add it to the associative array + self.catchmentAreas[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"); + // Create a village layer + createCatchmentAreaVillageLayer(catchmentArea); } - }); + ); + + // Now deal with the catchment areas + self.catchmentAreaLayer = createCatchmentAreaLayer(data); _.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); - } - }); + self.amenityLayers[amenity] = createAmenityLayer(data, amenity); map.addLayer(self.amenityLayers[amenity]); self.layersControl.addOverlay(self.amenityLayers[amenity], @@ -238,6 +195,11 @@ function displayMap(self, map) { self.amenityLayers[amenity].clearLayers(); self.amenityLayers[amenity].addData(data); }); + + _.each(self.catchmentAreas, function(catchmentArea, i) { + // Update the data for each CatchmentAreaVillageLayer + createCatchmentAreaVillageLayer(catchmentArea); + }); } }); } @@ -278,6 +240,8 @@ $(document).ready(function() { 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); diff --git a/resources/op2geojson.js b/resources/op2geojson.js index fd0ae35..5a0f3a2 100644 --- a/resources/op2geojson.js +++ b/resources/op2geojson.js @@ -56,7 +56,7 @@ op2geojson = function() { relation.tags['boundary'] == 'catchment_area') { var poly = instance.polygon(relation, ways, nodes); - poly.id = relation.tags['id']; + poly.id = relation.id; features.push(poly); } }); @@ -119,6 +119,7 @@ op2geojson = function() { $.each(relation.members, function(i, member) { if (member.role == "outer") { var way = ways[member.ref]; + if (typeof way == 'undefined') return; var wayCoords = instance.lineString(way, nodes).geometry.coordinates; var numNodes = wayCoords.length |