Map Marker as Backbone.js Views

Question

I use maps and backbone.js together. The Leaflet used is used as the JS map library used, but the Google Maps API will also be applied here.

Problem: Backbone.js allows you to separate a presentation (Views) from data (Models, Collections). When using the API or the Google Maps API worksheets, we do not seem to have control over the rendering of markers, so we cannot have a Backbone View for each marker. It's true?

When using Maps with backbone.js, I run nested views and event handlers in callback functions.

JS (Leaflet similar to the Google Maps API)

// Handle a dragging on the map map.on('dragend', function() { App.markersList.fetch( data: someData, processData: true function() { App.markersListView.render(); };) }); // Handle a click on a Marker map.on('popupopen', function() { // Activate bootstrap tabs $('#tabs').tab(); // Submit click handler $('#submit-button').click(function() { $.post('/api/submit-something', {data: data}, function() { // Remove some divs $('#some-divs').fadeOut(); }) }) // Activate slideshow Galleria.loadTheme('/js/vendor/galleria.miniml.min.js'); Galleria.configure({ height: 320 }); Galleria.run('#galleria'); // Validation $('.email-link form').validate({ rules: { ... } }); }); 

Well, you get the idea ... I need to do this outside of the Backbone MVC framework. I could miss the right path to integrate both. Any ideas? Thanks!!

Answer 1

I think, from the point of view of the marker, do you mean the contents of the pop-up window for this marker? You can bind a view as a function popup. At least in the sheet.

The key is that leafy pop-ups allow you to use the provided DOM element as its content. To have the appropriate model knowledge behind the marker, you can specify the marker as a property of the model. This allows you to get the associated model marker. Another way can be achieved by attaching the event to a marker whose signature contains the model.

This is a simplified snippet of my map view, how to configure it after retrieving the collection:

 _.each(collection.models, function (model) { var attr = model.attributes, marker = new L.Marker(new L.LatLng(attr.lat, attr.lon)); marker.on('click', function () { App.vent.trigger("model:select", model); }); model.marker = marker; map.addLayer(marker); }); 

Here, for each model in the collection, a marker is drawn, and then the marker becomes a property of the model. In addition, each marker is associated with a click event that fires the user event "model: select" in the application event aggregator. Here you can use this event to configure a popup by catching an event, for example:

 common.vent.on('model:select', function (model) { this.select(model); this.initPopup(model); }, this); 

InitPopup might look like this:

 initPopup = function (model) { var marker = model.marker, view = new PopupView({model: model}); marker.bindPopup(view.render().el).openPopup(); }; 

PopupView is a Backbone view (well, Marionette in my case.) Complete with handling templates and events, etc.