Question

I am trying to integrate Sencha 4.1 (ExtJS) with the Leaflet mapping library while using Sencha Architect.

When the page loads, the tiles are mixed up and appear offset. I need to drag the page up to be able to see the tiles.

The full project is available here: https://github.com/breizo/SenchaLeaflet.

Here is an excerpt of the custom component created (see full code here: https://github.com/breizo/SenchaLeaflet/blob/master/ux/LeafletMap.js).

constructor: function () {
    this.callParent(arguments);
    this.on({
        resize: 'doResize',
        scope: this
    });
    var ll = window.L;
    if (!ll) {
        this.setHtml('Leaflet library is required');
    }
}

 onRender: function() {
    this.callParent(arguments); 
    var renderTo = arguments[0].dom.id;
    debugger;
    var me = this,
        ll = window.L,
        element = me.mapContainer,
        mapOptions = me.getMapOptions(),
        map,
        tileLayer;


    if (ll) {
        // if no center property is given -> use default position
        if (!mapOptions.hasOwnProperty('center') || !(mapOptions.center instanceof ll.LatLng)) {
            mapOptions.center = new ll.LatLng(47.36865, 8.539183); // default: Zuerich
        }

        me.setTileLayer(new ll.TileLayer(me.getTileLayerUrl(), me.getTileLayerOptions()));
        tileLayer = me.getTileLayer();
        mapOptions.layers = [tileLayer];

        me.setMap(new ll.Map(renderTo, mapOptions));
        map = me.getMap();

        // track map events
        map.on('zoomend', me.onZoomEnd, me);
        map.on('movestart', me.onMoveStart, me);
        map.on('moveend', me.onMoveEnd, me);
        me.fireEvent('maprender', me, map, tileLayer);
    }
},

When debugging it appears that when onRender is called, the parent container of the map is not properly sized yet, in particular its height is only enough to contain the attrib text, about 16 pix. WHen the doResize is called, the container is properly sized, but it doesn’t change the end result: the tiles are mixed up and offset.

I tried various changes to the container, but nothing worked…

Answer 1

1) Problem with mixed layers is caused by CSS. Your leaflet.css has wrong path in html, so it’s not attached in the document. To fix mixing issue set correct path to css file, or attach it from CDN:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />

2) Wrong map offset is caused by extjs generated div:

<div class="x-llmap x-fit-item x-llmap-default" ...></div>

It pushes map container to the bottom and wrong offset calculations are made. You can also fix this using inline style or CSS:

.leaflet-map-pane {
    top: 0;
}