map running on two seperate div's

PramodHarithsa1 · ‎08-29-2012

I have a situation wherein i show map in a Div and i have a maximize button.
On click of maximize i have to show a different set of div's which contain gis functionalities like legend and navigation tool bar.
and i have different set of functionalities for this map. and on click of close button the control has to be transferred to the original div containing map.

I have attached an image to change this concept.

Now i have different scripts for both and different pages as well.
Both running as i want. now the thing is integrating them.
when i click on maximize i will have to call its init function since dojo.ready() doesn't fires.
and on closing this div the original div doesn't responds.

How do i do this?
Any suggestions?

StephenLead · ‎08-29-2012

Would it be an option to have a single map DIV, and hide the other DIVs until you need them?

This sounds a whole lot simpler than trying to transfer the state from one DIV to another.

Steve

PramodHarithsa1 · ‎08-30-2012

Would it be an option to have a single map DIV, and hide the other DIVs until you need them?

This sounds a whole lot simpler than trying to transfer the state from one DIV to another.

Steve

Now that is not possible since i have lot of other div's(not related to GIS) on page and while running an advanced view like popup i want to restrict access to the rest of the defined controls.
The man problem comes with Dojo loader.
Since it is loaded twice it creates lot of errors.
How do i resolve this conflict.

what i have done is i have both set of div's in the same page and i have hidden as you have mentioned but i would need a different div to show map again.

PramodHarithsa1 · ‎09-03-2012

i just wrote a simple code to run two map's

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/esri/dijit/css/Popup.css"/> 
     <script type="text/javascript">
         var djConfig = {
             parseOnLoad: true
         }; 
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"> 
    </script> 
    
    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("esri.dijit.Popup");

        var basicMapObj, advancedMapObj;
        function mapInitialization() {

            var popup = new esri.dijit.Popup({
                fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]))
            }, dojo.create("div"));

            var startExtent = new esri.geometry.Extent({ "xmin": -10858450, "ymin": 3300000, "xmax": -10858500, "ymax": 3365000, "spatialReference": { "wkid": 102100} });

            basicMapObj = new esri.Map("basicMap", { extent: startExtent, infoWindow: popup });
            advancedMapObj = new esri.Map("advancedMap", { extent: startExtent, infoWindow: popup });

            var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer";
            var dynamicUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer";
            var basemapLayer = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl, { "id": "baseMap" });
            var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynamicUrl, { "id": "myMap", opacity: 0.80 });
            basicMapObj.addLayers([basemapLayer, dynamicLayer]);
            advancedMapObj.addLayers([basemapLayer, dynamicLayer]);
        }
        dojo.addOnLoad(mapInitialization);
    </script>
</head>
<body>
<div id="basicMap" style="height:100%; width:40%;display:inline-block"></div>
<div id="advancedMap" style="height:100%; width:40%;display:inline-block"></div>
</body>
</html>

Link to code http://jsfiddle.net/jH9Wb/
Some strange behaviour. Only the second object loads.
Slider of first map controls the second.
Where am i going wrong?

StephenLead · ‎09-04-2012

I'm not sure why you're seeing that problem, but after some experimentation I found that this works:

var basemapLayer = new esri.layers.ArcGISTiledMapServiceLayer(...
var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer(...
var basemapLayer2 = new esri.layers.ArcGISTiledMapServiceLayer(...
var dynamicLayer2 = new esri.layers.ArcGISDynamicMapServiceLayer(...

basicMapObj.addLayers([basemapLayer, dynamicLayer]);
advancedMapObj.addLayers([basemapLayer2, dynamicLayer2]);

ie, create separate instances of the layers in each map.

Steve

PramodHarithsa1 · ‎09-04-2012

I'm not sure why you're seeing that problem, but after some experimentation I found that this works:

var basemapLayer = new esri.layers.ArcGISTiledMapServiceLayer(...
var dynamicLayer = new esri.layers.ArcGISDynamicMapServiceLayer(...
var basemapLayer2 = new esri.layers.ArcGISTiledMapServiceLayer(...
var dynamicLayer2 = new esri.layers.ArcGISDynamicMapServiceLayer(...

basicMapObj.addLayers([basemapLayer, dynamicLayer]);
advancedMapObj.addLayers([basemapLayer2, dynamicLayer2]);

ie, create separate instances of the layers in each map.

Steve

That worked initially..
But its not sorted out completely.
I added two separate onclick events. If i click on first map the infowindow appears on second
http://jsfiddle.net/jH9Wb/2/

and ZoomIn, Zoom Out on scroll they work differently for both maps.
What is the actual issue?

PramodHarithsa1 · ‎09-04-2012

I found some success in resolving quite a few issues
Here goes the code http://jsfiddle.net/3REWd/
But still there exists issue with tracking mapPoint onclick.. I see an offset when the infoWindow appears.

Any Hint to resolve this?