Lots of changes to try and get the village data

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