1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    2
    Vote Rating
    0
    ylimani is on a distinguished road

      0  

    Default Leaflet Marker in Sencha 2 Architect or Touch

    Leaflet Marker in Sencha 2 Architect or Touch


    Hey guys,

    I'm very new to Sencha and overall Java, i want to build a map (leaflet) with markers all offline, i got the map going using the Vinylfox Ext.us.touch.leaflet.js, but i don't know how to add a marker and i have searched everywhere, there are examples of leaflet markers, but i think they are from Sencha 1x and they don't really work for me

    This is the code

    Code:
    /**
     * Wraps a Leaflet Map in an Ext.Component.
     *
     * ## Example
     *
     *     Ext.Viewport.add({
     *         xtype: 'leaflet',
     *         useCurrentLocation: true
     *     });
     *
     */
    Ext.define('Ext.Leaflet', {
        extend: 'Ext.Component',
        xtype : 'leaflet',
        requires: ['Ext.util.GeoLocation'],
    
    
        isMap: true,
    
    
        config: {
            /**
             * @event maprender
             * @param {Ext.Map} this
             * @param {L.Map} map The rendered map instance
             */
    
    
            /**
             * @event centerchange
             * @param {Ext.Map} this
             * @param {L.Map} map The rendered map instance
             * @param {L.LatLng} center The current LatLng center of the map
             */
    
    
            /**
             * @event zoomchange
             * @param {Ext.Map} this
             * @param {L.Map} map The rendered Leaflet map instance
             * @param {Number} zoomLevel The current zoom level of the map
             */
    
    
            /**
             * @cfg {String} baseCls
             * The base CSS class to apply to the Maps's element
             * @accessor
             */
            baseCls: Ext.baseCSSPrefix + 'lmap',
    
    
            /**
             * @cfg {Boolean/Ext.util.GeoLocation} useCurrentLocation
             * Pass in true to center the map based on the geolocation coordinates or pass a
             * {@link Ext.util.GeoLocation GeoLocation} config to have more control over your GeoLocation options
             * @accessor
             */
            useCurrentLocation: true,
    
    
            /**
             * @cfg {map} map
             * The wrapped map.
             * @accessor
             */
            map: null,
    
    
            /**
             * @cfg {Ext.util.GeoLocation} geo
             * @accessor
             */
            geo: null,
    
    
            /**
             * @cfg {Object} mapOptions
             * @accessor
             */
            mapOptions: {}
        },
    
    
        constructor: function() {
            this.callParent(arguments);
            this.options= {};
            this.element.setVisibilityMode(Ext.Element.OFFSETS);
        },
    
    
        initialize: function() {
            this.callParent();
            this.geo = this.geo || new Ext.util.GeoLocation({
                autoLoad : true
            });
            this.on({
                painted: 'renderMap',
                scope: this
            });
            this.element.on('touchstart', 'onTouchStart', this);
        },
    
    
        onTouchStart: function(e) {
            e.makeUnpreventable();
        },
    
    
        applyMapOptions: function(options) {
            return Ext.merge({}, this.options, options);
        },
    
    
        updateMapOptions: function(newOptions) {
            var map = this.getMap();
    
    
            if (map) {
                map.setOptions(newOptions);
            }
        },
    
    
        getMapOptions: function() {
            return Ext.merge({}, this.options);
        },
    
    
        updateUseCurrentLocation: function(useCurrentLocation) {
            this.setGeo(useCurrentLocation);
        },
    
    
        applyGeo: function(config) {
            return Ext.factory(config, Ext.util.GeoLocation, this.getGeo());
        },
    
    
        updateGeo: function(newGeo, oldGeo) {
            var events = {
                locationupdate : 'onGeoUpdate',
                locationerror : 'onGeoError',
                scope : this
            };
    
    
            if (oldGeo) {
                oldGeo.un(events);
            }
    
    
            if (newGeo) {
                newGeo.on(events);
                newGeo.updateLocation();
            }
        },
    
    
        doResize: function() {
            var map = this.getMap();
            if (map) {
                map.invalidateSize();
            }
        },
        
        
        
    
    
    
    
        // @private
        renderMap: function() {
                   
            var me = this,
                element = me.element,
                mapOptions = me.getMapOptions(),
                event;
            
            
                this.tileLayer = new L.TileLayer('file://localhost/c|/cashe/{z}/{x}/{y}.png', {
                maxZoom : 18
         
            });
      
            
            
            mapOptions = Ext.merge({
                layers : [this.tileLayer],
                zoom : this.zoomLevel || 12,
                maxZoom : 18,
                zoomControl : true,
                attributionControl : false,
                center : this.center || new L.LatLng(42.6667, 21.1667)
            }, mapOptions);
    
    
            this.map = new L.Map(element.id, mapOptions);
            this.map.addLayer(this.tileLayer);
    
    
            me.fireEvent('maprender', me, this.map);
            
            
    
    
                                
    
    
            
              
        },
        
        
        
        
        
        
        
    
    
        // @private
        onGeoUpdate: function(geo) {
            if (geo) {
                this.setMapCenter(new L.LatLng(geo.getLatitude(), geo.getLongitude()));
            }
        },
    
    
        // @private
        onGeoError: Ext.emptyFn,
    
    
        /**
         * Moves the map center to the designated coordinates hash of the form:
         *
         *     { latitude: 39.290555, longitude: -76.609604 }
         *
         * or a L.LatLng object representing to the target location.
         *
         * @param {Object/L.LatLng} coordinates Object representing the desired Latitude and
         * longitude upon which to center the map.
         */
        setMapCenter: function(coordinates) {
            
           
            var me = this,
                map = me.getMap();
    
    
            if (map && coordinates) {
                if (!me.isPainted()) {
                    me.un('painted', 'setMapCenter', this);
                    me.on('painted', 'setMapCenter', this, { single: true, args: [coordinates] });
                    return;
                }
    
    
                if (coordinates && !(coordinates instanceof L.LatLng) && 'longitude' in coordinates) {
                    coordinates = new L.LatLng(coordinates.latitude, coordinates.longitude);
                }
    
    
                if (!map) {
                    me.renderMap();
                    map = me.getMap();
                }
    
    
                if (map && coordinates instanceof L.LatLng) {
                    map.setView(ctr, this.zoomLevel);
                }
                else {
                    this.options = Ext.apply(this.getMapOptions(), {
                        center: coordinates
                    });
                }
            }
        },
        
    
    
    
    
        // @private
        onZoomChange : function() {
            var mapOptions = this.getMapOptions(),
                map = this.getMap(),
                zoom;
    
    
            zoom = (map && map.getZoom) ? map.getZoom() : mapOptions.zoom || 10;
    
    
            this.options = Ext.apply(mapOptions, {
                zoom: zoom
            });
    
    
            this.fireEvent('zoomchange', this, map, zoom);
        },
    
    
        // @private
        onCenterChange: function() {
            var mapOptions = this.getMapOptions(),
                map = this.getMap(),
                center;
    
    
            center = (map && map.getCenter) ? map.getCenter() : mapOptions.center;
    
    
            this.options = Ext.apply(mapOptions, {
                center: center
            });
    
    
            this.fireEvent('centerchange', this, map, center);
    
    
        },
    
    
        // @private
        destroy: function() {
            Ext.destroy(this.getGeo());
            this.callParent();
        }
    });


    this is the marker that i want to add

    From Leaflet Website

    Code:
    var marker = L.marker([42.6667, 21.1667]).addTo(map);
    marker.bindPopup("<b>Hello world!</b><br>I am a popup.")();



    Thnx

  2. #2
    Sencha User
    Join Date
    Oct 2012
    Posts
    2
    Vote Rating
    0
    ylimani is on a distinguished road

      0  

    Default


    Anyone!?

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    407
    Vote Rating
    17
    digeridoopoo will become famous soon enough

      0  

    Default Try copying form Leaflet Example code

    Try copying form Leaflet Example code


    Try copying from the Leaflet example code....it worked for me....var marker = new L.Marker(new L.LatLng(39.61, -105.02)), etc

    Then for the popups:

    marker.bindPopup("<h3>Hello Maps!</h3>This is Leaflet.js");

    You can even attach an marker.on click function to the Leaflet markers and have normal Sencha popups instead of the standard leaflet ones

    :-)

Thread Participants: 1

Tags for this Thread