From d2909a152fac19bb621def03d31f8d24b88e2201 Mon Sep 17 00:00:00 2001
From: Christopher Baines <cbaines8@gmail.com>
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 @@
 
 	<script src="resources/libs/jquery-1.8.3.js"></script>
 	<script src="resources/libs/underscore.js"></script>
+	<script src="resources/openlayers/build/OpenLayers.js"></script>
 
 	<link rel="stylesheet" href="resources/leaflet/dist/leaflet.css" />
 	<!--[if lte IE 8]><link rel="stylesheet" href="resources/leaflet/dist/leaflet.ie.css" /><![endif]-->
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() {
 <img src="resources/img/josm.png">\
 </a>\
 <h2>Hospital</h2>\
-<table>\
-<tr><td>Name</td><td><%= properties["name"] %></td></tr>\
-<tr><td>Emergency</td><td><%= properties["emergency"] %></td></tr>\
+<table width="100%">\
+<tr><td>Name</td><td align="right"><%= properties["name"] %></td></tr>\
+<tr><td>Emergency</td><td align="right"><%= properties["emergency"] %></td></tr>\
 </table>\
 <h2>Catchment Area</h2>\
 <table>\
-<tr><td>Surface Area</td><td></td></tr>\
+<tr><td>Surface Area</td><td><%= properties["area"] %></td></tr>\
 <tr><td>Number of villages</td><td></td></tr>\
 <tr><td>Population</td><td></td></tr>\
 <tr><td>Furthest Village from health structure</td><td></td></tr>\
@@ -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