im trying to use Leaflet in a Backbone application. Plus its AMD'd with require -- so it's not a script in a page... i believe the issue is that it can't access the page DOM.

L.Map takes a string. Not a DOM...

Here's some code. I've even tried delaying a few seconds until the page is rendered. With no success.

The error is "Map container not found"

   define([
      'jquery',
      'underscore',
      'backbone',
      'collections/Collection',
      'text!templates/map/Template.html',
      'libs/leaflet-markercluster/leaflet-0.6.4'
   ], function($, _, Backbone, Collection, Template, L) {
       var MapView = Backbone.View.extend({
          el : "#sub-page",
          template: _.template(Template),
          delayedRender: function() {
              try {
                  var map = this.map = new L.Map( '#map_canvas' );   
              } catch ( err ) {
                  console.log(err);
              }   
          },

          render : function() {
              this.$el.html( this.template() ); 
              setTimeout( this.delayedRender, 2 );         
          }

Digging a bit deeper the Leaflet L.Map constructor does a document.getElementById which may not make sense in a AMD backbone app.

 return (typeof id === 'string' ? document.getElementById(id) : id);

im trying to use Leaflet in a Backbone application. Plus its AMD'd with require -- so it's not a script in a page... i believe the issue is that it can't access the page DOM.

L.Map takes a string. Not a DOM...

Here's some code. I've even tried delaying a few seconds until the page is rendered. With no success.

The error is "Map container not found"

   define([
      'jquery',
      'underscore',
      'backbone',
      'collections/Collection',
      'text!templates/map/Template.html',
      'libs/leaflet-markercluster/leaflet-0.6.4'
   ], function($, _, Backbone, Collection, Template, L) {
       var MapView = Backbone.View.extend({
          el : "#sub-page",
          template: _.template(Template),
          delayedRender: function() {
              try {
                  var map = this.map = new L.Map( '#map_canvas' );   
              } catch ( err ) {
                  console.log(err);
              }   
          },

          render : function() {
              this.$el.html( this.template() ); 
              setTimeout( this.delayedRender, 2 );         
          }

Digging a bit deeper the Leaflet L.Map constructor does a document.getElementById which may not make sense in a AMD backbone app.

 return (typeof id === 'string' ? document.getElementById(id) : id);

• javascript
• dom
• backbone.js

Share Improve this question Follow edited Sep 18, 2013 at 8:45 Tepken Vannkorn 9,7231414 gold badges6262 silver badges8686 bronze badges asked Sep 18, 2013 at 8:05 Gabe RainbowGabe Rainbow 3,75844 gold badges3737 silver badges4343 bronze badges 1

• The error 'Map container not found' is generated if document.getElementById(id) fails (or the id) is not a HTMLElement. – Gabe Rainbow Commented Sep 18, 2013 at 16:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You've probably long since solved this or moved on, but I was having the same issue. The solution for me turned out to have nothing to do with Backbone. Rather, it seems that the call to L.map(...) was being run before the DOM was ready.

To solve this, I just wrapped the L.map in a standard jQuery document.ready, and all's well.