# Adding the LayerSwipe

<div align="center"><figure><img src="/files/VUT2dVhKcoJ5Bw9zPkPU" alt="The LayerSwipe Component" width="249"><figcaption><p>The LayerSwipe control panel</p></figcaption></figure></div>

The [LayerSwipe](/data-fabric-manual/using-the-data-fabric/responding-to-risk-areas/layerswipe.md) enables the direct comparison between two different map layers via the "swiping" feature, whereby users can visually split the map interface between two different layer sources. This makes comparison between layers simple, as users do not need to toggle layers on and off in the [Operational Layers ](/data-fabric-manual/using-the-data-fabric/responding-to-risk-areas/viewing-modeled-results.md#operational-layers-panel)(or [TOC via OPT](https://github.com/open-pioneer/trails-openlayers-base-packages/tree/main/src/packages/toc)) in order to see the difference between them.&#x20;

<figure><img src="/files/ngThnMXqTLzZ6kD9ctse" alt="" width="563"><figcaption><p>The LayerSwipe activated in the Danube RWL, comparing pluvial flooding scenarios</p></figcaption></figure>

Please follow the steps below for how to add the LayerSwipe to your app.&#x20;

### Adding the LayerSwipe to your App

{% stepper %}
{% step %}

#### Check that the “layerswipe” package is present in the packages folder

Within this package folder, there should be a file named `useLayerSwipe.ts`

This file contains the necessary code for adding the LayerSwipe feature to your application. If this file is present, move on to the next step; if not, please[ find this file under packages in the directed-pioneer repository](https://github.com/directedproject-eu/directed-pioneer/tree/main/src/packages/layerswipe) and copy it into the packages folder.&#x20;
{% endstep %}

{% step %}

#### Navigate to `MapApp.tsx` in your application's root folder&#x20;

This file contains all the main code for the front-end of your OPT application.
{% endstep %}

{% step %}

#### Add the LayerSwipe code into the `MapApp.tsx`

Within `export function MapApp()` , before the `return` statement, add the following code snippet:&#x20;

```typescript
// your-app/MapApp.tsx 

//////////////////
/// LayerSwipe ///
/////////////////
const [selectedLeftLayer, setSelectedLeftLayer] = useState<string | null>(null);
const [selectedRightLayer, setSelectedRightLayer] = useState<string | null>(null);
const [visibleAvailableLayers, setVisibleAvailableLayers] = useState<SimpleLayer[]>([]); //filter for visible layers

useEffect(() => {
   if (!mapModel.map) return;


   const map = mapModel.map.olMap;
   const allLayers = mapModel.map.layers.getRecursiveLayers() as SimpleLayer[];


   const updateVisibleLayers = () => {
       const visibleLayers = allLayers.filter((layer) => {
           const ol = layer.olLayer;
           return ol?.getVisible?.() === true && !(ol instanceof Group);
       });
       setVisibleAvailableLayers(visibleLayers);
   };

   updateVisibleLayers();

   const eventKeys: EventsKey[] = allLayers
       .map((layer) => {
           const olLayer = layer.olLayer;
           if (!olLayer || typeof olLayer.on !== "function") return null;
           return olLayer.on("change:visible", () => {
               updateVisibleLayers();
               handleSwipeUpdate();
           });
       })
       .filter((k): k is EventsKey => !!k);


   let swipe: Swipe | null = null;

   const removeSwipe = () => {
       if (swipe) {
           map.removeControl(swipe);
           swipe = null;
       }
   };


   const addSwipe = (leftLayer: Layer, rightLayer: Layer) => {
       removeSwipe();
       swipe = new Swipe({
           layers: [leftLayer],
           rightLayers: [rightLayer],
           position: 0.5,
           orientation: "vertical",
           className: "ol-swipe"
       });
       map.addControl(swipe);
   };

   const handleSwipeUpdate = () => {
       if (!selectedLeftLayer || !selectedRightLayer) {
           removeSwipe();
           return;
       }


       const leftLayer = (mapModel.map.layers.getLayerById(selectedLeftLayer) as SimpleLayer)
           ?.olLayer as Layer;
       const rightLayer = (mapModel.map.layers.getLayerById(selectedRightLayer) as SimpleLayer)
           ?.olLayer as Layer;


       if (!leftLayer || !rightLayer) {
           removeSwipe();
           return;
       }


       if (leftLayer.getVisible() && rightLayer.getVisible()) {
           addSwipe(leftLayer, rightLayer);
       } else {
           removeSwipe();
       }
   };

   handleSwipeUpdate();

   return () => {
       eventKeys.forEach(unByKey);
       removeSwipe();
   };
}, [mapModel, selectedLeftLayer, selectedRightLayer]);

```

{% endstep %}

{% step %}

#### Add the LayerSwipe component into the map container

In the `return`  statement, add the component and styling. For example, we can place the component within a `MapAnchor`  (see OPT documentation for further details on the [map package](https://github.com/open-pioneer/trails-openlayers-base-packages/tree/main/src/packages/map#map-anchor-component)):&#x20;

```typescript
// your-app/MapApp.tsx
<Flex direction="row" gap={4} p={4}>
    <Select
        placeholder="Select Left Layer"
        value={selectedLeftLayer ?? ""}
        onChange={(e) =>
            setSelectedLeftLayer(e.target.value)
        }
    >
        {visibleAvailableLayers.map((layer) => (
            <option key={layer.id} value={layer.id}>
                {layer.title || layer.id}
            </option>
        ))}
    </Select>
    
    <Select
        placeholder="Select Right Layer"
        value={selectedRightLayer ?? ""}
        onChange={(e) =>
            setSelectedRightLayer(e.target.value)
        }
    >
        {visibleAvailableLayers.map((layer) => (
            <option key={layer.id} value={layer.id}>
                {layer.title || layer.id}
            </option>
        ))}
    </Select>
</Flex>
```

{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://directed-eu.gitbook.io/data-fabric-manual/adding-and-developing-features/adding-the-layerswipe.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.