This sample uses multiple Swipe widgets to create an seemingly infinite scroll between different Educational Attainment layers in Mexico.
How it works
For each layer loaded from a WebMap, a swipe widget is created, and the layer is added to the trailing.
// create a swipe widget for each layer
swipes = layers.map((layer) => {
return new Swipe({
view: view,
disabled: false,
position: 100,
direction: "vertical",
trailingLayers: [layer],
visibleElements: {
handle: false,
divider: true
}
});
});When the user scrolls through the app, the leading and trailing update as the Swipe widget's position changes to achieve the infinite scroll effect.
// To achieve this infinite scroll effect we need to swap the layers:
// The layer starts at the bottom, the divider goes up.
// Then the next layer starts to show up, so we put back the divider at the bottom and swap the layers.
if (position < 0 && swipe.trailingLayers.length) {
swipe.leadingLayers.addMany(swipe.trailingLayers);
swipe.trailingLayers.removeAll();
} else if (position >= 0 && swipe.leadingLayers.length) {
swipe.trailingLayers.addMany(swipe.leadingLayers);
swipe.leadingLayers.removeAll();
}