Tidy up map.js and op2geojson.js

2 files changed, 105 insertions, 137 deletions

diff --git a/resources/map.js b/resources/map.js
index a2c16f5..2dbf8e4 100644
--- a/resources/map.js
+++ b/resources/map.js
@@ -1,13 +1,11 @@
 $(document).ready(function() {
 
-	var self = this;
+	var self = this;  // the HTMLDocument
 
-	self.hospitalTemplate = _.template('<a href="http://www.openstreetmap.org/edit?editor=potlatch2&lat=<%= coordinate[1] %>&lon=<%= coordinate[0] %>&zoom=18">\
-<img src="resources/img/potlatch.png">\
-</a>\
+	self.popupTemplate = _.template('<a href="http://www.openstreetmap.org/edit?editor=potlatch2&lat=<%= coordinate[1] %>&lon=<%= coordinate[0] %>&zoom=18">\
+<img src="resources/img/potlatch.png"></a>\
 <a href="http://www.openstreetmap.org/edit?editor=remote&lat=<%= coordinate[1] %>&lon=<%= coordinate[0] %>&zoom=18">\
-<img src="resources/img/josm.png">\
-</a>\
+<img src="resources/img/josm.png"></a>\
 <h2>Hospital</h2>\
 <table>\
 <tr><td>Name</td><td><%= properties["name"] %></td></tr>\
@@ -22,29 +20,12 @@ $(document).ready(function() {
 <tr><td>Average distance of all villages from health structure</td><td></td></tr>\
 </table>');
 
-	self.catchmentTemplate = _.template('<table>\
-<tr><th>Key</th><th>Value</th></tr>\
-<% _.each(properties, function(val, key) { %> \
-<% if (/\:/.exec(key)) { %> \
-<tr> \
-<td><%= key.split(":")[1] %> </td> \
-<td><%= val %> </td> \
-</tr> \
-<% } else {%> \
-<tr>\
-<td><%= key %> </td> \
-<td><%= val %> </td> \
-</tr>\
-<% } %> \
-<% }); %> \
-</table>');
-
     var hospitalIcon = L.icon({
         iconUrl: 'resources/img/hospital.png',
 
-        iconSize:     [18, 18], // size of the icon
-        iconAnchor:   [9, 9], // point of the icon which will correspond to marker's location
-        popupAnchor:  [2, -9] // point from which the popup should open relative to the iconAnchor
+        iconSize:     [18, 18],
+        iconAnchor:   [9, 9], // point on the icon corresponding to marker's location
+        popupAnchor:  [2, -9] // point to open the popup from relative to iconAnchor
     });
 
 	self.tileLayer = L.tileLayer('http://{s}.www.toolserver.org/tiles/osm-no-labels/{z}/{x}/{y}.png', {
@@ -57,7 +38,6 @@ $(document).ready(function() {
 		layers: [self.tileLayer],
 	}).setView([12.4822, -11.9463], 11);
     // TODO: Not sure why the above call to setView is needed
-	GlobalMap = map;
 
 	self.amenities = ["hospital", "doctors", "dentist"];
     // This contains the layers for each of the above amenities
@@ -79,9 +59,7 @@ $(document).ready(function() {
     var legend = L.control({position: 'bottomright'});
     legend.onAdd = function (map) {
         var div = L.DomUtil.create('div', 'info legend');
-
         div.innerHTML += '<img src="resources/img/hospital.png"> Hospital<br>';
-
         return div;
     };
     legend.addTo(map);
@@ -92,14 +70,18 @@ $(document).ready(function() {
 			return;
 		}
 
+		// Make the bounding box string
 		var bounds = map.getBounds();
 		var sw = bounds.getSouthWest();
 		var ne = bounds.getNorthEast();
 		bbox = [sw.lat, sw.lng, ne.lat, ne.lng].join(',');
+
+		// Get the data
 		var data = createQueryData(bbox);
+
+		// Convert the data to GeoJSON
 		converter = new op2geojson();
 		converter.fetch("http://overpass-api.de/api/interpreter", data, zoom, function(data) {
-
             if (jQuery.isEmptyObject(self.amenityLayers)) {
                 var markers = {};
 
@@ -120,7 +102,7 @@ $(document).ready(function() {
                                 center = feature.geometry.coordinates[0];
                             }
 
-				            layer.bindPopup(self.hospitalTemplate({ properties: feature.properties, coordinate: center }));
+				            layer.bindPopup(self.popupTemplate({ properties: feature.properties, coordinate: center }));
 
                             markers[feature.id] = layer;
 			            },
@@ -130,7 +112,8 @@ $(document).ready(function() {
 		            });
 
                     map.addLayer(self.amenityLayers[amenity]);
-		            self.layersControl.addOverlay(self.amenityLayers[amenity], self.amenities[i].charAt(0).toUpperCase() + self.amenities[i].slice(1));
+		            self.layersControl.addOverlay(self.amenityLayers[amenity],
+						self.amenities[i].charAt(0).toUpperCase() + self.amenities[i].slice(1));
 	    	    });
 
                 // Now deal with the catchment areas
@@ -144,8 +127,6 @@ $(document).ready(function() {
                                 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,
@@ -190,7 +171,6 @@ $(document).ready(function() {
     }
 
     function resetHighlight(e) {
-        var geojsonLayer = self.catchmentAreaLayer;
         self.catchmentAreaLayer.resetStyle(e.target);
     }
 
@@ -198,25 +178,13 @@ $(document).ready(function() {
 		self.currentLocation = e.latlng;
 		var radius = e.accuracy / 2;
 		L.marker(e.latlng).addTo(map)
-		.bindPopup("You are within " + radius + " meters from this point").openPopup();
+			.bindPopup("You are within " + radius + " meters of this point.").openPopup();
 	}
 
 	function onLocationError(e) {
 		alert(e.message);
 	}
 
-    function polygonArea(X, Y, numPoints)
-    {
-        area = 0;         // Accumulates area in the loop
-        j = numPoints-1;  // The last vertex is the 'previous' one to the first
-
-        for (i=0; i<numPoints; i++) {
-            area = area +  (X[j]+X[i]) * (Y[j]-Y[i]);
-            j = i;  // j is previous vertex to i
-        }
-        return area/2;
-    }
-
 	map.on('locationfound', onLocationFound);
 	map.on('locationerror', onLocationError);
 
diff --git a/resources/op2geojson.js b/resources/op2geojson.js
index bef1153..6bea219 100644
--- a/resources/op2geojson.js
+++ b/resources/op2geojson.js
@@ -6,76 +6,73 @@ op2geojson = function() {
 		geojson;
 
 	instance.fetch = function(url, data, zoom, callback) {
-    	$.post(url, data,
-			function(data) {
-				// Add nodes and ways to the layer
-				var features = [];
-
-				// Process the data
-				var nodes = {};
-				var ways = {};
-                var relations = {};
-				$.each(data.elements, function(i, item) {
-					if (item.type === 'node') {
-						nodes[item.id] = item;
-
-                        // As the nodes do not relate to other bits,
-                        // they can be added here
-					    if (item.type === 'node'
-                            && item.tags != undefined
-							&& item.tags['amenity'] != undefined) {
-
-						    features.push( instance.point(item) );
-                        }
-					} else if (item.type === 'way') {
-					    ways[item.id] = item;
-					} else if (item.type === 'relation') {
-					    relations[item.id] = item;
+		var postCallback = function(data) {
+			// Add nodes and ways to the layer
+			var features = [];
+
+			// Process the data
+			var nodes = {};
+			var ways = {};
+			var relations = {};
+			$.each(data.elements, function(i, item) {
+				if (item.type === 'node') {
+					nodes[item.id] = item;
+
+					// As the nodes do not relate to other bits,
+					// they can be added here
+					if (item.tags != undefined && item.tags['amenity'] != undefined) {
+						features.push( instance.point(item) );
 					}
-				});
-
-				$.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) );
-                    }
-				});
-
-				$.each(relations, function(i, relation) {
-                    if (relation.tags != undefined &&
-                        relation.tags['type'] == 'boundary' &&
-                        relation.tags['boundary'] == 'catchment_area') {
-
-					    features.push( instance.polygon(relation, ways, nodes) );
-                    }
-				});
 
-				geojson = instance.featureCollection(features);
-				callback(geojson);
-			}
-		, "json");;
+				} else if (item.type === 'way') {
+					ways[item.id] = item;
+				} else if (item.type === 'relation') {
+					relations[item.id] = item;
+				}
+			});
+
+			$.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));
+				}
+			});
+
+			$.each(relations, function(i, relation) {
+				if (relation.tags != undefined &&
+					relation.tags['type'] == 'boundary' &&
+					relation.tags['boundary'] == 'catchment_area') {
+
+					features.push( instance.polygon(relation, ways, nodes) );
+				}
+			});
+
+			geojson = instance.featureCollection(features);
+			callback(geojson);
+		}
+    	$.post(url, data, postCallback, "json");
 	};
 
 	instance.point = function(node) {
 		var point = {
-			"type" : "Feature",
-			"geometry" : {
-				"type" : "Point",
-				"coordinates" : [node.lon,node.lat]
+			type : "Feature",
+			geometry : {
+				type : "Point",
+				coordinates : [node.lon,node.lat]
 			},
-			"properties" : {}
+			properties : {}
 		};
 		_.extend(point.properties, node.tags);
 		return point;
@@ -91,12 +88,12 @@ op2geojson = function() {
 
 		// Create the LineString
 		var lineString = {
-			"type" : "Feature",
-			"geometry" : {
-				"type" : "LineString",
-				"coordinates" : coordinates
+			type : "Feature",
+			geometry : {
+				type : "LineString",
+				coordinates : coordinates
 			},
-			"properties" : {}
+			properties : {}
 		};
 
 		// Add the tags
@@ -106,55 +103,58 @@ op2geojson = function() {
 
 	instance.featureCollection = function(features) {
 		collection = {
-			"type" : "FeatureCollection",
-			"features" : features
+			type : "FeatureCollection",
+			features : features
 		};
 		return collection;
 	}
 
 	instance.polygon = function(relation, ways, nodes) {
-        polyCoordinates = [];
+        polyCoords = [];
         var firstCheck = true;
         var subject;
 
 		$.each(relation.members, function(i, member) {
             if (member.role == "outer") {
                 var way = ways[member.ref];
-                var wayCoordinates = instance.lineString(way, nodes).geometry.coordinates;
+                var wayCoords = instance.lineString(way, nodes).geometry.coordinates;
+				var numNodes = wayCoords.length
 
                 // 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) {
+                if (firstCheck && polyCoords.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 ((polyCoords[0][0] == wayCoords[0][0] &&
+                        polyCoords[0][1] == wayCoords[0][1]) ||
+                        (polyCoords[0][0] == wayCoords[numNodes - 1][0] &&
+                        polyCoords[0][1] == wayCoords[numNodes - 1][1])) {
+
+                        polyCoords.reverse();
                     }
                 }
 
-                if (polyCoordinates.length != 0) {
+                if (polyCoords.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();
+                    if (polyCoords[polyCoords.length - 1][0] != wayCoords[0][0] ||
+                        polyCoords[polyCoords.length - 1][1] != wayCoords[0][1]) {
+
+                        wayCoords.reverse();
                     }
-                    polyCoordinates.pop();
+                    polyCoords.pop();
                 }
-			    polyCoordinates = polyCoordinates.concat( wayCoordinates );
+			    polyCoords = polyCoords.concat( wayCoords );
             } else if (member.role == "subject") {
                 subject = member.ref;
             }
 		});
 
         var poly = {
-			"type" : "Feature",
-			"geometry" : {
-				"type" : "Polygon",
-				"coordinates" : [polyCoordinates]
+			type : "Feature",
+			geometry : {
+				type : "Polygon",
+				coordinates : [polyCoords]
 			},
-			"properties" : {}
+			properties : {}
 		};
 
 		// Add the tags