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
    393
    Vote Rating
    16
    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

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..." hd porno faketaxi