Threaded View

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    407
    Answers
    17
    Vote Rating
    18
    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