1. #1
    Ext User
    Join Date
    Apr 2008
    Posts
    2
    Vote Rating
    0
    Patrickz is on a distinguished road

      0  

    Default Mapstraction

    Mapstraction


    I would like to use Mapstraction. Ext-js have any plan to support it?

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    8,892
    Vote Rating
    102
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    We don't have any plans to support Mapstraction in particular although I think it is pretty cool what the mapstraction team is doing.

    Both Shea Frederick and David Davis have done some work on integration with Google Maps in Ext JS.
    http://extjs.com/blog/2008/07/01/int...pi-with-extjs/
    http://xantus.vox.com/library/post/g...get-extjs.html
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Ext User
    Join Date
    Apr 2008
    Posts
    28
    Vote Rating
    0
    Jokie is on a distinguished road

      0  

    Default Ext.ux.GMapPanel & Mapstraction

    Ext.ux.GMapPanel & Mapstraction


    Quote Originally Posted by aconran View Post
    We don't have any plans to support Mapstraction in particular although I think it is pretty cool what the mapstraction team is doing.

    Both Shea Frederick and David Davis have done some work on integration with Google Maps in Ext JS.
    http://extjs.com/blog/2008/07/01/int...pi-with-extjs/
    http://xantus.vox.com/library/post/g...get-extjs.html
    Using Shea Frederick code I was able to modify it to support mapstraction, given i do not have a lot of experience with JavaScript or Ext-js (willing to learn none the less) but It seems to work so if the more experienced of you could point me and those interested in using mapstraction in the right direction I would sure appreciate it.

    Code:
    /**
     * @author Shea Frederick
     * http://www.vinylfox.com
     */
    
    Ext.namespace('Ext.ux');
     
    /**
     * This extension adds Google maps functionality to any panel or panel based component (ie: windows).
     * @class Ext.ux.GMapPanel
     * @extends Ext.Panel
     * @param {Object} config The config object
     */
    Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
        /**
        * @cfg {String} mapType
        * The type of map to display, generic options available are: 'map', 'panorama'. 
        * More specific maps can be used by specifying the google map type:
        * 
        * G_NORMAL_MAP displays the default road map view
        * G_SATELLITE_MAP displays Google Earth satellite images
        * G_HYBRID_MAP displays a mixture of normal and satellite views
        * G_DEFAULT_MAP_TYPES contains an array of the above three types, useful for iterative processing.
        * G_PHYSICAL_MAP displays a physical map based on terrain information. 
        * G_MOON_ELEVATION_MAP displays a shaded terrain map of the surface of the Moon, color-coded by altitude.
        * G_MOON_VISIBLE_MAP displays photographic imagery taken from orbit around the moon.
        * G_MARS_ELEVATION_MAP displays a shaded terrain map of the surface of Mars, color-coded by altitude.
        * G_MARS_VISIBLE_MAP displays photographs taken from orbit around Mars.
        * G_MARS_INFRARED_MAP displays a shaded infrared map of the surface of Mars, where warmer areas appear brighter and colder areas appear darker.
        * G_SKY_VISIBLE_MAP displays a mosaic of the sky, as seen from Earth, covering the full celestial sphere.
        * 
        * These map types can be used within a configuration like this:  { mapType: G_MOON_VISIBLE_MAP }
        */
        /**
        * @cfg {Object} setCenter
        * A center starting point for the map. The map needs to be centered before it can be used.
        * The config can contain an address to geocode, and even a marker
        * \{
        *   geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
        *   marker: \{title: 'Fenway Park'\}
        * \}
        * Or it can simply be a lat/lng. Either way, a marker is not required, all we are really looking for here is a starting center point for the map.
        * \{
        *   lat: 42.339641,
        *   lng: -71.094224
        * \}
        */
        /**
         * @cfg {Number} zoomLevel
         * The zoom level to initialize the map at, generally between 1 (whole planet) and 40 (street). Also used as the zoom level for panoramas, zero specifies no zoom at all.
         */
        /**
         * @cfg {Number} yaw
         * The Yaw, or rotational direction of the users perspective in degrees. Only applies to panoramas.
         */
        /**
         * @cfg {Number} pitch
         * The pitch, or vertical direction of the users perspective in degrees. Default is 0 (zero), straight ahead. Valid values are between +90 (straight up) and -90 (straight down). 
         */
        /**
         * @cfg {Boolean} displayErrors
         * True to display geocoding errors to the end user via a message box.
         */
        /**
         * @cfg {Boolean} minAccuracy
         * The level (between 1 & 8) to display an accuracy error below. Defaults to seven (7).
         * see: http://code.google.com/apis/maps/documentation/reference.html#GGeoAddressAccuracy
         */
        /**
         * @cfg {Array} mapConfOpts
         * Array of strings representing configuration methods to call, a full list can be found here: http://code.google.com/apis/maps/documentation/reference.html#GMap2
         */
        /**
         * @cfg {Array} mapControls
         * Array of strings representing map controls to initialize, a full list can be found here: http://code.google.com/apis/maps/documentation/reference.html#GControlImpl
         */
        // private
        initComponent : function(){
            
            var defConfig = {
                plain: true,
                zoomLevel: 0,
                yaw: 180,
                pitch: 0,
                provider:'google',
                mapType: 'Mapstraction.ROAD',
                border: false,
                displayErrors: false,
    			minAccuracy: 7,
    			mapDefined: false,
    			mapDefinedGMap: false
            };
            
            Ext.applyIf(this,defConfig);
            
            Ext.ux.GMapPanel.superclass.initComponent.call(this);        
    
        },
        // private
        afterRender : function(){
            this.markerContainer = [];
            var wh = this.ownerCt.getSize();
            Ext.applyIf(this, wh);
            
            Ext.ux.GMapPanel.superclass.afterRender.call(this);
            
            if (this.mapType === 'Mapstraction.ROAD'){
                this.gmap = new Mapstraction(this.body.dom, this.provider, true);
    			this.mapDefined = true;
    			this.mapDefinedGMap = true;
            }
            
            /*if (this.mapType === 'panorama'){
                this.gmap = new GStreetviewPanorama(this.body.dom);
    			this.mapDefined = true;
            }*/
    
    		if (!this.mapDefined && this.mapType){
    			this.gmap = new Mapstraction(this.body.dom, this.provider, true);
    			this.gmap.setMapType(this.mapType);
    			this.mapDefined = true;
    			this.mapDefinedGMap = true;
    		}
    
            if (typeof this.controls == 'object' && this.mapDefinedGMap) {
                this.getMap().addControls(this.controls);
            }
            
            this.addMapControls();
            this.addOptions();
            
            if (typeof this.setCenter === 'object') {
    //            if (typeof this.setCenter.geoCodeAddr === 'string'){
    //                this.geoCodeLookup(this.setCenter.geoCodeAddr, this.setCenter.marker, false, true, this.setCenter.listeners);
    //            }else{
    //                if (this.mapType === 'map'){
    //                    var point = this.fixLatLng(new GLatLng(this.setCenter.lat,this.setCenter.lng));
    //                    this.getMap().setCenter(point, this.zoomLevel);    
    //                }
    //                if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
    //                    this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
    //                }
    //            }
    //            if (this.mapType === 'panorama'){
    //                this.getMap().setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoomLevel});
    //            }
                    var point = new LatLonPoint(this.setCenter.lat,this.setCenter.lng);
                    this.getMap().setCenterAndZoom(point,this.zoomLevel);
            }
    
            this.getMap().addMapListener(this.gmap, 'load',function(){
                this.onMapReady();
            });
    
        },
        // private
        onMapReady : function(){
            
            this.addMarkers(this.markers);
            this.addKMLOverlay(this.autoLoadKML);
            
        },
        // private
        onResize : function(width, height){
            
            // check for the existance of the google map in case the onResize fires too early
            if (typeof this.getMap() == 'object') {
                this.getMap().resizeTo(width, height);
            }
            
            Ext.ux.GMapPanel.superclass.onResize.call(this, width, height);
    
        },
        // private
        setSize : function(width, height){
            
            // check for the existance of the google map in case setSize is called too early
            if (typeof this.getMap() == 'object') {
                this.getMap().resizeTo(width, height);
            }
            
            Ext.ux.GMapPanel.superclass.setSize.call(this, width, height);
            
        },
        /**
         * Returns the current google map
         * @return {GMap} this
         */
        getMap : function(){
            
            return this.gmap;
            
        },
        /**
         * Returns the maps center as a GLatLng object
         * @return {GLatLng} this
         */
        getCenter : function(){
            
            return this.fixLatLng(this.getMap().getCenter());
            
        },
        /**
         * Returns the maps center as a simple object
         * @return {Object} this has lat and lng properties only
         */
        getCenterLatLng : function(){
            
            var ll = this.getCenter();
            return {lat: ll.lat(), lng: ll.lng()};
            
        },
        /**
         * Creates markers from the array that is passed in. Each marker must consist of at least lat and lng properties.
         * @param {Array} markers an array of marker objects
         *
        addMarkers : function(markers) {
            
            if (Ext.isArray(markers)){
                for (var i = 0; i < markers.length; i++) {
                    if (typeof markers[i].geoCodeAddr == 'string') {
                        this.geoCodeLookup(markers[i].geoCodeAddr, markers[i].marker, false, markers[i].setCenter, markers[i].listeners);
                    }else{
                        var mkr_point = this.fixLatLng(new GLatLng(markers[i].lat, markers[i].lng));
                        this.addMarker(mkr_point, markers[i].marker, false, markers[i].setCenter, markers[i].listeners);
                    }
                }
            }
            
        },*/
    	
    	/**
         * Add many markers at once.
         *
         * @param {Array of Marker} markers The markers to add.
         * @param {Number} minZoom The minimum zoom level to display the markers.
         * @param {Number} opt_maxZoom The maximum zoom level to display the markers optional.
         */
        addMarkers: function (markers, minZoom, opt_maxZoom) {
            if (Ext.isArray(markers)) {
            var len = markers.length;
    			for (var i = 0; i < len; i++) {
    				this.addMarker(markers[i]);
    			}
    		}
        },
    	
        /**
         * Creates a single marker.
         * @param {Object} point a GLatLng point
         * @param {Object} marker a marker object consisting of at least lat and lng
         * @param {Boolean} clear clear other markers before creating this marker
         * @param {Boolean} center true to center the map on this marker
         * @param {Object} listeners a listeners config
         *
        addMarker : function(point, marker, clear, center, listeners){
            
            Ext.applyIf(marker,G_DEFAULT_ICON);
    
            if (clear === true){
                this.getMap().clearOverlays();
            }
            if (center === true) {
                this.getMap().setCenter(point, this.zoomLevel);
            }
    
            var mark = new GMarker(point,marker);
            if (typeof listeners === 'object'){
                for (evt in listeners) {
                    GEvent.bind(mark, evt, this, listeners[evt]);
                }
            }
            this.getMap().addOverlay(mark);
    
        },*/
    	
    	/**
         * Add a single marker to the map.
         *
         * @param {Marker} marker The marker to add.
         * @param {Number} minZoom The minimum zoom level to display the marker.
         * @param {Number} opt_maxZoom The maximum zoom level to display the marker optional.
         */
        addMarker: function (marker, minZoom, opt_maxZoom) {
            this.gmap.addOverlay(marker);
            this.markerContainer.push(marker);
    	},
    	
        // private
        addMapControls : function(){
            
            if (this.mapType === 'map') {
                if (Ext.isArray(this.mapControls)) {
                    for(i=0;i<this.mapControls.length;i++){
                        this.addMapControl(this.mapControls[i]);
                    }
                }else if(typeof this.mapControls === 'string'){
                    this.addMapControl(this.mapControls);
                }else if(typeof this.mapControls === 'object'){
                    this.getMap().addControl(this.mapControls);
                }
            }
            
        },
        /**
         * Adds a GMap control to the map.
         * @param {String} mc a string representation of the control to be instantiated.
         */
        addMapControl : function(mc){
            
            var mcf = window[mc];
            if (typeof mcf === 'function') {
                this.getMap().addControl(new mcf());
            }    
            
        },
        
        /**
         * Removes a GMap control to the map.
         * @param {String} mc a string representation of the control to be instantiated.
         */
        removeMapControl : function(mc){
            var mcf = window[mc];
            if (typeof mcf === 'function') {
                this.getMap().removeControl(new mcf());
            }    
            
        },
        
        // private
        addOptions : function(){
            
            if (Ext.isArray(this.mapConfOpts)) {
                var mc;
                for(i=0;i<this.mapConfOpts.length;i++){
                    this.addOption(this.mapConfOpts[i]);
                }
            }else if(typeof this.mapConfOpts === 'string'){
                this.addOption(this.mapConfOpts);
            }        
            
        },
        /**
         * Adds a GMap option to the map.
         * @param {String} mo a string representation of the option to be instantiated.
         */
        addOption : function(mo){
            
            var mof = this.getMap()[mo];
            if (typeof mof === 'function') {
                this.getMap()[mo]();
            }    
            
        },
        /**
         * Loads a KML file into the map.
         * @param {String} kmlfile a string URL to the KML file.
         */
        addKMLOverlay : function(kmlfile){
            
            if (typeof kmlfile === 'string' && kmlfile !== '') {
                var geoXml = new GGeoXml(kmlfile);
                this.getMap().addOverlay(geoXml);
            }
            
        },
        /**
         * Adds a marker to the map based on an address string (ie: "123 Fake Street, Springfield, NA, 12345, USA") or center the map on the address.
         * @param {String} addr the address to lookup.
         * @param {Object} marker the marker to add (optional).
         * @param {Boolean} clear clear other markers before creating this marker
         * @param {Boolean} center true to set this point as the center of the map.
         * @param {Object} listeners a listeners config
         */
        geoCodeLookup : function(addr, marker, clear, center, listeners) {
            
            if (!this.geocoder) {
                this.geocoder = new GClientGeocoder();
            }
            this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this, [addr, marker, clear, center, listeners], true));
            
        },
        // private
        addAddressToMap : function(response, addr, marker, clear, center, listeners){
            if (!response || response.Status.code != 200) {
                Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');
            }else{
                place = response.Placemark[0];
                addressinfo = place.AddressDetails;
                accuracy = addressinfo.Accuracy;
                if (accuracy === 0) {
                    this.geoErrorMsg('Unable to Locate Address', 'Unable to Locate the Address you provided');
                }else{
                    if (accuracy < this.minAccuracy) {
                        this.geoErrorMsg('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');
                    }else{
                        point = this.fixLatLng(new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]));
                        if (center){
                            this.getMap().setCenter(point, this.zoomLevel);
                        }
                        if (typeof marker === 'object') {
                            if (!marker.title){
                                marker.title = place.address;
                            }
                            Ext.applyIf(marker, G_DEFAULT_ICON);
                            this.addMarker(point, marker, clear, false, listeners);
                        }
                    }
                }
            }
            
        },
    	
    	clearMarkers: function(){
    		Ext.each(this.markerContainer,function(item) {
    				this.gmap.removeOverlay(item);
    			},
    		this);
            this.markerContainer = [];
    	},
    	
    	changeView: function (view) {
    		this.gmap.setMapType(view);
    	},
    			
    	toggleFeature: function (feature) {
    	    eval('this.gmap.' + feature + '();');
        },
    	
        // private
        geoErrorMsg : function(title,msg){
            if (this.displayErrors) {
                Ext.MessageBox.alert(title,msg);
            }
        },
     	// private
    	// used to inverse the lat/lng coordinates to correct locations on the sky map
    	fixLatLng : function(llo){
    		if (this.getMap().getCurrentMapType() == 'G_SKY_MAP_TYPES'){
    			llo.lat(180 - llo.lat());
    			llo.lng(180 - llo.lng());
    		}
    		return llo;
    	}
    });
    
    Ext.reg('gmappanel',Ext.ux.GMapPanel);
    Code:
    var viewport = new Ext.Viewport({
                    id: 'simplevp',
                    layout: "border",
                    items: [{
                        region: 'center',
                        id: 'map',
                        xtype: 'gmappanel',
                        listeners: {
                            resize: function(p, w, h) {
                                this.onResize(w, h);
                            }
                        },
                        zoomLevel: 7,
                        gmapType: 'Mapstraction.ROAD',
                        provider:'mapquest',
                        controls: {
                            pan:      true,
                            zoom:     'large',
                            overview: true,
                            scale:    true,
                            map_type: true
                        },
                        setCenter: {
                            lat: 33.434623,
                            lng: -89.043099
                        }
                    }]
    
                });
    
    
                viewport.doLayout();
                var marker = new Marker( new LatLonPoint(33.434623,-89.44));
                marker.addData({
                                label:'test',
                                infoBubble:'Testing 1234'
                                })
                Ext.getCmp('map').getMap().addMarker(marker );

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar