From fd37256e27c22d1bfa551895d2f5d347b14846bc Mon Sep 17 00:00:00 2001 From: Harry Cutts Date: Sat, 2 Feb 2013 16:07:26 +0000 Subject: Fix overlay only appearing after the map was moved --- resources/map.js | 300 ++++++++++++++++++++++++++++--------------------------- 1 file 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() { Average distance of all villages from health structure\ '); - 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 © OpenStreetMap 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); }); -- cgit v1.2.3