This question is a continuation of my last post. I'm attempting to combine Swipe and Map.
In my sample, my goal is to initialize on the 1862 webmap with the basemap and vector tile layer as the leading swipe layer. The webmaps should be the trailing swipe layers. Then, I want the ability to click back and forth between the other webmap(s) while also being able to swipe. Right now, the swipe doesn't mesh with the webmaps. When I click one of the buttons I get:
Uncaught (in promise) "No layerview has been found for the layer"
What's confusing me is that components do not use views as far as I understand. Here's how I did it with the current JS SDK:
<script>
require(["esri/Map",
"esri/views/MapView",
"esri/layers/ImageryLayer",
"esri/widgets/Swipe",
"esri/WebMap",
], (Map, MapView, ImageryLayer, Swipe, WebMap) => {
//webmap IDs
/************************************************************
* Create multiple WebMap instances
************************************************************/
const webmapids = [
"e67a8eb6768641c19d4a7c5df394dbf4", //DTM
"bfc5b0242adb42bfb0fc41e54497dfc8", //DSM
"6ed3d2e495db4e859a73d2a32ce3d576", //HEDEM
"d653b18bc941458491e06e657e10f393", //Intensity
"a9ab25b1c7204764b2fabad6fc7a4635", //IR
"e6bab92ebc524072a3305ec8f128e8f8", //Soil
"2f9acebfb8db4e10bb6dddab8d3239c7", //ClosedDepressions
];
const webmaps = webmapids.map((webmapid) => {
return new WebMap({
portalItem: {
// autocasts as new PortalItem()
id: webmapid,
}
});
});
// add image services used in the swipe map
const imagery2024 = new ImageryLayer({
url: "https://gis.willcountyillinois.com/portal/sharing/servers/871887c09c234de98109ed4033f842ad/rest/services/Orthoimagery/Orthos_2024_3IN/ImageServer",
});
webmaps[0].add(imagery2024);
/************************************************************
* Initialize the View with the first WebMap
************************************************************/
const view = new MapView({
map: webmaps[0],
container: "viewDiv",
constraints: {
maxScale: 500,
minScale: 300000,
}
});
console.log('construct the view')
//use promise function.when to add the imagery layer after the webmap group layer, hence, rendering it over the group layers
view.when(function () {
console.log('show the view')
webmaps[0].add(imagery2024);
});
// create a new Swipe widget
let swipe = new Swipe({
leadingLayers: [imagery2024],
// trailingLayers: [imagery2024],
position: 45, // set position of widget to 35%
dragLabel: "drag left or right",
view: view,
});
// add the widget to the view
view.ui.add(swipe);
/************************************************************
* On a button click, change the map of the View
************************************************************/
document.querySelector(".btns").addEventListener("click", (event) => {
const id = event.target.getAttribute("data-id");
if (id) {
const webmap = webmaps[id];
view.map = webmap;
webmap.add(imagery2024);
// promise
webmap.when(function () {
webmap.add(imagery2024);
console.log("View loaded");
}, function (error) {
});
const nodes = document.querySelectorAll(".btn-switch");
for (let idx = 0; idx < nodes.length; idx++) {
const node = nodes[idx];
const mapIndex = node.getAttribute("data-id");
if (mapIndex === id) {
node.classList.add("active-map");
} else {
node.classList.remove("active-map");
}
}
}
});
});
</script>
