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

• 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

1 Answer 1

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.