Threaded View

  1. 23 Dec 2012 4:36 PM #1
    digeridoopoo
    digeridoopoo is offline
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    326
    Vote Rating
    10
    Answers
    10
    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
    Reply With Quote Reply With Quote
  2. Best Answer Posted by 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:

    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

Tags for this Thread