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

JeffMitzelfelt · ‎05-10-2012

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>

derekswingley1 · ‎05-11-2012

I would wait until the page is ready before creating your layers. Try this:

 <!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">   <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        //explicit globals       var navMap, bigMap, navMapIdentifyTask, polySelect;        function init(){         var bigExtent = new esri.geometry.Extent( // Define base extent of map           { xmin:-10200000, ymin:4430000, xmax:-9740000, ymax:5240000, spatialReference:{ wkid:102100 } }         );         var navExtent = new esri.geometry.Extent(           {"xmin":-10200100,"ymin":4418959,"xmax":-9723629,"ymax":5248715,"spatialReference":{"wkid":102100}}         );      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");      navMapIdentifyTask = new esri.tasks.IdentifyTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");      navMap = new esri.Map("divNavMap", {           extent:navExtent,           nav: false //,           // slider: false      });     dojo.connect(navMap, "onLoad", function(){      navMap.disableMapNavigation();      dojo.connect(navMap, "onClick", clickCounty);     });         navMap.addLayer(navMapService);               bigMap = new esri.Map("divBigMap", {           extent:bigExtent         });     bigMap.addLayer(bigMapService);           // add both extents to the big map         dojo.connect(bigMap, "onLoad", function() {           bigMap.graphics.add(new esri.Graphic(             navExtent,             new esri.symbol.SimpleFillSymbol().setColor([0, 0, 0, 0]).outline.setColor([0, 255, 0, 1]).setWidth(5)           ));           bigMap.graphics.add(new esri.Graphic(             bigExtent,             new esri.symbol.SimpleFillSymbol().setColor([0, 0, 0, 0]).outline.setColor([0, 0, 255, 1]).setWidth(5)           ));         });          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 = navExtent; // could also use navMap.extent    }        function clickCounty(evt){       navMapIdentifyParams.geometry = evt.mapPoint;     navMapIdentifyTask.execute(navMapIdentifyParams, function(identifyResults){      if (identifyResults.length>0){       navMap.graphics.clear();       identifyResults[0].feature.setSymbol(polySelect);       navMap.graphics.add(identifyResults[0].feature);             // set big map's extent to the extent of the clicked feature             // bigMap.setExtent(identifyResults[0].feature.geometry.getExtent(), true);             // actually...just pan the big map to the clicked feature             bigMap.centerAt(identifyResults[0].feature.geometry.getExtent().getCenter());             // and add a graphic at the new center             bigMap.graphics.clear();             bigMap.graphics.add(new esri.Graphic(               identifyResults[0].feature.geometry.getExtent().getCenter(),               new esri.symbol.SimpleMarkerSymbol().setColor("yellow")             ));      }      else {       console.log("No Feature");      }     });       }        dojo.ready(init);   </script>  </head>  <body class="claro">   <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>  </body> </html>

I also added code to show the two map extents as graphics. What you were referring to previously as the weird extent is actually the correct extent.

View solution in original post

derekswingley1 · ‎05-10-2012

This version of your code works well for me:

<!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 class="claro">
    <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
      //explicit globals
      var navMap, bigMap;

      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
        });
        dojo.connect(navMap, "onLoad", function () {
          navMap.disableMapNavigation();
          dojo.connect(navMap, "onClick", clickCounty);
        });

        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;

        bigMap = new esri.Map("divBigMap", {
          extent: baseExtent
        });
        bigMap.addLayer(bigMapService);
      }

      function clickCounty(evt) {
        console.log("click county, evt: ", 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);
            // set big map's extent to the extent of the clicked feature
            // bigMap.setExtent(identifyResults[0].feature.geometry.getExtent(), true);
            // actually...just pan the big map to the clicked feature
            bigMap.centerAt(identifyResults[0].feature.geometry.getExtent().getCenter());
            console.log("center: ", identifyResults[0].feature.geometry.getExtent().getCenter());
            // and add a graphic at the new center
            bigMap.graphics.clear();
            bigMap.graphics.add(new esri.Graphic(
            identifyResults[0].feature.geometry.getExtent().getCenter(), new esri.symbol.SimpleMarkerSymbol().setColor("yellow")));
            console.log("set center, added graphic");
          } else {
            console.log("No Feature");
          }
        });
      }

      dojo.addOnLoad(init);
    </script>
  </body>

</html>

Are you seeing issues across all browsers, or just a single browser?

JeffMitzelfelt · ‎05-10-2012

Thanks, Derek

The inconsistency seemed to occur in all the browsers I tried (FireFox, Chrome, IE9).

Here is how I wanted the NavMap to look.

Correct Extent
[ATTACH=CONFIG]14247[/ATTACH]

and if I remark line 61 // bigMap.addLayer(bigMapService); the map is consistenly displayed at this scale.

