I'm trying to swap web maps in the same view using javascript api 4.10. I can get it to work using javascript 4.0. I'm using portal 4.5. The map will come up and I can click the second button and it will go to the second map although it is not centered like in the map viewer and when I try to click the button that opened originally... nothing happens. Please let me know what I may be doing wrong. Thanks in advance.
Below is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Swap web maps in the same view - 4.10</title>
<style>
html,
body {
font-family: sans-serif;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#viewDiv {
position: absolute;
right: 0;
left: 0;
top: 60px;
bottom: 0;
}
.header {
position: absolute;
top: 0;
width: 100%;
height: 10%;
}
.btns {
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: auto;
}
.btn-switch {
flex-grow: 4;
background-color: rgba(34, 111, 14, 0.5);
color: #FFF;
margin: 1px;
width: 50%;
padding: 20px;
overflow: auto;
text-align: center;
cursor: pointer;
font-size: 0.7em;
}
.active-map {
color: #fff;
background-color: rgba(34, 111, 14, 1);
}
</style>
<script>
require([
"esri/views/MapView",
"esri/WebMap",
"esri/config",
"esri/request"
], function(
MapView, WebMap, esriConfig, esriRequest
) {
var webmapids = [
"6a8590710dd847ef967b8b45e8439bb4",
"3c4662ffe4734f96a610ca4e971d836f",
"54204c30cf6b4af79f4b228517a9e82f"
];
/************************************************************
* Create multiple WebMap instances
************************************************************/
esriConfig.portalUrl = "https://xyz.yyyy.com/arcgis/" var webmaps = webmapids.map(function(webmapid) {
return new WebMap({
portalItem: { // autocasts as new PortalItem()
id: webmapid
}
});
});
/************************************************************
* Initialize the View with the first WebMap
************************************************************/
var view = new MapView({
map: webmaps[0],
container: "viewDiv"
});
document.querySelector(".btns").addEventListener("click", function(
event) {
/************************************************************
* On a button click, change the map of the View
************************************************************/
var id = event.target.getAttribute("data-id");
if (id) {
var webmap = webmaps[id];
view.map = webmap;
var nodes = document.querySelectorAll(".btn-switch");
for (var idx = 0; idx < nodes.length; idx++) {
var node = nodes[idx];
var mapIndex = node.getAttribute("data-id");
if (mapIndex === id) {
node.classList.add("active-map");
} else {
node.classList.remove("active-map");
}
}
}
});
});
</script>
</head>
<body>
<section class="header">
<div class="btns">
<div class="btn-switch active-map" data-id="0">Button 1</div>
<div class="btn-switch" data-id="1">Button 2</div>
<div class="btn-switch" data-id="2">Button 3</div>
</div>
</section>
<div id="viewDiv"></div>
</body>
</html>
