Keep camera position toggling through scenes.

260
1
09-10-2019 07:12 AM
KennethLindhardt1
Occasional Contributor II

Keep camera position toggling through scenes.

Hi I was wondering if it could be possible to call the previous camera position and use it for the next scene?  In this example: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=webmap-swap it keeps the “camera” position, but if I change it to scenes, it will reload the scene from it’s start position. Thanks

<!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>
0 Kudos
1 Reply
BenElan
Esri Contributor

The workflow would be saving the value of the camera before switching maps

var cam = view.camera‍‍;

Then setting it for the new map

view.camera = cam;‍‍

I did the same thing with extent in the sample 

0 Kudos