Threaded View

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Vote Rating
    digeridoopoo will become famous soon enough


    Default Answered: Ext.ux.Leaflet for Touch 2.1 Plugin Options Question...

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


    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}{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);
    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

  2. 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: '',
        config: {
            refs: {
                mapCmp: '#leafletmap'
            control: {
                mapCmp: {
                    maprender: 'onMapRender'
        onMapRender: function(component, map, layer) {
            map.on('click', this.onMapClick, this);
        onMapClick: function(e) {
    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.


Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."