From 679086b8d0bc393f698b289454d698a0f0c6b33c Mon Sep 17 00:00:00 2001 From: Christopher Baines Date: Sat, 2 Mar 2013 22:13:01 +0000 Subject: Update some libs, and improve display on different zoom levels --- resources/leaflet | 2 +- resources/leaflet-hash | 2 +- resources/leaflet-minimap | 2 +- resources/map.js | 48 +++++++++++++++++------------ resources/op2geojson.js | 77 ++++++++++++++++++++++++++++++++++++----------- resources/openlayers | 2 +- 6 files changed, 92 insertions(+), 41 deletions(-) diff --git a/resources/leaflet b/resources/leaflet index 7e029d2..333899c 160000 --- a/resources/leaflet +++ b/resources/leaflet @@ -1 +1 @@ -Subproject commit 7e029d21cc48557133d70ceb852fb327f8462b6f +Subproject commit 333899ca518b6ad7080e7e9ddb0492d4ba4c5d51 diff --git a/resources/leaflet-hash b/resources/leaflet-hash index 07f9178..03d9033 160000 --- a/resources/leaflet-hash +++ b/resources/leaflet-hash @@ -1 +1 @@ -Subproject commit 07f9178d8fd84b3fb030f34f361f63e5a19dbcd1 +Subproject commit 03d9033897b275646948366ae355b6e60866dd51 diff --git a/resources/leaflet-minimap b/resources/leaflet-minimap index e1cc0a5..50e3d6e 160000 --- a/resources/leaflet-minimap +++ b/resources/leaflet-minimap @@ -1 +1 @@ -Subproject commit e1cc0a5978e6fd68642e5e276a77c7563b7df774 +Subproject commit 50e3d6e64eecb0d1dd796aab6edcf87146057488 diff --git a/resources/map.js b/resources/map.js index 8a006bc..8a7bac4 100644 --- a/resources/map.js +++ b/resources/map.js @@ -184,7 +184,7 @@ function initMap(self) { } }); - map.addLayer(self.populationHeatMap); + //map.addLayer(self.populationHeatMap); self.layersControl.addOverlay(self.populationHeatMap, "Population Heat Map"); var emptyFeatureCollection = { type: "FeatureCollection", features: [] }; @@ -253,7 +253,9 @@ function initMap(self) { layer.options.icon = hospitalIcon; center = feature.geometry.coordinates; } else { - center = feature.geometry.coordinates[0]; + var format = new OpenLayers.Format.GeoJSON; + var geom = format.parseGeometry(feature.geometry); + center = geom.getCentroid(); } var catchmentArea = self.catchmentAreas[feature.id]; @@ -332,8 +334,6 @@ function displayMap(self, map) { var ne = bounds.getNorthEast(); bbox = [sw.lat, sw.lng, ne.lat, ne.lng].join(','); - self.converter = new op2geojson(); - function addSettlementsForArea(catchmentArea) { // Create the bounding polygon for the query var poly = ""; @@ -357,11 +357,10 @@ function displayMap(self, map) { } else { self.catchmentAreaSettlementsLayers[catchmentArea.id] = L.geoJson(data, { style: function(feature) { - return {fillColor: 'green', - weight: 2, + return {fillColor: 'grey', + weight: 1, opacity: 1, color: 'black', - dashArray: '3', fillOpacity: 0.1}; }, onEachFeature: function(feature, layer) { @@ -369,7 +368,9 @@ function displayMap(self, map) { if (feature.geometry.type === "Point") { center = feature.geometry.coordinates; } else { - center = feature.geometry.coordinates[0]; + var format = new OpenLayers.Format.GeoJSON; + var geom = format.parseGeometry(feature.geometry); + center = geom.getCentroid(); } var displayProperties = { name: feature.properties["name"], population: feature.properties["population"] }; @@ -391,21 +392,28 @@ function displayMap(self, map) { var healthPost = self.healthPosts[catchmentArea.properties.subject]; - var center; - if (healthPost.geometry.type === "Point") { - center = healthPost.geometry.coordinates; + if (_.isUndefined(healthPost)) { + console.log("No health post found for catchment area"); } else { - center = healthPost.geometry.coordinates[0]; - } + var center; + if (healthPost.geometry.type === "Point") { + center = healthPost.geometry.coordinates; + } else { + var format = new OpenLayers.Format.GeoJSON; + var geom = format.parseGeometry(healthPost.geometry); + center = geom.getCentroid(); + } + + self.markers[catchmentArea.properties.subject].bindPopup(self.editorTemplate({coordinate: center}) + + self.healthPostTemplate(healthPost.properties) + + self.catchmentAreaTemplate(catchmentAreaProperties(catchmentArea, healthPost))); - self.markers[catchmentArea.properties.subject].bindPopup(self.editorTemplate({coordinate: center}) + - self.healthPostTemplate(healthPost.properties) + - self.catchmentAreaTemplate(catchmentAreaProperties(catchmentArea, healthPost))); + } } } // Fetch settlement data - self.converter.fetch("http://overpass-api.de/api/interpreter", query, zoom, + self.converter.fetch("http://overpass-api.de/api/interpreter", query, zoom, map.getCenter().lat, (function(catchmentArea) { return function (data) { processSettlements(data, catchmentArea); }; })(catchmentArea)); } @@ -417,7 +425,7 @@ function displayMap(self, map) { self.populationHeatMapData = []; // Convert the data to GeoJSON - self.converter.fetch("http://overpass-api.de/api/interpreter", query, zoom, function(data) { + self.converter.fetch("http://overpass-api.de/api/interpreter", query, zoom, map.getCenter().lat, function(data) { self.catchmentAreaLayer.clearLayers(); var oldCatchmentAreas = self.catchmentAreas; @@ -514,12 +522,12 @@ $(document).ready(function() { } function onLocationError(e) { - alert(e.message); + //alert(e.message); } map.on('locationfound', onLocationFound); map.on('locationerror', onLocationError); map.locate({setView: true, maxZoom: 12}); - displayMap(self, map); + //displayMap(self, map); }); diff --git a/resources/op2geojson.js b/resources/op2geojson.js index a4233fd..d928310 100644 --- a/resources/op2geojson.js +++ b/resources/op2geojson.js @@ -5,7 +5,7 @@ op2geojson = function() { var instance = {}, geojson; - instance.fetch = function(url, data, zoom, callback) { + instance.fetch = function(url, data, zoom, latitude, callback) { var postCallback = function(data) { // Add nodes and ways to the layer var features = []; @@ -31,23 +31,43 @@ op2geojson = function() { } }); + var format = new OpenLayers.Format.GeoJSON; + // circumference of the Earth * cos(latitude)/2^(zoom level +8) + var latitudeInRadians = latitude * Math.PI/180; + var metersPerPixel = (40075000 * Math.cos(latitudeInRadians))/(Math.pow(2, (zoom + 8))); + $.each(ways, function(i, way) { - if (zoom < 16) { - var node = nodes[way.nodes[0]]; - var point = { - type : "Feature", - id : way.id, - geometry : { - type : "Point", - coordinates : [node.lon,node.lat] - }, - properties : {} - }; - _.extend(point.properties, way.tags); - features.push(point); - } else { - features.push(instance.lineString(way, nodes)); - } + if (!_.isUndefined(way.tags) && ( + way.tags.amenity == "hospital" || + !_.isUndefined(way.tags.place) || + way.tags.landuse == "residential")) { + + var area = instance.wayToPolygon(way, nodes); + + var areaGeo = format.parseGeometry(area.geometry); + + var geodesicArea = areaGeo.getGeodesicArea(); + var averageWidth = Math.sqrt(geodesicArea); + var pixelsOfAverageWidth = averageWidth / metersPerPixel; + + if (pixelsOfAverageWidth < 10) { + var node = nodes[way.nodes[0]]; + var centroid = areaGeo.getCentroid(); + var point = { + type : "Feature", + id : way.id, + geometry : { + type : "Point", + coordinates : [centroid.x, centroid.y] + }, + properties : {} + }; + _.extend(point.properties, way.tags); + features.push(point); + } else { + features.push(area); + } + } }); $.each(relations, function(i, relation) { @@ -167,6 +187,29 @@ op2geojson = function() { return poly; } + instance.wayToPolygon = function(way, nodeArray) { + // Get the node coordinates from nodeArray + var coordinates = []; + for (id in way.nodes) { + var node = nodeArray[way.nodes[id]]; + coordinates.push([node.lon,node.lat]); + } + + // Create the LineString + var poly = { + type : "Feature", + geometry : { + type : "Polygon", + coordinates : [coordinates] + }, + properties : {} + }; + + // Add the tags + _.extend(poly.properties, way.tags); + return poly; + } + return instance; }; diff --git a/resources/openlayers b/resources/openlayers index 47e7c30..5b98769 160000 --- a/resources/openlayers +++ b/resources/openlayers @@ -1 +1 @@ -Subproject commit 47e7c300a81011257d4e34739ce14f02f71c5d06 +Subproject commit 5b98769234dc20172a3cb6eeb77e60b297766e45 -- cgit v1.2.3