Threaded View

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    393
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

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

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


    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:

    Code:
    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:

    Code:
    // 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:

    Code:
    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)')':

    Code:
    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:

    Code:
    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.

    Code:
    Ext.getCmp('leafletmap').getMap().addLayer(osm);
    Greetings
    tschortsch

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..."