aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorChristopher Baines <cbaines8@gmail.com>2013-02-02 13:24:34 +0000
committerChristopher Baines <cbaines8@gmail.com>2013-02-02 13:24:34 +0000
commitd2909a152fac19bb621def03d31f8d24b88e2201 (patch)
tree04de29cc7d5951e67c347e1a6387ecf5b9b6e654
parenteec66224805eccb9d3ac2a8c1b7202f82019e66e (diff)
downloadhealth-map-d2909a152fac19bb621def03d31f8d24b88e2201.tar
health-map-d2909a152fac19bb621def03d31f8d24b88e2201.tar.gz
Add the openlayers library, and then use that to calculate the area of a catchment area
-rw-r--r--.gitmodules3
-rw-r--r--index.html1
-rw-r--r--resources/map.js84
m---------resources/openlayers0
4 files changed, 57 insertions, 31 deletions
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
+Subproject 47e7c300a81011257d4e34739ce14f02f71c5d0