nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

switch dynamically the container id of a map

sebastienchognard

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.

Vind meer berichten getagd met

Accepted answers

kenbuja

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>

All comments

TimWitt2

Great example Ken!

sebastienchognard

Hi Ken,

Great, it is what I want.

Thank you for the answer.

kenbuja

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

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).

JakeSkinner

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>

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.