Sencha Touch and Leaflet.js APIs

Question

I would like to use Leaflet.js API with Sencha Touch 2.3.1, and leaflet.js gives this error:

Uncaught Error: Map container not found. 

These links are included in index.html

 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> 

Here is my basic view code:

 Ext.define('App.view.Main', { extend: 'Ext.Container', xtype: 'main', requires: [ 'App.view.MapView', ], config: { layout: 'card', items: [ { itemId: 'mapview', xtype: 'mapview', id : 'map' } ] } }); 

This is the code "App.view.MapView":

 Ext.define("App.view.MapView", { extend: 'Ext.Container', requires: ['Ext.device.Geolocation'], xtype: 'mapview', initialize: function(){ var map = L.map('map').setView([47.36865, 8.539183], 13); var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); map.on('click', function() { console.log('Click-Event on map / Time: ' + Date.now()); }); }, }); 

What am I doing wrong? Please, help.

Answer 1

Well, it seems I found a solution. I changed this line:

 var map = L.map('map').setView([47.36865, 8.539183], 13); 

to

 var map = L.map(this.element.dom).setView([47.36865, 8.539183], 13); 

Answer 2

The flyer is looking for a DOM element, map , which is not (for now ...).

This problem occurs when L.map('map') is called before the DOM has finished loading.

Answer 3

Guessing js was done before the DOM was ready. Try wrapping your code in a function and setting window.onload equal to your function.