Keep camera position toggling through scenes.
<!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.12</title>
<style>
html,
body {
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;
}
.active-map {
color: #fff;
background-color: rgba(34, 111, 14, 1);
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require(["esri/views/MapView",
"esri/WebMap",
"esri/WebScene",
"esri/views/SceneView"],
function(MapView, WebMap, WebScene, SceneView) {
var webmapids = [
"bcdc2128a45344249bce27fbfdd8170b",
"20ec0808b0df4d1baa9fae9813c066bb",
"1f57caeb1caf4a13a240ca2346858ba2"
];
/************************************************************
* Create multiple WebMap instances
************************************************************/
var webmaps = webmapids.map(function(webmapid) {
return new WebScene({
portalItem: {
// autocasts as new PortalItem()
id: webmapid
}
});
});
/************************************************************
* Initialize the View with the first WebMap
************************************************************/
var view = new SceneView({
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 esri-widget">
<div class="btns">
<div class="btn-switch active-map" data-id="0">Missing Migrants</div>
<div class="btn-switch" data-id="1">Refugee Routes</div>
<div class="btn-switch" data-id="2">2015 European Sea Arrivals</div>
</div>
</section>
<div id="viewDiv" class="esri-widget"></div>
</body>
</html>
