Hooks to turn on-off layers depending on dropdown

who-ocr · Aug 28, 2014 · 8a84a6d · 8a84a6d
2 parents 1228506 + acab2e3
commit 8a84a6d
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 46 deletions.
diff --git a/app/scripts/routes/app.js b/app/scripts/routes/app.js
@@ -85,9 +85,56 @@ WHO.Routers = WHO.Routers || {};
 
         }
 
-
         //********************* Listen for switches to the data UI *********************//
 
+        var mapviews = ['casemarkers', 'risk', 'clinics'],
+
+            combinations = {
+                risk:
+                    [0, 1, 0],
+
+                cases:
+                    [1, 0, 0],
+
+                response:
+                    [0, 0, 1]
+            },
+            $target;
+
+
+
+        $('a.layer').on('click', function() {
+            $target = $(this);
+
+            var zoom = $target.data('zoom'),
+                newMap = WHO.getMapType(zoom),
+                combo = combinations[$target.data('layer')];
+
+            _.each(combo, function(shouldBeOn, i) {
+
+                var view = mapviews[i],
+                    activeIndex = activeViews.indexOf(view);
+
+                if (shouldBeOn && activeIndex === -1) {
+                    //WHO.views[mapviews[i]].draw();
+                    activeViews.push(view);
+                    WHO.views[view].addLayers(newMap);
+                }
+
+                else if (!shouldBeOn && activeIndex !== -1) {
+                    activeViews.splice(activeIndex, 1);
+                    WHO.views[view].removeLayers();
+                }
+
+            });
+
+
+
+            WHO.map.setView([8.44, -11.7], zoom);
+
+        });
+
+
 
 
 
@@ -117,6 +164,7 @@ WHO.Routers = WHO.Routers || {};
             }, 400);
         });
 
+
         //********************* Listen and convert to CSVs *********************//
 
         $('#csv-download').on('click', function() {
@@ -146,23 +194,25 @@ WHO.Routers = WHO.Routers || {};
         var encodedUri = encodeURI(csvString + csvList.join('\n'));
         window.open(encodedUri);
     }
-    
-    
+
+
     //********************* Zoom to core *********************//
-    
+
      /*
      $('#zoom-core').on('click', function() {
           WHO.map.setView([8.44, -11.7], 7);
      });
      */
-
-
+
+
+    /*
      $('a.layer').on('click', function() {
         //var layer = $(this).data('layer');
         var zoom = $(this).data('zoom');
         WHO.map.setView([8.44, -11.7], zoom);
      });
-
-
 
+
+
+    */
 })();
diff --git a/app/scripts/views/clinic.js b/app/scripts/views/clinic.js
@@ -28,7 +28,11 @@ WHO.Views = WHO.Views || {};
             }
         },
 
-        remove: function() {
+        addLayers: function(type) {
+            this.featureChange(type);
+        },
+
+        removeLayers: function() {
             _.each(this.layers, function(layer) {
                 WHO.map.removeLayer(layer);
             });
@@ -57,7 +61,7 @@ WHO.Views = WHO.Views || {};
                              	iconUrl: 'img/triage-64x64.png',
                         	}),
                         	  opacity: 1
-							});		
+							});
 					}
                 },
 
@@ -68,7 +72,6 @@ WHO.Views = WHO.Views || {};
                         },
                         click: function(e) {
                             var props = e.target.feature.properties;
-							//console.log(props);
                             popup.setLatLng(e.latlng);
                             popup.setContent('<div class="marker-title">' + props.CITY + ', ' + props.COUNTRY + '</div>'
                                 + '<table class="table-striped popup-click">'

diff --git a/app/scripts/views/map.js b/app/scripts/views/map.js
@@ -8,7 +8,7 @@ WHO.Views = WHO.Views || {};
     WHO.Views.Map = Backbone.View.extend({
 
         events: {},
-        
+
         initialize: function (options) {
             this.listenToOnce(this.collection, 'loaded', function() {
                 this.featureChange(WHO.getMapType(WHO.map.getZoom()));
@@ -24,7 +24,28 @@ WHO.Views = WHO.Views || {};
             // Keep a list of layers we've added, since we'll have to remove them
             this.layers = [];
         },
-
+
+        featureChange: function(type) {
+            if (type === this.mapType) {
+                return;
+            }
+
+            this.mapType = type;
+            var modelName = type.charAt(0).toUpperCase() + type.slice(1);
+            this.getBounds(WHO.Models[modelName], type);
+        },
+
+        addLayers: function(type) {
+            this.mapType = type;
+            var modelName = type.charAt(0).toUpperCase() + type.slice(1);
+            this.getBounds(WHO.Models[modelName], type);
+        },
+
+        removeLayers: function() {
+            _.each(this.layers, function(layer) {
+                WHO.map.removeLayer(layer);
+            });
+        },
 
         getBounds: function(model, mapType) {
             var model = WHO.models[mapType]  || new model(); ;
@@ -43,7 +64,7 @@ WHO.Views = WHO.Views || {};
         },
 
         render: function () {
-           
+
             if (this.layers.length) {
                 this.removeLayers();
             }
@@ -116,23 +137,6 @@ WHO.Views = WHO.Views || {};
             return;
         },
 
-        featureChange: function(type) {
-            if (type === this.mapType) {
-                return;
-            }
-
-            this.mapType = type;
-            var modelName = type.charAt(0).toUpperCase() + type.slice(1);
-            this.getBounds(WHO.Models[modelName], type);
-        },
-
-        removeLayers: function() {
-            _.each(this.layers, function(layer) {
-                WHO.map.removeLayer(layer);
-            });
-        },
-
-
     });
 
 })();
diff --git a/app/scripts/views/marker.js b/app/scripts/views/marker.js
@@ -46,6 +46,25 @@ WHO.Views = WHO.Views || {};
             this.listenToOnce(this.model, 'change', this.render);
         },
 
+        featureChange: function(type) {
+            if (type === this.maptype) {
+                return;
+            }
+            this.maptype = type;
+            this.getCases();
+        },
+
+        addLayers: function(type) {
+            this.maptype = type;
+            this.getCases();
+        },
+
+        removeLayers: function() {
+            _.each(this.layers, function(layer) {
+                WHO.map.removeLayer(layer);
+            });
+        },
+
         getCases: function () {
 
             //*********** Aggregating cases ***********//
@@ -284,21 +303,6 @@ WHO.Views = WHO.Views || {};
                 window.clearTimeout(closeTooltip);
             }
         },
-
-        featureChange: function(type) {
-            if (type === this.maptype) {
-                return;
-            }
-            this.maptype = type;
-            this.getCases();
-        },
-
-        removeLayers: function() {
-            _.each(this.layers, function(layer) {
-                WHO.map.removeLayer(layer);
-            });
-        }
-
     });
 
 })();