Fix the filtering

2 files changed, 48 insertions, 89 deletions

diff --git a/index.html b/index.html
index a43e773..c46ba6a 100644
--- a/index.html
+++ b/index.html
@@ -7,14 +7,14 @@
 	<script src="resources/libs/jquery-1.8.3.js"></script>
 	<script src="resources/libs/underscore.js"></script>
 
-	<link rel="stylesheet" href="resources/leaflet/leaflet.css" />
-	<!--[if lte IE 8]><link rel="stylesheet" href="resources/leaflet/leaflet.ie.css" /><![endif]-->
+	<link rel="stylesheet" href="resources/leaflet/dist/leaflet.css" />
+	<!--[if lte IE 8]><link rel="stylesheet" href="resources/leaflet/dist/leaflet.ie.css" /><![endif]-->
 	<link rel="stylesheet" href="resources/libs/locate/L.Control.Locate.css" />
 	<!--[if lte IE 8]><link rel="stylesheet" href="resources/libs/locate/L.Control.Locate.ie.css" /><![endif]-->
 
 	<link rel="stylesheet" href="resources/map.css" />
 
-	<script src="resources/leaflet/leaflet-src.js"></script>
+	<script src="resources/leaflet/dist/leaflet-src.js"></script>
 	<script src="resources/libs/locate/L.Control.Locate.js"></script>
 	<script src="resources/op2geojson.js"></script>
 </head>
diff --git a/resources/map.js b/resources/map.js
index 9cc9471..4a0d80a 100644
--- a/resources/map.js
+++ b/resources/map.js
@@ -18,12 +18,6 @@ $(document).ready(function() {
 	 <% }); %> \
 	 </table>');
 
-	// to filter them later
-	self.hospitalAttributes = [];
-	self.currentFilter = [];
-
-	self.hospitals = null;
-
 	self.tileLayer = L.tileLayer('http://{s}.www.toolserver.org/tiles/osm-no-labels/{z}/{x}/{y}.png', {
 		maxZoom: 18,
 		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
@@ -32,13 +26,19 @@ $(document).ready(function() {
 	var map = L.map( 'map', {
 		zoom: 12,
 		layers: [self.tileLayer],
-	});
+	}).setView([51.505, -0.09], 13);
+    // 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
+    self.amenityLayers = {};
+
+	self.layersControl = L.control.layers().addTo(map);
+
 	L.control.locate().addTo(map);
 
 	function createQueryData(bbox) {
-		// TODO: Use POST instead of GET, for neatness
 		return "data=[out:json];(" +
 				"(node[amenity=hospital]("+ bbox +");way[amenity=hospital]("+ bbox +");node(w););" +
 				"(node[amenity=doctors]("+ bbox +");way[amenity=doctors]("+ bbox +");node(w););" +
@@ -46,8 +46,15 @@ $(document).ready(function() {
 				");out;";
 	}
 
-	map.on('locationfound', onLocationFound);
-	map.on('locationerror', onLocationError);
+    var legend = L.control({position: 'bottomright'});
+    legend.onAdd = function (map) {
+        var div = L.DomUtil.create('div', 'info legend');
+
+        div.innerHTML += '<img href="resources/img/hospital.png"> Hospital<br>';
+
+        return div;
+    };
+    legend.addTo(map);
 
 	map.on('moveend', function(e) {
 		var zoom = map.getZoom();
@@ -62,86 +69,33 @@ $(document).ready(function() {
 		var data = createQueryData(bbox);
 		converter = new op2geojson();
 		converter.fetch("http://overpass-api.de/api/interpreter", data, function(data) {
-			self.hospitals = data;
-            self.hospitalLayer = buildLayer(data);
-
-    		var filteredLayers = _.map(self.hospitalAttributes, function (attr) {
-	        	return L.geoJson(self.hospitals, {
-                    style: function(feature) {
-                        return {color: 'red'};
-                    },
-    			    onEachFeature: function(feature, layer) {
-				        layer.bindPopup(self.popupTemplate({ properties: feature.properties }));
-			        },
-			        filter: function(feature, layer) {
-				        return _.contains(_.keys(feature.properties), attr);
-			        }
-		        });
-    	    });
-
-            if (self.layers) {
-                self.layers.clearLayers();
-            }
-
-	        self.layers = L.control.layers(null, {
-	    	    "Hospitals" : self.hospitalLayer
-	      	}).addTo(map);
 
-	        _.each(filteredLayers, function(layer, i) {
-		        self.layers.addOverlay(layer, self.hospitalAttributes[i]);
-	    	});
-
-	   	    // display layer
-	        $('.leaflet-control-layers-selector').first().trigger('click')
+            if (jQuery.isEmptyObject(self.amenityLayers)) {
+	            _.each(self.amenities, function(amenity, i) {
+                    self.amenityLayers[amenity] = L.geoJson(data, {
+                        style: function(feature) {
+                            return {color: 'red'};
+                        },
+    			        onEachFeature: function(feature, layer) {
+				            layer.bindPopup(self.popupTemplate({ properties: feature.properties }));
+			            },
+			            filter: function(feature, layer) {
+				            return _.contains(_.values(feature.properties), amenity);
+			            }
+		            });
+                    map.addLayer(self.amenityLayers[amenity]);
+		            self.layersControl.addOverlay(self.amenityLayers[amenity], self.amenities[i]);
+	    	    });
+            } else {
+	            _.each(self.amenities, function(amenity, i) {
+                    // Update the data for each amenity layer
+                    self.amenityLayers[amenity].clearLayers();
+                    self.amenityLayers[amenity].addData(data);
+	    	    });
+            }
 		});
 	})
 
-	map.locate({setView: true, maxZoom: 12});
-
-    var legend = L.control({position: 'bottomright'});
-    legend.onAdd = function (map) {
-        var div = L.DomUtil.create('div', 'info legend');
-
-        div.innerHTML += '<img href="resources/img/hospital.png"> Hospital<br>';
-
-        return div;
-    };
-    legend.addTo(map);
-
-	function buildLayer(data) {
-		return L.geoJson(data, {
-            style: function(feature) {
-                if (feature.properties['amenity'] === 'hospital') {
-                    return {color: 'red'};
-                } else {
-                    return {color: 'blue'};
-                }
-            },
-			onEachFeature: function(feature, layer) {
-				storeBooleanAttributeKeys(feature);
-				layer.bindPopup(self.popupTemplate({ properties: feature.properties }));
-			},
-		});
-	}
-
-	function storeBooleanAttributeKeys(feature) {
-		var isHierarchical = new RegExp('\:');
-
-		function isBoolean (val) {
-			return val === 'yes' || val === 'no';
-		}
-
-		var keys = _.keys(feature.properties);
-		_.each(feature.properties, function(val, key) {
-			if (isHierarchical.exec(key)) {
-				key = key.split(':')[1];
-			}
-			if ((!_.contains(self.hospitalAttributes, key)) && isBoolean(val)) {
-				self.hospitalAttributes.push(key);
-			}
-		});
-	}
-
 	function onLocationFound(e) {
 		self.currentLocation = e.latlng;
 		var radius = e.accuracy / 2;
@@ -152,4 +106,9 @@ $(document).ready(function() {
 	function onLocationError(e) {
 		alert(e.message);
 	}
+
+	map.on('locationfound', onLocationFound);
+	map.on('locationerror', onLocationError);
+
+	map.locate({setView: true, maxZoom: 12});
 });