AnsweredAssumed Answered

Toggle between separate webmap ids

Question asked by chricks on May 19, 2015
Latest reply on May 19, 2015 by tsellste

I want to toggle webmaps from my portal with radio buttons but I'm stuck. In IE the second map shows up underneath the original map and in chrome the top map just stays on top. How to i get the clicked map to show up on top?

 

 

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Work with Web maps</title>

 

    <script>

        var dojoConfig = {

            async: true

        };

    </script>

 

    <!-- Reference libraries. The first CSS is a Dojo theme that gives dijits a consistent style. -->

    <link rel="stylesheet" href="https://js.arcgis.com/3.13/dijit/themes/nihilo/nihilo.css">

    <link rel="stylesheet" href="https://js.arcgis.com/3.13/esri/css/esri.css">

    <style>

    </style>

    <script src="https://js.arcgis.com/3.13/"></script>

    <script>

        require([

            "esri/map",

            "esri/arcgis/utils",

            "dojo/on",

            "dojo/dom",

            "dojo/domReady!"

        ], function(

            Map, arcgisUtils, on, dom

        ) {

 

            var portalurl = "https://MYPORTALSERVER/portal/sharing/rest/content/items"

            var firstMap = "99f08409990c4ac9bf49920d111c0d25"

            var secondMap = "1508e30da03f4b2f83e6226435dfb172"

 

            on(dom.byId("map1"), "click", getFirst);

            on(dom.byId("map2"), "click", getSecond);

 

            arcgisUtils.arcgisUrl = portalurl

            var mapDeferred = arcgisUtils.createMap(firstMap, "map");

            mapDeferred.then(function(response) {

 

            });

 

            function getFirst() {

                console.log(' First clicked')

                arcgisUtils.arcgisUrl = portalurl

                var mapDeferred = arcgisUtils.createMap(firstMap, "map");

                mapDeferred.then(function(response) {

 

                });

 

            }

 

            function getSecond() {

                console.log(' Second clicked')

                arcgisUtils.arcgisUrl = portalurl

                var mapDeferred = arcgisUtils.createMap(secondMap, "map");

                mapDeferred.then(function(response) {

 

                });

 

            }

 

        });

    </script>

</head>

 

<body>

    <b><u> Choose a map to view </u></b>

    <br>

    <br>

    <input type="radio" name="RadioGroup" id="map1" checked=true><b>  Map One<br>

    <input type="radio" name= "RadioGroup"  id="map2">  Map Two<br><br>

 

        <br />

    <div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>

  </body>

 

</html>

Outcomes