Package - Swiper (interactive)

This page is used to showcase loading "Swiper" package with different configuration.

How to use

The swiper draws a draggable divider on the map and clips the selected layers to one side of it, letting you compare layers. Drag the handle (or focus it and use the arrow keys) to move the divider. The swiper follows map resizing automatically.

• Configuration (static): the swiper reads its orientation and its layers from the package config. Each layer entry is an object { "layerPath": "…", "side": "left" | "right" | "up" | "down" }. The side is the visible side of the divider for that layer (use left/right with a vertical bar and up/down with a horizontal bar).
• Interactive mode: when the config sets "interactive": true, open a layer's right panel and click the settings gear. A Swiper section lets you toggle the layer in/out of the swiper and pick its visible side. The side options match the current orientation. This demo is loaded with interactive enabled.
• Programmatic control: use the buttons below (or the console API) to add/remove layers and toggle orientation at runtime.

Console API examples:

const swiper = cgpv.api.getMapViewer('map1').plugins['swiper'];
swiper.activateForLayer('swipe6/lakes', 'right');
swiper.setLayerSide('swipe6/lakes', 'left');
swiper.deActivateForLayer('swipe6/lakes');
swiper.deActivateAll();
swiper.setOrientation('horizontal');

// Bulk layer updates and interactive-mode state use the controller:
const { swiperController } = cgpv.api.getMapViewer('map1').controllers;
swiperController.setLayers([{ layerPath: 'swipe6/lakes', side: 'right' }]);
swiperController.setInteractive(true);