title: Leaflet + Backbone.js: how to update the view on model collection update?
body: <p>I have a problem with the integration between Leaflet and Backbone.js. I took a sample I found online (<a href="http://jsfiddle.net/dPqQy/" rel="nofollow">http://jsfiddle.net/dPqQy/</a>) that has the following View and Model for the Map:</p>
  
  <pre><code>App.Views.MapView = Backbone.View.extend({
  id:"map",
  render: function() {
      //render map element
      var map = this.map =  L.map(this.$el.attr('id'))
      .setView([this.model.get('centerLon'),  this.model.get('centerLat') ], 13)
      .addLayer(L.tileLayer(this.model.get('layerUrl'), { maxZoom: 18 }));
  
      //render each marker
      this.markerViews = this.model.get('markers').map(function(marker) {
          return new App.Views.MarkerView({model:marker, map:map}).render();
      });
      }
  });
  
  var map = new App.Models.Map({
      centerLon: 51.505,
      centerLat: -0.09,
      layerUrl:      'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
      markers: new App.Collections.Markers([
          {id:1, latitude:-0.09, longitude:51.505},
          {id:2, latitude:-0.092, longitude:51.503},
          {id:3, latitude:-0.086, longitude:51.506}
      ])
   });
  
  var mapView = new App.Views.MapView({model:map});
  mapView.render();
  </code></pre>
  
  <p>Now, the problem is that when I try to update the marker's collection in the model with:</p>
  
  <pre><code>map.get('markers').add(node);
  </code></pre>
  
  <p>(node is a custom marker that I want to add, the View doesn't get updated and the marker doesn't show in the map. What am I doing wrong? Thanks!</p>