Can't access Leaflet map with Backbone.js

Question

When initialising a Leaflet map with Backbone.js I can't access this exact map anymore.

E.g.:

mapView.map.locate({setView: true, maxZoom: 10});

will result in

TypeError: 'undefined' is not a function (evaluating 'mapView.map.locate({setView: true, maxZoom: 10})')

The map is initialized via a separate view in a dashboard view like:

this.mapView = new MapView();
    $(this.$el).find('.content').append(this.mapView.el).find('.map').addClass('full').css({
        'height': $(window).height() / 2
    });

This view looks like:

var MapView = Backbone.View.extend({
    template: _.template(""),
    render: function ()
    {
        this.$el.html(this.template());

        this.map = L.map(this.el).setView([48.00786, 13.17989], 8);

        this.map = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'OpenStreetMap &copy; Mitwirkende der <a href="http://osm.org/copyright">OpenStreetMap</a>'
        }).addTo(this.map);

        return this;
    }
});

I can access the map object by just console.log'ing it. The result looks like:

_animated: true _bgBuffer: HTMLDivElement _clearBgBufferTimer: 4 _container: HTMLDivElement _initHooksCalled: true _leaflet_events: Object _leaflet_id: 20 _limitedUpdate: function s() {var a=arguments;return n?(o=!0,void 0):(n=!0,setTimeout(function(){n=!1,o&&(s.apply(i,a),o=!1)},e),t.apply(i,a),void 0);} _map: Object _tileContainer: HTMLDivElement _tileImg: HTMLImageElement _tiles: Object _tilesToLoad: 0 _url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" options: Object proto: Object

But why am I not able to access this map afterwards?

Thanks!

mapView.map.locate would suggest that you're expecting to find a mapView variable when you only have a mapView property in one of your views. And don't $(this.$el), just use this.$el; this.$ is the same as this.$el.find. — mu is too short
Thanks ;) I see your point, but mapView and mapView are two (well, badly named, but anyway) variables. The MapView itself has a property valled mapView, in the router (where I need to render map view) var mapView is initialised like var mapView = view.mapView.render(); - sorry... — Severin

Severin Severin · Accepted Answer · 2013-08-06T08:19:59

Problem solved. I just moved the whole map thing to the view and did not separate the map into another view. That's probably not the finest way to do this but it does it's job quite well.

Can't access Leaflet map with Backbone.js

1 Answers