But when I leave line 61 alone I will sometimes get the correct extent but I will also get the map to display like this

Weird Extent
[ATTACH=CONFIG]14248[/ATTACH]

If the map displays in the weird extent the identify will work correctly in regard to displaying the selected polygon on the map

Weird Extent with Identify
[ATTACH=CONFIG]14249[/ATTACH]

But if the map displays in the correct extent the identify appears to return the selected polygon in the scale of the weird extent.

Correct Extent with Identify
[ATTACH=CONFIG]14250[/ATTACH]

In this example I clicked right where the selected polygon appears but as you can see it returned a polygon that was located farther east.

One other thing I noticed in firefox with the file you sent was that the first time the page was loaded I got the weird extent with the correctly functioning identify, but when I reloaded the page I got the correct extent with the weird identify.

Thanks for looking into this.

derekswingley1 · ‎05-11-2012

I would wait until the page is ready before creating your layers. Try this:

 <!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">   <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        //explicit globals       var navMap, bigMap, navMapIdentifyTask, polySelect;        function init(){         var bigExtent = new esri.geometry.Extent( // Define base extent of map           { xmin:-10200000, ymin:4430000, xmax:-9740000, ymax:5240000, spatialReference:{ wkid:102100 } }         );         var navExtent = new esri.geometry.Extent(           {"xmin":-10200100,"ymin":4418959,"xmax":-9723629,"ymax":5248715,"spatialReference":{"wkid":102100}}         );      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");      navMapIdentifyTask = new esri.tasks.IdentifyTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");      navMap = new esri.Map("divNavMap", {           extent:navExtent,           nav: false //,           // slider: false      });     dojo.connect(navMap, "onLoad", function(){      navMap.disableMapNavigation();      dojo.connect(navMap, "onClick", clickCounty);     });         navMap.addLayer(navMapService);               bigMap = new esri.Map("divBigMap", {           extent:bigExtent         });     bigMap.addLayer(bigMapService);           // add both extents to the big map         dojo.connect(bigMap, "onLoad", function() {           bigMap.graphics.add(new esri.Graphic(             navExtent,             new esri.symbol.SimpleFillSymbol().setColor([0, 0, 0, 0]).outline.setColor([0, 255, 0, 1]).setWidth(5)           ));           bigMap.graphics.add(new esri.Graphic(             bigExtent,             new esri.symbol.SimpleFillSymbol().setColor([0, 0, 0, 0]).outline.setColor([0, 0, 255, 1]).setWidth(5)           ));         });          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 = navExtent; // could also use navMap.extent    }        function clickCounty(evt){       navMapIdentifyParams.geometry = evt.mapPoint;     navMapIdentifyTask.execute(navMapIdentifyParams, function(identifyResults){      if (identifyResults.length>0){       navMap.graphics.clear();       identifyResults[0].feature.setSymbol(polySelect);       navMap.graphics.add(identifyResults[0].feature);             // set big map's extent to the extent of the clicked feature             // bigMap.setExtent(identifyResults[0].feature.geometry.getExtent(), true);             // actually...just pan the big map to the clicked feature             bigMap.centerAt(identifyResults[0].feature.geometry.getExtent().getCenter());             // and add a graphic at the new center             bigMap.graphics.clear();             bigMap.graphics.add(new esri.Graphic(               identifyResults[0].feature.geometry.getExtent().getCenter(),               new esri.symbol.SimpleMarkerSymbol().setColor("yellow")             ));      }      else {       console.log("No Feature");      }     });       }        dojo.ready(init);   </script>  </head>  <body class="claro">   <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>  </body> </html>

I also added code to show the two map extents as graphics. What you were referring to previously as the weird extent is actually the correct extent.

JeffMitzelfelt · ‎05-11-2012

Thanks, Derek

That looks to be exactly what I want.

I was playing with your code and see that my real issue was using a single extent for both maps. I assumed that when the map was created the extent was copied to the map but it appears that the extent is an object which is used by the map. When I created the second map with the same extent the extent object was modified to satisfy the need of the second map which impacted the first map because it was using the same extent object. Thanks for you help on this.

Final answer is "Yes, multiple map divs can be used on a page but be sure that all the objects that are required to be used by each map are independent!"

derekswingley1 · ‎05-11-2012

I assumed that when the map was created the extent was copied to the map but it appears that the extent is an object which is used by the map. When I created the second map with the same extent the extent object was modified to satisfy the need of the second map which impacted the first map because it was using the same extent object.

Yep, you're right, each map instance needs its own extent.

Thanks for you help on this.

Final answer is "Yes, multiple map divs can be used on a page but be sure that all the objects that are required to be used by each map are independent!"

Glad to help! Can you mark my post an answer?