AnsweredAssumed Answered

Is it possible to put multiple map divs in a single page?

Question asked by jmitz on May 10, 2012
Latest reply on May 11, 2012 by DSwingley-esristaff
Is it possible to put multiple map divs in a single page? I am trying to use a small navigation map interact with a larger detail map on the same html page. The divs are of different dimensions. I am able to get both maps to appear on the page, but when I attempt to use the navigation map for an Identify it appears that the dimensions of the detail map div are being used in the navigation map's identify task.

I have a simplified example but it seems that a couple of problems pop up.

- Inconsistent firing of the onload event for the navigation map
--Triggers a disabling of map navigation for the pink map (you shouldn't be able to pan/zoom the map)
--The connection of the click event to the identify task
- Inconsistent display of the navigation map
--Sometimes the map displays with the intended extent and other times it displays with the detail map extent.
--When the map displays using the detail map extent the identify task works, but if the map displays with the intended extent the identify task returns features that are laterally compressed and are not the features that were clicked unless they are near the centerline of the map.

Here is the code for the sample application. The divNavMap is pink and the state of Illinois should fill the screen.
Additionally, you should not be able to use any of the navigation tools on the nav map.

Nothing is happening on the detail map in this example. The idea is to click on a county and zoom the detail map to the clicked county.

<!DOCTYPE html> <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title>Two Maps on a Page</title>   <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">  </head>  <body>   <div id="divBigMap" style="position:absolute;left:0px;top:0px;width: 600px;height:510px;background-color: #ccf;"></div>   <div id="divNavMap" style="position:absolute;left:610px;top:0px;width:205px;height: 300px;background-color: #fcc;"></div>   <div id="divReport" style="position:absolute;left:610px;top:310px;width:205px;height: 200px;background-color: #cfc;"></div>   <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>   <script type="text/javascript">    dojo.require("esri.map"); // Required for ESRI Mapping    dojo.require("esri.tasks.identify"); // Required for Identify task        var baseExtent = new esri.geometry.Extent( // Define base extent of map     {      xmin:-10200000,      ymin:4430000,      xmax:-9740000,      ymax:5240000,      spatialReference:{       wkid:102100      }     }    );        var polySelect = 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]));        var bigMapService = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");    var navMapService = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");    var navMapIdentifyTask = new esri.tasks.IdentifyTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");        function init(){     navMap = new esri.Map("divNavMap",      {       extent:baseExtent,       nav: false,       slider: false      }     );     navMap.addLayer(navMapService);          navMapIdentifyParams = new esri.tasks.IdentifyParameters();     navMapIdentifyParams.tolerance = 0;     navMapIdentifyParams.returnGeometry = true;     navMapIdentifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_TOP;     navMapIdentifyParams.width = navMap.width;     navMapIdentifyParams.height = navMap.height;     navMapIdentifyParams.mapExtent = baseExtent;          dojo.connect(navMap, "onLoad", function(){      navMap.disableMapNavigation();      dojo.connect(navMap, "onClick", clickCounty);     });          bigMap = new esri.Map("divBigMap",      {       extent:baseExtent      }     );     bigMap.addLayer(bigMapService);         }        function clickCounty(evt){     navMapIdentifyParams.geometry = evt.mapPoint;     navMapIdentifyTask.execute(navMapIdentifyParams, function(identifyResults){      if (identifyResults.length>0){       console.log(identifyResults[0].value);       navMap.graphics.clear();       identifyResults[0].feature.setSymbol(polySelect);       navMap.graphics.add(identifyResults[0].feature);      }      else {       console.log("No Feature");      }     });  }         dojo.addOnLoad(init);   </script>  </body> </html>

Outcomes