Fix overlay only appearing after the map was moved

1 files changed, 152 insertions, 148 deletions

diff --git a/resources/map.js b/resources/map.js
index a503d66..5601167 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);
 });