diff options
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | resources/data.js | 9 | ||||
| -rw-r--r-- | resources/map.js | 96 |
3 files changed, 105 insertions, 1 deletions
@@ -18,6 +18,7 @@ <script src="resources/leaflet/dist/leaflet-src.js"></script> <script src="resources/libs/locate/L.Control.Locate.js"></script> <script src="resources/op2geojson.js"></script> + <script src="resources/data.js"></script> </head> <body> <div id="map"></div> diff --git a/resources/data.js b/resources/data.js new file mode 100644 index 0000000..85a77c2 --- /dev/null +++ b/resources/data.js @@ -0,0 +1,9 @@ +function getVillages(area, zoom) { + var poly = "12.3 -12.3 12.4 -12.3 12.48 -12.25 12.35 -12.19"; + var query = 'data=[out:json];(node(poly:"' + poly + '");<;);out;'; + + converter = new op2geojson(); + converter.fetch("http://overpass-api.de/api/interpreter", query, zoom, function(data) { + + }); +} diff --git a/resources/map.js b/resources/map.js index f261f3f..02a45d3 100644 --- a/resources/map.js +++ b/resources/map.js @@ -47,7 +47,6 @@ function displayMap(self, map) { 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 @@ -146,6 +145,101 @@ function displayMap(self, map) { }); } }); + + 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() { |