Added some style stuff

Also changed quite a bit of other Javascript, I am not sure if all the
changes are good, but I was trying to simplify the code a bit.

1 files changed, 45 insertions, 52 deletions

diff --git a/resources/map.js b/resources/map.js
index 4c8c9cd..ac9a506 100644
--- a/resources/map.js
+++ b/resources/map.js
@@ -22,40 +22,19 @@ $(document).ready(function() {
 	self.hospitalAttributes = [];
 	self.currentFilter = [];
 
-	fetchLayers();
+	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'
+	});
+
 	var map = L.map( 'map', {
 		zoom: 12,
 		layers: [self.tileLayer],
 	});
 	GlobalMap = map;
 
-	function addHospitalLayer(){
-		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);
-				}
-			});
-		});
-
-		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')
-	}
-
 	function createQueryData(bbox) {
 		// TODO: Use POST instead of GET, for neatness
 		return "data=[out:json];(" +
@@ -65,7 +44,6 @@ $(document).ready(function() {
 				");out;";
 	}
 
-	map.on('hospitalsfetched', addHospitalLayer);
 	map.on('locationfound', onLocationFound);
 	map.on('locationerror', onLocationError);
 
@@ -74,8 +52,7 @@ $(document).ready(function() {
 		if (zoom < 10) {
 			return;
 		}
-		if (!self.hospitalLayer)
-			return;
+
 		var bounds = map.getBounds();
 		var sw = bounds.getSouthWest();
 		var ne = bounds.getNorthEast();
@@ -84,8 +61,36 @@ $(document).ready(function() {
 		converter = new op2geojson();
 		converter.fetch("http://overpass-api.de/api/interpreter", data, function(data) {
 			self.hospitals = data;
-			layer = buildLayer(data)
-			self.hospitalLayer.addData(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')
 		});
 	})
 
@@ -103,6 +108,13 @@ $(document).ready(function() {
 
 	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 }));
@@ -129,25 +141,6 @@ $(document).ready(function() {
 		self.hospitalAttributes;
 	}
 
-	function geojsonLayer() {
-        data = createQueryData([52.34,13.3,52.52,13.6]);
-		converter = new op2geojson();
-		converter.fetch("http://overpass-api.de/api/interpreter", data, function(data) {
-			self.hospitals = data;
-			layer = buildLayer(data);
-			self.hospitalLayer =  layer;
-			map.fireEvent('hospitalsfetched');
-		});
-	}
-
-	function fetchLayers() {
-		geojsonLayer();
-		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'
-		});
-	}
-
 	function onLocationFound(e) {
 		self.currentLocation = e.latlng;
 		var radius = e.accuracy / 2;