[#64,view/map] Listen to changes in documents to refresh the map

Added new listeners to refresh the markers whenever a document(s) is
added or removed, or all documents are reset. Instead of recreating
everytime all markers, only the necessary ones are added or removed.

src/view-map.js

@@ -35,12 +35,16 @@ my.Map = Backbone.View.extend({
     var self = this;
 
     this.el = $(this.el);
-    this.render();
     this.model.bind('change', function() {
       self._setupGeometryField();
     });
+    this.model.currentDocuments.bind('add', function(doc){self.redraw('add',doc)});
+    this.model.currentDocuments.bind('remove', function(doc){self.redraw('remove',doc)});
+    this.model.currentDocuments.bind('reset', function(){self.redraw('reset')});
 
     this.mapReady = false;
+
+    this.render();
   },
 
   render: function() {
@@ -65,16 +69,38 @@ my.Map = Backbone.View.extend({
     return this;
   },
 
-  redraw: function(){
+  redraw: function(action,doc){
 
     var self = this;
 
-    if (this.geomReady){
+    action = action || 'refresh';
-      if (this.model.currentDocuments.length > 0){
-        this.features.clearLayers();
-        var bounds = new L.LatLngBounds();
 
-        this.model.currentDocuments.forEach(function(doc){
+    if (this.geomReady){
+      if (action == 'reset'){
+        // Clear all features
+        this.features.clearLayers();
+      } else if (action == 'add' && doc){
+        // Add one or n features
+        this._add(doc);
+      } else if (action == 'remove' && doc){
+        // Remove one or n features
+        this._remove(doc);
+      } else if (action == 'refresh'){
+        // Clear and rebuild all features
+        this.features.clearLayers();
+        this._add(this.model.currentDocuments.models);
+
+      }
+    }
+  },
+
+  _add: function(doc){
+
+    var self = this;
+
+    if (!(doc instanceof Array)) doc = [doc];
+
+    doc.forEach(function(doc){
       var feature = self._getGeometryFromDocument(doc);
       if (feature){
         // Build popup contents
@@ -85,13 +111,29 @@ my.Map = Backbone.View.extend({
         }
         feature.properties = {popupContent: html};
 
-            self.features.addGeoJSON(feature);
+        // Add a reference to the model id, which will allow us to
+        // link this Leaflet layer to a Recline doc
+        feature.properties.cid = doc.cid;
 
-            // TODO: bounds and center map
+        self.features.addGeoJSON(feature);
       }
     });
+  },
+
+  _remove: function(doc){
+
+    var self = this;
+
+    if (!(doc instanceof Array)) doc = [doc];
+
+    doc.forEach(function(doc){
+      for (key in self.features._layers){
+        if (self.features._layers[key].cid == doc.cid){
+          self.features.removeLayer(self.features._layers[key]);
         }
       }
+    });
+
   },
 
   _getGeometryFromDocument: function(doc){
@@ -152,6 +194,10 @@ my.Map = Backbone.View.extend({
       if (e.properties && e.properties.popupContent){
         e.layer.bindPopup(e.properties.popupContent);
        }
+      if (e.properties && e.properties.cid){
+        e.layer.cid = e.properties.cid;
+       }
+
     });
     this.map.addLayer(this.features);