Map markers as Backbone.js Views

Question

I am using maps and backbone.js together. Map JS library used is Leaflet, but Google maps API will apply here as well.

Problem: Backbone.js allows us to seperate the presentation (Views) from the data (Models, Collections). When using Google Maps JS API or Leaflets, we do not seem to have control over the rendering of the markers, thus unable to have a Backbone View for each marker. Is this true?

When using Maps together with backbone.js, I start to get nested views and event handlers in the callback functions.

JS (Leaflet, similar to 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 these outside of Backbone's MVC structure. I could be missing out on the correct way to integrate both together. Any ideas? Thanks!!

I had a similar issue before with Google Maps and couldn't separate the events and callbacks into views. — Ahmad Alfy
Backbone views pretty much require a DOM element. Leaflet Markers and Overlays are not DOM elements so I think you'd pretty much have to completely re-write the backbone view in order to get this to work. Even if you set the view element to the DOM element created by a Leaflet marker you would have to change how the backbone view binds events. Events are currently bound to the DOM element but for Leaflet you want to bind the events to the Layer that was added to the map. I'm not saying it's not possible but it does seem to require a pretty significant rewrite of the Backbone view. — InPursuit

bentrm bentrm · Accepted Answer · 2012-11-01T14:02:36

I guess with view for the marker you mean the content of a popup to that marker? It is possible to bind a view as the popup content of a feature. At least in Leaflet that is.

The key is, that Leaflet Popups allow to use a provided DOM element as its content. To have appropriate knowledge of the model behind a marker you may specify the marker as a property of the model. This allows you to get the associated marker of the model. The other way around can be achieved via an event binding to the marker whose signature comprises the model.

This is a simplified snippet of my map view how to to set it up after fetching 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. Also, each marker is bound with an click event that triggers the custom "model:select" event on an application-wide event aggregator. From here on you can use that event to set up the popup view by catching the event like:

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

InitPopup may look like this:

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

    marker.bindPopup(view.render().el).openPopup();
};

The PopupView is a Backbone view (Well, Marionette in my case.) complete with template and event handling and so on.

Map markers as Backbone.js Views

1 Answers