Toggle between separate webmap ids

3289
1
05-19-2015 09:33 AM
ChadRicks
New Contributor III

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>

0 Kudos
1 Reply
TomSellsted
MVP Regular Contributor

Chad,

Had you looked at the sample on this page?  Fade effect using ArcGIS.com web maps | ArcGIS API for JavaScript

It shows how to change between different web maps based on a click event similar to yours.

Regards,

Tom