From 0e4c0c4653ee72bb1d8a4c3d7adadf57b0d79024 Mon Sep 17 00:00:00 2001 From: Christopher Baines Date: Sun, 9 Dec 2012 17:22:24 +0000 Subject: Fix problems with displaying polygons --- resources/map.js | 62 +++++++++++++++++++++++++------------------------ resources/op2geojson.js | 16 ++++++++++++- 2 files changed, 47 insertions(+), 31 deletions(-) (limited to 'resources') diff --git a/resources/map.js b/resources/map.js index 3cd271b..9c0f009 100644 --- a/resources/map.js +++ b/resources/map.js @@ -79,38 +79,15 @@ $(document).ready(function() { converter.fetch("http://overpass-api.de/api/interpreter", data, function(data) { if (jQuery.isEmptyObject(self.amenityLayers)) { - _.each(self.amenities, function(amenity, i) { - self.amenityLayers[amenity] = L.geoJson(data, { - style: function(feature) { - return {color: 'red'}; - }, - onEachFeature: function(feature, layer) { - var center; - if (feature.geometry.type === "Point") { - center = feature.geometry.coordinates; - } else { - center = feature.geometry.coordinates[0]; - } - - layer.bindPopup(self.popupTemplate({ properties: feature.properties, coordinate: center })); - }, - filter: function(feature, layer) { - return _.contains(_.values(feature.properties), amenity); - } - }); - map.addLayer(self.amenityLayers[amenity]); - self.layersControl.addOverlay(self.amenityLayers[amenity], self.amenities[i]); - }); - // Now deal with the catchment areas self.catchmentAreaLayer = L.geoJson(data, { style: function(feature) { - return {fillColor: 'red', + return {fillColor: 'green', weight: 2, opacity: 1, - color: 'white', + color: 'black', dashArray: '3', - fillOpacity: 0.7}; + fillOpacity: 0.1}; }, onEachFeature: function(feature, layer) { layer.on({ @@ -131,17 +108,42 @@ $(document).ready(function() { return _.contains(_.values(feature.properties), "catchment_area"); } }); + map.addLayer(self.catchmentAreaLayer); self.layersControl.addOverlay(self.catchmentAreaLayer, "Catchment Areas"); + + _.each(self.amenities, function(amenity, i) { + self.amenityLayers[amenity] = L.geoJson(data, { + style: function(feature) { + return {color: 'red', + weight: 10}; + }, + onEachFeature: function(feature, layer) { + var center; + if (feature.geometry.type === "Point") { + center = feature.geometry.coordinates; + } else { + center = feature.geometry.coordinates[0]; + } + + layer.bindPopup(self.popupTemplate({ properties: feature.properties, coordinate: center })); + }, + 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)); + }); } 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); }); - - self.catchmentAreaLayer.clearLayers(); - self.catchmentAreaLayer.addData(data); } }); }) @@ -153,7 +155,7 @@ $(document).ready(function() { weight: 5, color: '#666', dashArray: '', - fillOpacity: 0.7 + fillOpacity: 0.1 }); if (!L.Browser.ie && !L.Browser.opera) { diff --git a/resources/op2geojson.js b/resources/op2geojson.js index cff2dea..5a979b1 100644 --- a/resources/op2geojson.js +++ b/resources/op2geojson.js @@ -99,19 +99,33 @@ op2geojson = function() { instance.polygon = function(relation, ways, nodes) { polyCoordinates = []; + var firstCheck = true; $.each(relation.members, function(i, member) { if (member.role == "outer") { var way = ways[member.ref]; var wayCoordinates = instance.lineString(way, nodes).geometry.coordinates; + + // Need to ensure that the first way is in the correct direction, but this can + // only be checked when looking at the second way + if (firstCheck && polyCoordinates.length != 0) { + firstCheck = false; + if ((polyCoordinates[0][0] == wayCoordinates[0][0] && + polyCoordinates[0][1] == wayCoordinates[0][1]) || + (polyCoordinates[0][0] == wayCoordinates[wayCoordinates.length - 1][0] && + polyCoordinates[0][1] == wayCoordinates[wayCoordinates.length - 1][1])) { + polyCoordinates.reverse(); + } + } + if (polyCoordinates.length != 0) { // If this way is backward if (polyCoordinates[polyCoordinates.length - 1][0] != wayCoordinates[0][0] || polyCoordinates[polyCoordinates.length - 1][1] != wayCoordinates[0][1]) { wayCoordinates.reverse(); } + polyCoordinates.pop(); } - polyCoordinates.shift(); polyCoordinates = polyCoordinates.concat( wayCoordinates ); } }); -- cgit v1.2.3