Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I am trying to test following scenario:

  • A Ext.Window has one gx_mappanel item;

  • both Ext.Window and gx_mappanel are stored in variables;

  • One button is to remove gx_mappanel item from Ext.Window container;

  • The other button is to add this gx_mappanel item back to Ext.Window
    container;

However: Once mappanel is removed, it cannot be added back to its container.

The issue happens in IE browser, and the error is:

SCRIPT5007: Unable to get value of the property 'removeChild': object is null or undefined       

which is in OpenLayers.js, line 825 character 412:

render: function(div) {
    this.div = OpenLayers.Util.getElement(div);
    OpenLayers.Element.addClass(this.div, 'olMap');
    this.viewPortDiv.parentNode.removeChild(this.viewPortDiv);
    this.div.appendChild(this.viewPortDiv);
    this.updateSize();
}

Codes I've tried:

    <! DOCTYPE HTML>
<html>
    <head>
        <title>GeoExt MapPanel Example</title>

    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css" />
    <script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script>
    <script type="text/javascript" src="http://api.geoext.org/1.0/script/GeoExt.js"></script>

    <script type="text/javascript">
    var mapPanel;
    var parentWin;

    Ext.onReady(function() {
        var map = new OpenLayers.Map();
        var layer = new OpenLayers.Layer.WMS(
            "Global Imagery",
            "http://maps.opengeo.org/geowebcache/service/wms",
            {layers: "bluemarble"}
        );
        map.addLayer(layer);

        mapPanel = {
            xtype : 'gx_mappanel',
            id : 'MAP_PANEL',
            map : map,
            zoom: 6
        };

         parentWin = new Ext.Window({
            title: "GeoExt MapPanel Window",
            height: 400,
            width: 600,
            layout: "fit",
            items: [mapPanel]
        }).show();

    });

    function mapGone() {
        parentWin.removeAll();
        parentWin.doLayout();
    }

    function mapBack() {
        parentWin.add(mapPanel);
        parentWin.doLayout();
    }
    </script>
</head>
<body>
    <input type="button" onclick="mapGone()" value="map gone"></input>
    <input type="button" onclick="mapBack()" value="map back"></input>
</body>

I really wish somebody can give me some advice... appreciate in advance!!

share|improve this question
    
Why remove the map, why not just hide it? –  geographika Dec 10 '11 at 16:31
    
this is a test; my ultimate goal to have three map containers which share one map object and only one container shows while the other two hides, i.e., i want to switch map among these three containers; i don't want to define three map panels for these three containers, since this will generate three map divs; but in any case, i still think remove a map div from a container and put it back is supposed to be possible.... –  Simon Dec 11 '11 at 17:44
add comment

1 Answer 1

I think it's because removeAll() destroys div that map was rendered in, but OpenLayers still has some references to it.

Try creating new mapPanel every time you want to add it again by extracting creation code to the new function:

function getMapPanel() {        
        var map = new OpenLayers.Map();
        var layer = new OpenLayers.Layer.WMS(
            "Global Imagery",
            "http://maps.opengeo.org/geowebcache/service/wms",
            {layers: "bluemarble"}
        );
        map.addLayer(layer);

        var newMapPanel = {
            xtype : 'gx_mappanel',
            id : 'MAP_PANEL',
            map : map,
            zoom: 6
        };

     return newMapPanel;
}

then change the onReady function to:

Ext.onReady(function() {        
     parentWin = new Ext.Window({
        title: "GeoExt MapPanel Window",
        height: 400,
        width: 600,
        layout: "fit",
        items: [getMapPanel()] //NOTICE HERE IS FUNCTION CALL NOT REFERENCE TO VAR
    }).show();
});

also add handler needs updating:

function mapBack() {
    parentWin.add(getMapPanel()); //FUNCTION CALL
    parentWin.doLayout();
}

Try it, code is untested. Greetz

share|improve this answer
    
thanks a lot. it works in this case. but still issues remain: what i am trying to get is using a shared map object, which means, no matter where this mapPanel is, it should contain the latest state of map. however, by following your method, each time map object is a new instance, although in my test it keeps the latest extent from the most recent operation, some other are not stored. for example, basemap switch, each time after mappanel remove/add operation, it only goes to the default basemap. I tried a global map varibale, and only create a new mappanel... just doesn't work in IE.... –  Simon Dec 19 '11 at 20:27
    
if you need to store map settings maybe tray to hold global variable for map itself only. So it would be: –  denu Dec 19 '11 at 20:36
    
var map = null; function getMapPanel() { if (map == null) { map = new OpenLayers.Map(); var layer = new OpenLayers.Layer.WMS( "Global Imagery", "maps.opengeo.org/geowebcache/service/wms";, {layers: "bluemarble"} ); map.addLayer(layer); } var newMapPanel = { xtype : 'gx_mappanel', id : 'MAP_PANEL', map : map, zoom: 6 }; return newMapPanel; } Sorry I couldn't use CODE tags in comments :/ –  denu Dec 19 '11 at 20:43
1  
thank you again! i tried using global map variable, but it just didnt work in IE. FF&Chrome are just fine. maybe one potential solution is using global variables to store those map settings, e.g., map.baseLayer before removing the mapPanel, and then create a new map and apply these map settings into this new map when get the mapPanel back –  Simon Dec 20 '11 at 16:21
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.