Ext.ux.Leaflet for Touch 2.1 Plugin Options Question...

[digeridoopoo]

Hi,

I've been playing with the new Ext.ux.Leaflet extension from Github, it seems like a nice extension and an improvement on previous ones. With the built-in Google maps Sencha component I am able to update the map on click, using something like this:

Ext.getCmp('mymap').setMapCenter({latitude: lat,longitude: lng});

I'm struggling a little when trying to adapt it to this new Leaflet component.Here is the snippet of code that calls the map inside a container:

// Ext.ux.LeafletMap Component
                        xtype: 'leafletmap',
                        id: 'leafletmap',
                        useCurrentLocation: true,
                        autoMapCenter: false,
                        mapOptions: {
                            zoom: 4
                        }

I've managed to get it to update and change when I click the first item, but when I click the second item it says 'Error: Map container is already initialized'. So it seems when clicking a new item it tries to instantiate a new map with id 'leafletmap' instead of replacing it. Anyone know how to get it to not try and create a new leafletmap? I tried without 'new' but it doesn't work:

map = new L.Map('leafletmap');
        
        // create the tile layer with correct attribution
        var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12});        

    // start the map in South-East England
        map.setView(new L.LatLng(lat, lng),9);
        map.addLayer(osm);

When I try this I get the error 'TypeError: 'undefined' is not a function (evaluating 'Ext.getCmp('leafletmap').setView(new L.LatLng(lat, lng),9)')':

Ext.getCmp('leafletmap').setView(new L.LatLng(lat, lng),9);

Here's a link to the plugin code: Link

[tschortsch]

Hi,

If you want to change the centering of the map you can do this whit the setMapCenter()-function on the component like that:

Ext.define('LeafletMapDemo.controller.Map', {    extend: 'Ext.app.Controller',


    config: {
        refs: {
            mapCmp: '#leafletmap'
        },
        control: {
            mapCmp: {
                maprender: 'onMapRender'
            }
        }
    },


    onMapRender: function(component, map, layer) {
        map.on('click', this.onMapClick, this);
    },
    
    onMapClick: function(e) {
        this.getMapCmp().setMapCenter(e.latlng);
    }
});

If you want to change some map options like zoom level or adding a new layer you can do this directly on the map-object inside the LeafletMap component.

Ext.getCmp('leafletmap').getMap().addLayer(osm);

• setMapCenter() documentation: http://kort.herokuapp.com/docs/Ext.u...d-setMapCenter
• map documentation: http://leafletjs.com/reference.html#map-constructor

Greetings
tschortsch