1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    3
    Vote Rating
    0
    lukerothgda is on a distinguished road

      0  

    Default OpenLayers with ExtJS 4

    OpenLayers with ExtJS 4


    Has anybody tried using OpenLayers in an ExtJS 4 page? I've used the GeoExt library for previous projects, but it will be a while before that gets ported to ExtJS4. I'm working on just creating a simple OpenLayers map wrapped in a panel, but I'm not having any luck getting the map to render. Has anybody else been working on this? If I make some progress, I'll post my results.
    Thanks,
    Luke

  2. #2
    Sencha User
    Join Date
    May 2011
    Posts
    1
    Vote Rating
    0
    maoherran is on a distinguished road

      0  

    Default


    I Have the same problem, if I found some solution I post too... please letme know if you found first the solution

  3. #3
    Sencha User
    Join Date
    Nov 2008
    Location
    Lyon, France
    Posts
    215
    Vote Rating
    5
    christophe.geiser will become famous soon enough

      0  

    Default


    Also very interested in this - though I don't have much time to investigate now...
    I guess exporting GeoExt to ExtJs 4 will include a quite lot of work, but in the same time it should simplify substantial part of the source code (e.g. layer and treelayer sync would be provided natively by ExtJs 4).

    Given the new and exciting capabilities of Ext.draw, what would be nice is a tighter integration of draw features. Here I am especially thinking of GeoExt Vector Layer (that I use quite a bit) that could extend ExtJs sprites. It would not be trivial, but I guess not too complicated (should include a projection capabilities from KML to the map canvas, listen to zoomend and moveend events).
    A lot of fun ... That I will post once I have some working stuff
    Cheers
    C.

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Posts
    1
    Vote Rating
    0
    ivanthecrazy is on a distinguished road

      0  

    Default It's working

    It's working


    I have used ExtJS with OpenLayers, and it works.

    Here is example:

    Code:
    Ext.define('OpenlayersPanel', {
    	extend: 'Ext.panel.Panel',
    	
    	initComponent: function() {
         this.callParent(arguments);
    		 this.on('afterrender', this.afterRender, this);
    	},
    
    	afterRender: function() {
    		var wh = this.ownerCt.getSize();
    		Ext.applyIf(this, wh);
    		this.callParent(arguments);
    		/*
    		 * Creating map with OSM Layer
    		 */
    		this.map = new OpenLayers.Map(this.body.dom.id);
    		this.layer = new OpenLayers.Layer.OSM('OSM Map');
    		this.layer.setIsBaseLayer(true);
    		this.map.addLayer(this.layer);
    	}
    });

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    33
    Vote Rating
    0
    jtiai is on a distinguished road

      0  

    Default


    Above code doesn't work. I tried to figure out for a while what goes wrong and this is what happens:

    initComponent registers afterrender event to afterRender method. Documentation states: "The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component."

    Next thing defined is afterRender method! So method will be called twice creating map twice. It seem to confure OL and if you put panel somewhere, like in window or other resizeable container you will experience all kind of nasty side-effects when panning map or zooming to area after resize.

    To fix this code remove event registration from initComponent and everything works as fine.

    Hope that this helps people that have been struggling with same problem.

  6. #6
    Sencha User
    Join Date
    Oct 2007
    Location
    Iran
    Posts
    155
    Vote Rating
    0
    vahid4134 is on a distinguished road

      0  

    Default


    Im working to convert GeoExt from version 3 to version 4. But GeoExt developer dost answer to me for this work.
    sorry for my bad english
    No honor is like knowledge

  7. #7
    Sencha User
    Join Date
    Jul 2011
    Posts
    2
    Vote Rating
    0
    mathias.lin is on a distinguished road

      0  

    Default


    I'm looking for the same, actually I want to use BingMaps in my ExtJS 4.0.2a based application. Above code sample does display a map, despite that I get tons of javascript errors in Firebug when loading the app. So it doesn't look very stable and trustworthy just yet.
    I'm using the latest ExtGeo and OpenLayers lib as of today.

    For example:
    "Ext.reg is not a function" in MapPanel.js,
    "centerPx is null" in OpenLayers.js
    "members is undefined" in ext-all-debug.js
    ... amongst others.

    May the new 'sandboxing' feature in ExtJs 4 is the way to go?

  8. #8
    Sencha User
    Join Date
    Oct 2007
    Location
    Iran
    Posts
    155
    Vote Rating
    0
    vahid4134 is on a distinguished road

      0  

    Default


    In Extjs 4 calss system is change
    .
    this sample code for GeoExt.Map

    PHP Code:
    /**
     * Copyright (c) 2008-2010 The Open Source Geospatial Foundation
     * 
     * Published under the BSD license.
     * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
     * of the license.
     */

    /**
     * @include GeoExt/data/LayerStore.js
     */

    /** api: (define)
     *  module = GeoExt
     *  class = MapPanel
     *  base_link = `Ext.Panel <http://dev.sencha.com/deploy/dev/docs/?class=Ext.Panel>`_
     */
    //Ext 4 no neead namespace
    //Ext.namespace("GeoExt");

    /** api: example
     *  Sample code to create a panel with a new map:
     * 
     *  .. code-block:: javascript
     *     
     *      var mapPanel = new GeoExt.MapPanel({
     *          border: false,
     *          renderTo: "div-id",
     *          map: {
     *              maxExtent: new OpenLayers.Bounds(-90, -45, 90, 45)
     *          }
     *      });
     *     
     *  Sample code to create a map panel with a bottom toolbar in a Window:
     * 
     *  .. code-block:: javascript
     * 
     *      var win = new Ext.Window({
     *          title: "My Map",
     *          items: [{
     *              xtype: "gx_mappanel",
     *              bbar: new Ext.Toolbar()
     *          }]
     *      });
     */

    /** api: constructor
     *  .. class:: MapPanel(config)
     *   
     *      Create a panel container for a map.
     */

    Ext.define('GeoExt.panel.Map', {
        
    extend'Ext.panel.Panel',
        
        
    requires: [
        
    //    'GeoExt.data.LayerStore'
        
    ],
        
    alias'widget.gx_mappanel',
        
    alternateClassName'GeoExt.MapPanel',

        
    /** api: config[map]
         *  ``OpenLayers.Map or Object``  A configured map or a configuration object
         *  for the map constructor.  A configured map will be available after
         *  construction through the :attr:`map` property.
         */

        /** api: property[map]
         *  ``OpenLayers.Map`` or ``Object``  A map or map configuration.
         */
        
    mapnull,
        
        
    /** api: config[layers]
         *  ``GeoExt.data.LayerStore or GeoExt.data.GroupingStore or Array(OpenLayers.Layer)``
         *  A store holding records. The layers provided here will be added to this
         *  MapPanel's map when it is rendered.
         */
        
        /** api: property[layers]
         *  :class:`GeoExt.data.LayerStore`  A store containing
         *  :class:`GeoExt.data.LayerRecord` objects.
         */
        
    layersnull,

        
        
    /** api: config[center]
         *  ``OpenLayers.LonLat or Array(Number)``  A location for the map center.  If
         *  an array is provided, the first two items should represent x & y coordinates.
         */
        
    centernull,

        
    /** api: config[zoom]
         *  ``Number``  An initial zoom level for the map.
         */
        
    zoomnull,

        
    /** api: config[prettyStateKeys]
         *  ``Boolean`` Set this to true if you want pretty strings in the MapPanel's
         *  state keys. More specifically, layer.name instead of layer.id will be used
         *  in the state keys if this option is set to true. But in that case you have
         *  to make sure you don't have two layers with the same name. Defaults to 
         *  false.
         */
        
    prettyStateKeysfalse,

        
    /** api: config[extent]
         *  ``OpenLayers.Bounds or Array(Number)``  An initial extent for the map (used
         *  if center and zoom are not provided.  If an array, the first four items
         *  should be minx, miny, maxx, maxy.
         */
        
    extentnull,

        
    /** private: property[stateEvents]
         *  ``Array(String)`` Array of state events
         */
        
    stateEvents: ["aftermapmove",
                      
    "afterlayervisibilitychange",
                      
    "afterlayeropacitychange"],

        
    /** private: method[initComponent]
         *  Initializes the map panel. Creates an OpenLayers map if
         *  none was provided in the config options passed to the
         *  constructor.
         */
        
    initComponent: function(){
            if(!(
    this.map instanceof OpenLayers.Map)) {
                
    this.map = new OpenLayers.Map(
                    
    Ext.applyIf(this.map || {}, {allOverlaystrue})
                );
            }
            var 
    layers this.layers;
            if(!
    layers || layers instanceof Array) {
                
                
    this.layers Ext.create('GeoExt.data.LayerStore',{
                    
    layerslayers,
                    
    mapthis.map.layers.length this.map null
                
    });
            }
            
            if(
    typeof this.center == "string") {
                
    this.center OpenLayers.LonLat.fromString(this.center);
            } else if(
    this.center instanceof Array) {
                
    this.center = new OpenLayers.LonLat(this.center[0], this.center[1]);
            }
            if(
    typeof this.extent == "string") {
                
    this.extent OpenLayers.Bounds.fromString(this.extent);
            } else if(
    this.extent instanceof Array) {
                
    this.extent OpenLayers.Bounds.fromArray(this.extent);
            }
            
            
    this.callParent();

            
    this.addEvents(
                
    /** private: event[aftermapmove]
                 *  Fires after the map is moved.
                 */
                
    "aftermapmove",

                
    /** private: event[afterlayervisibilitychange]
                 *  Fires after a layer changed visibility.
                 */
                
    "afterlayervisibilitychange",

                
    /** private: event[afterlayeropacitychange]
                 *  Fires after a layer changed opacity.
                 */
                
    "afterlayeropacitychange"
            
    );
            
    this.map.events.on({
                
    "moveend"this.onMoveend,
                
    "changelayer"this.onLayerchange,
                
    scopethis
            
    });
        },

        
    /** private: method[onMoveend]
         *
         *  The "moveend" listener.
         */
        
    onMoveend: function() {
            
    this.fireEvent("aftermapmove");
        },

        
    /** private: method[onLayerchange]
         *  :param e: ``Object``
         *
         * The "changelayer" listener.
         */
        
    onLayerchange: function(e) {
            if(
    e.property) {
                if(
    e.property === "visibility") {
                    
    this.fireEvent("afterlayervisibilitychange");
                } else if(
    e.property === "opacity") {
                    
    this.fireEvent("afterlayeropacitychange");
                }
            }
        },

        
    /** private: method[applyState]
         *  :param state: ``Object`` The state to apply.
         *
         *  Apply the state provided as an argument.
         */
        
    applyState: function(state) {

            
    // if we get strings for state.x, state.y or state.zoom
            // OpenLayers will take care of converting them to the
            // appropriate types so we don't bother with that
            
    this.center = new OpenLayers.LonLat(state.xstate.y);
            
    this.zoom state.zoom;

            
    // set layer visibility and opacity
            
    var illayerlayerIdvisibilityopacity;
            var 
    layers this.map.layers;
            for(
    i=0l=layers.lengthi<li++) {
                
    layer layers[i];
                
    layerId this.prettyStateKeys layer.name layer.id;
                
    visibility state["visibility_" layerId];
                if(
    visibility !== undefined) {
                    
    // convert to boolean
                    
    visibility = (/^true$/i).test(visibility);
                    if(
    layer.isBaseLayer) {
                        if(
    visibility) {
                            
    this.map.setBaseLayer(layer);
                        }
                    } else {
                        
    layer.setVisibility(visibility);
                    }
                }
                
    opacity state["opacity_" layerId];
                if(
    opacity !== undefined) {
                    
    layer.setOpacity(opacity);
                }
            }
        },

        
    /** private: method[getState]
         *  :return:  ``Object`` The state.
         *
         *  Returns the current state for the map panel.
         */
        
    getState: function() {
            var 
    state;

            
    // Ext delays the call to getState when a state event
            // occurs, so the MapPanel may have been destroyed
            // between the time the event occurred and the time
            // getState is called
            
    if(!this.map) {
                return;
            }

            
    // record location and zoom level
            
    var center this.map.getCenter();
            
    state = {
                
    xcenter.lon,
                
    ycenter.lat,
                
    zoomthis.map.getZoom()
            };

            
    // record layer visibility and opacity
            
    var illayerlayerIdlayers this.map.layers;
            for(
    i=0l=layers.lengthi<li++) {
                
    layer layers[i];
                
    layerId this.prettyStateKeys layer.name layer.id;
                
    state["visibility_" layerId] = layer.getVisibility();
                
    state["opacity_" layerId] = layer.opacity == null ?
                    
    layer.opacity;
            }

            return 
    state;
        },

        
    /** private: method[updateMapSize]
         *  Tell the map that it needs to recalculate its size and position.
         */
        
    updateMapSize: function() {
            if(
    this.map) {
                
    this.map.updateSize();
            }
        },

        
    /** private: method[renderMap]
         *  Private method called after the panel has been rendered or after it
         *  has been laid out by its parent's layout.
         */
        
    renderMap: function() {
            var 
    map this.map;
            
    map.render(this.body.dom);

            
    this.layers.bind(map);

            if(
    map.layers.length 0) {
                if(
    this.center || this.zoom != null) {
                    
    // both do not have to be defined
                    
    map.setCenter(this.centerthis.zoom);
                } else if(
    this.extent) {
                    
    map.zoomToExtent(this.extent);
                } else {
                    
    map.zoomToMaxExtent();
                }
            }
        },
        
        
    /** private: method[afterRender]
         *  Private method called after the panel has been rendered.
         */
        
    afterRender: function() {
            
    this.callParent(arguments);
            if(!
    this.ownerCt) {
                
    this.renderMap();
            } else {
                
    this.ownerCt.on("move"this.updateMapSizethis);
                
    this.ownerCt.on({
                    
    "afterlayout": {
                        
    fnthis.renderMap,
                        
    scopethis,
                        
    singletrue
                    
    }
                });
            }
        },

        
    /** private: method[onResize]
         *  Private method called after the panel has been resized.
         */
        
    onResize: function() {
            
    this.callParent(arguments);
            
    this.updateMapSize();
        },
        
        
    /** private: method[onBeforeAdd]
         *  Private method called before a component is added to the panel.
         */
        
    onBeforeAdd: function(item) {
            if(
    typeof item.addToMapPanel === "function") {
                
    item.addToMapPanel(this);
            }
            
    this.callParent(arguments);
        },
        
        
    /** private: method[remove]
         *  Private method called when a component is removed from the panel.
         */
        
    remove: function(itemautoDestroy) {
            if(
    typeof item.removeFromMapPanel === "function") {
                
    item.removeFromMapPanel(this);
            }
            
    this.callParent(arguments);
        },

        
    /** private: method[beforeDestroy]
         *  Private method called during the destroy sequence.
         */
        
    beforeDestroy: function() {
            if(
    this.ownerCt) {
                
    this.ownerCt.un("move"this.updateMapSizethis);
            }
            if(
    this.map && this.map.events) {
                
    this.map.events.un({
                    
    "moveend"this.onMoveend,
                    
    "changelayer"this.onLayerchange,
                    
    scopethis
                
    });
            }
            
    // if the map panel was passed a map instance, this map instance
            // is under the user's responsibility
            
    if(!this.initialConfig.map ||
               !(
    this.initialConfig.map instanceof OpenLayers.Map)) {
                
    // we created the map, we destroy it
                
    if(this.map && this.map.destroy) {
                    
    this.map.destroy();
                }
            }
            
    delete this.map;
            
    this.callParent(arguments);
        }
        
    });

    /** api: function[guess]
     *  :return: ``GeoExt.MapPanel`` The first map panel found by the Ext
     *      component manager.
     *  
     *  Convenience function for guessing the map panel of an application. This
     *     can reliably be used for all applications that just have one map panel
     *     in the viewport.
     */
    GeoExt.MapPanel.guess = function() {
        return 
    Ext.ComponentMgr.all.find(function(o) { 
            return 
    instanceof GeoExt.panel.Map
        }); 
    }; 
    No honor is like knowledge

  9. #9
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,770
    Vote Rating
    165
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    I've got one working now in 4. Basically (and I'm summarizing a bit here) it's:

    Code:
    Ext.define('JSLibrary.panel.Olmap', {
        extend: 'Ext.panel.Panel'
        , alias: 'widget.jslolmappanel'
    
    
        // private config options
        , initComponent: function () {
    
    
            this.layout = 'fit'
    
    
            this.defMapControls = {
                layerSwitcher: new OpenLayers.Control.LayerSwitcher()
                , panZoomBar: new OpenLayers.Control.PanZoomBar()
                , zoomBox: new OpenLayers.Control.ZoomBox()
            }
    
    
            this.mapControls = this.mapControls || {}    // sets mapControls to what has been passed by the constructor or an empty object
            this.mapControls = Ext.merge(this.defMapControls, this.mapControls)
    
    
            this.defMapConfig = {
                // taken from http://apds.qintra.com/apds/javascript/qvolite/qvolitemain.js
                projection: new OpenLayers.Projection("EPSG:900913")
                , units: 'm'
                , numZoomLevels: 25
                , maxResolution: 156543.0339
                , maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34)
                , fallThrough: true
                //, allOverlays: true       // THIS SEEMS TO BREAK THE BASE LAYERS SELECTOR
            }
    
    
            this.mapConfig = this.mapConfig || {}
            this.mapConfig = Ext.merge(this.defMapConfig, this.mapConfig);
    
    
            // initComponent must always end in this.callParent();
            this.callParent(arguments);
        }
    
    
        , afterRender: function () {
    
    
            OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
            OpenLayers.Util.onImageLoadErrorColor = "transparent";
    
    
            this.mapConfig.div = this.body.dom
    
    
            this.map = new OpenLayers.Map(this.mapConfig)
            this.map.removeControl(this.map.controls[1]);
    
    
            this.mapMarkers = new OpenLayers.Layer.Markers("Markers", { displayInLayerSwitcher: false });
    
    
            var gmap = new OpenLayers.Layer.Google(
                "Google Streets"
                , {
                    numZoomLevels: 20
                }
            );
    
    
            var gsat = new OpenLayers.Layer.Google(
                "Google Satellite"
                , {
                    type: google.maps.MapTypeId.SATELLITE
                    , numZoomLevels: 22
                }
            );
    
    
            var ghyb = new OpenLayers.Layer.Google(
                "Google Hybrid"
                , {
                    type: google.maps.MapTypeId.HYBRID
                    , numZoomLevels: 20
                }
            );
    
    
            //this.map.addLayers([gmap, gsat, ghyb]);
            this.addBaseLayers([gmap, gsat, ghyb])
    
    
            this.centerLoc = this.centerLoc || this.getLonLatObject(-105.076532, 39.649783)
            this.setCenter(this.centerLoc);
            this.mapCenter;
            this.setMapCenter();
    // ..... etc.
    Basically the OLMap wants to be rendered to a div and so after the panel is rendered you instantiate the map and tell it the div it wants to render to is the body of the owning panel. Then I started wrapping the OpenLayers' functions in my panel so when you see this.addBaseLayers that ends up being a wrapper function for the OpenLayers' function for adding a layer. But that way I can just execute adding layers, markers, etc by interfacing with my custom map panel component itself.

  10. #10
    Sencha User
    Join Date
    Oct 2010
    Posts
    11
    Vote Rating
    0
    pef is on a distinguished road

      0  

    Default


    Hi Vahid !

    I rather like the way you solved this problem : starting to port GeoExt to ExtJS 4...

    Do you happen to have ported more of it ? Or did you just port MapPanel ?

    In particular, I saw that MapPanel uses data/LayerStore... did you have to port this as well ? Or did you manage to do without it ?

Similar Threads

  1. gxt-support for openlayers/gwt-openlayers
    By Mckeane in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 28 Dec 2010, 4:24 PM
  2. ExtJS and OpenLayers - problem with events
    By paweluz in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 29 Oct 2010, 1:07 AM
  3. Replies: 0
    Last Post: 15 Sep 2010, 8:22 AM
  4. OpenLayers map into a tabpanel
    By jimmy06200 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 15 Oct 2009, 2:04 AM
  5. Openlayers Map and ExtJs grid
    By organic in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 16 Jun 2009, 6:27 AM

Thread Participants: 15

Tags for this Thread

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