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>
