switch dynamically the container id of a map

sebastienchognard · ‎01-05-2016

Hi, is it possible to dynamically switch the container id of a map? For example, if we create two div container (div1 and div2), can we create a button in order to show the same map on the div1 or on the div2.

KenBuja · ‎01-05-2016

I was just preparing an alternative to Jake's examples, showing how to move a existing map from div to div which maintains any changes to the extent.

Edit fiddle - JSFiddle

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Sample Map</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
    <style>
        html, body {
            height: 99%;
            width: 99%;
        }

        #divMap{
            height: 100%;
        }

        #leftPane {
            width: 48%;
        }

        #header {
            border: solid #C0C0C0 2px;
            background-color: #C0C0C0;
        }

        .div1ButtonStyle {
            width: 16px;
            height: 16px;
        }

        .div2ButtonStyle {
            width: 16px;
            height: 16px;
        }
    </style>

    <script src="http://js.arcgis.com/3.15/"></script>
    <script>

        var map;
        require([
          "dojo/parser", "esri/map", "dojo/on", "dojo/dom-construct", "dijit/Toolbar", "dijit/form/Button",
          "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dojo/domReady!"
        ], function (
          parser, Map, on, domConstruct

        ) {
            parser.parse();

            var map = new Map("divMap", {
                center: [-80.734, 28.297],
                zoom: 10,
                basemap: "topo"
            });

            on(dojo.byId("div1Button"), "click", function () {
                domConstruct.place("divMap", "rightPane");
            })

            on(dojo.byId("div2Button"), "click", function () {
                domConstruct.place("divMap", "leftPane");
            })


        });
    </script>

</head>
<body class="tundra">
    <div id="content"
         data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline', gutters:true"
         style="width: 100%; height: 100%; margin: 0;">
        <div id="header"
             data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
            <div id="navToolbar" data-dojo-type="dijit/Toolbar">
                <div data-dojo-type="dijit/form/Button" id="div1Button" data-dojo-props="iconClass:'div1ButtonStyle'">Show Map in Right Pane</div>
                <div data-dojo-type="dijit/form/Button" id="div2Button" data-dojo-props="iconClass:'div2ButtonStyle'">Show Map in Left Pane</div>
            </div>
        </div>

        <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
            <div id="divMap"></div>
        </div>

        <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
        </div>

    </div>
</body>

</html>

View solution in original post

JakeSkinner · ‎01-05-2016

Hi Sebastien,

Yes, this is possible. Below is an example:

Edit fiddle - JSFiddle

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Sample Map</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/tundra/tundra.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
  <style>
    html, body {
      height: 99%;
      width: 99%;      
    }

    #leftPane {
      width: 48%;
    }

    #header{
      border: solid #C0C0C0 2px;
      background-color:#C0C0C0
    }

    .div1ButtonStyle {
        width: 16px;
        height: 16px;
      }

    .div2ButtonStyle {
        width: 16px;
        height: 16px;
     }

  </style>
  
  <script src="http://js.arcgis.com/3.15/"></script>
  <script>

    var map;
    require([
      "dojo/parser", "esri/map",  "dojo/on", "dijit/Toolbar","dijit/form/Button",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dojo/domReady!"
    ], function(
      parser, Map, on
      
    ) {
      parser.parse();
      
      on(dojo.byId("div1Button"), "click", function(){
          var map = new Map("leftPane", {
            center: [-80.734, 28.297],
            zoom: 10,
            basemap: "topo"
          });

          document.getElementById("rightPane").innerHTML = "";   
      })
      
      on(dojo.byId("div2Button"), "click", function(){
          var map = new Map("rightPane", {
            center: [-80.734, 28.297],
            zoom: 10,
            basemap: "topo"
          }); 
          
          document.getElementById("leftPane").innerHTML = "";    
      })      
      
     
    });
  </script>

</head>
<body class="tundra">
<div id="content"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">
  <div id="header"
       data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
      <div id="navToolbar" data-dojo-type="dijit/Toolbar">
        <div data-dojo-type="dijit/form/Button" id="div1Button"  data-dojo-props="iconClass:'div1ButtonStyle'">Show Map in Div1</div>
        <div data-dojo-type="dijit/form/Button" id="div2Button" data-dojo-props="iconClass:'div2ButtonStyle'">Show Map in Div2</div>
      </div>
  </div>
    
  <div id="leftPane" data-dojo-type="dijit/layout/ContentPane"  data-dojo-props="region:'left'">
  </div>
  
  <div id="rightPane"  data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">    
  </div>

</div>
</body>

</html>

sebastienchognard · ‎01-05-2016

Hi Jake,

Thanks for the answer, but I would like to switch the same map between the div. On your example you create a new map each time you push a button. I want to do as if you create a map on two div in the same time and with the button you control which one is on (therefore the other one is off).

KenBuja · ‎01-05-2016

I was just preparing an alternative to Jake's examples, showing how to move a existing map from div to div which maintains any changes to the extent.

Edit fiddle - JSFiddle

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Sample Map</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
    <style>
        html, body {
            height: 99%;
            width: 99%;
        }

        #divMap{
            height: 100%;
        }

        #leftPane {
            width: 48%;
        }

        #header {
            border: solid #C0C0C0 2px;
            background-color: #C0C0C0;
        }

        .div1ButtonStyle {
            width: 16px;
            height: 16px;
        }

        .div2ButtonStyle {
            width: 16px;
            height: 16px;
        }
    </style>

    <script src="http://js.arcgis.com/3.15/"></script>
    <script>

        var map;
        require([
          "dojo/parser", "esri/map", "dojo/on", "dojo/dom-construct", "dijit/Toolbar", "dijit/form/Button",
          "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer", "dojo/domReady!"
        ], function (
          parser, Map, on, domConstruct

        ) {
            parser.parse();

            var map = new Map("divMap", {
                center: [-80.734, 28.297],
                zoom: 10,
                basemap: "topo"
            });

            on(dojo.byId("div1Button"), "click", function () {
                domConstruct.place("divMap", "rightPane");
            })

            on(dojo.byId("div2Button"), "click", function () {
                domConstruct.place("divMap", "leftPane");
            })


        });
    </script>

</head>
<body class="tundra">
    <div id="content"
         data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline', gutters:true"
         style="width: 100%; height: 100%; margin: 0;">
        <div id="header"
             data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
            <div id="navToolbar" data-dojo-type="dijit/Toolbar">
                <div data-dojo-type="dijit/form/Button" id="div1Button" data-dojo-props="iconClass:'div1ButtonStyle'">Show Map in Right Pane</div>
                <div data-dojo-type="dijit/form/Button" id="div2Button" data-dojo-props="iconClass:'div2ButtonStyle'">Show Map in Left Pane</div>
            </div>
        </div>

        <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
            <div id="divMap"></div>
        </div>

        <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
        </div>

    </div>
</body>

</html>

sebastienchognard · ‎01-05-2016

Hi Ken,

Great, it is what I want.

Thank you for the answer.

TimWitt2 · ‎01-05-2016

Great example Ken!