Sencha Touch and Leaflet.js API

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 mainview 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 'App.view.MapView' code:

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.

sfletche · Answer 1 · 2014-05-02T15:58:01.013

13

Leaflet is searching for a DOM element, map, that isn't there (yet...).

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

edited May 02 '14 at 15:58

answered May 02 '14 at 15:12

sfletche

47,248
30
103
119

1

It's not a matter of when the script are included, but when the map is initialized. – Andrea Casaccia May 02 '14 at 15:46

score 5 · Answer 2 · answered Jan 27 '15 at 20:30

5

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

answered Jan 27 '15 at 20:30

exaybachay

51
1
1

score 2 · Accepted Answer · answered May 03 '14 at 16:27

2

Ok, 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);

answered May 03 '14 at 16:27

terreb

1,417
2
23
40

So it seems the id selector wasn't working... Weird. I wonder why. – Andrea Casaccia May 04 '14 at 08:17
I am trying to do like what is the answer, but the map doesnt appear. How Can I fix this? – Tenz Dec 14 '16 at 17:00

Sencha Touch and Leaflet.js API

3 Answers3