aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHarry Cutts <eternal.linux@gmail.com>2013-02-02 11:00:06 +0000
committerHarry Cutts <eternal.linux@gmail.com>2013-02-02 13:26:08 +0000
commit6b6738532deee6bb8cc88af735a774884fe443e0 (patch)
treea78981126abc0aca92413cac0aa5ad4ddd7a4aaf
parenteec66224805eccb9d3ac2a8c1b7202f82019e66e (diff)
downloadhealth-map-6b6738532deee6bb8cc88af735a774884fe443e0.tar
health-map-6b6738532deee6bb8cc88af735a774884fe443e0.tar.gz
Tidy up map.js and op2geojson.js
-rw-r--r--resources/map.js64
-rw-r--r--resources/op2geojson.js178
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