From d2909a152fac19bb621def03d31f8d24b88e2201 Mon Sep 17 00:00:00 2001 From: Christopher Baines Date: Sat, 2 Feb 2013 13:24:34 +0000 Subject: Add the openlayers library, and then use that to calculate the area of a catchment area --- .gitmodules | 3 ++ index.html | 1 + resources/map.js | 84 +++++++++++++++++++++++++++++++++------------------- resources/openlayers | 1 + 4 files changed, 58 insertions(+), 31 deletions(-) create mode 160000 resources/openlayers diff --git a/.gitmodules b/.gitmodules index 3d4b2e2..e3bb53e 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,3 +1,6 @@ [submodule "resources/leaflet"] path = resources/leaflet url = git://github.com/CloudMade/Leaflet.git +[submodule "resources/openlayers"] + path = resources/openlayers + url = git://github.com/openlayers/openlayers.git diff --git a/index.html b/index.html index c46ba6a..071f0a9 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ + diff --git a/resources/map.js b/resources/map.js index a2c16f5..7410e38 100644 --- a/resources/map.js +++ b/resources/map.js @@ -9,13 +9,13 @@ $(document).ready(function() { \ \

Hospital

\ -\ -\ -\ +
Name<%= properties["name"] %>
Emergency<%= properties["emergency"] %>
\ +\ +\
Name<%= properties["name"] %>
Emergency<%= properties["emergency"] %>
\

Catchment Area

\ \ -\ +\ \ \ \ @@ -102,6 +102,42 @@ $(document).ready(function() { 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, { @@ -120,7 +156,19 @@ $(document).ready(function() { center = feature.geometry.coordinates[0]; } - layer.bindPopup(self.hospitalTemplate({ properties: feature.properties, coordinate: center })); + 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.hospitalTemplate({ properties: $.extend(feature.properties, areaProperties), coordinate: center })); markers[feature.id] = layer; }, @@ -133,32 +181,6 @@ $(document).ready(function() { self.layersControl.addOverlay(self.amenityLayers[amenity], self.amenities[i].charAt(0).toUpperCase() + self.amenities[i].slice(1)); }); - // 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) { - var marker_layer = markers[feature.properties.subject]; - var popup = markers[feature.properties.subject].openPopup; - layer.on({ - mouseover: highlightFeature, - mouseout: resetHighlight, - click: function() { - markers[feature.properties.subject].openPopup(); - } - }); - }, - filter: function(feature, layer) { - return _.contains(_.values(feature.properties), "catchment_area"); - } - }); - map.addLayer(self.catchmentAreaLayer); self.layersControl.addOverlay(self.catchmentAreaLayer, "Catchment Areas"); } else { diff --git a/resources/openlayers b/resources/openlayers new file mode 160000 index 0000000..47e7c30 --- /dev/null +++ b/resources/openlayers @@ -0,0 +1 @@ +Subproject commit 47e7c300a81011257d4e34739ce14f02f71c5d06 -- cgit v1.2.3
Surface Area
Surface Area<%= properties["area"] %>
Number of villages
Population
Furthest Village from health structure