# Rainfall and Coastal Slider

The [Rainfall and Coastal Slider](/data-fabric-manual/using-the-data-fabric/responding-to-risk-areas/rainfall-and-coastal-slider.md) is a component present in the Copenhagen RWL. It enables the selection between Pluvial or Coastal flooding layers, which can then be toggled within a slider per flooding level. In the instructions below, we will go through the necessary inputs to implement this component. 

{% hint style="info" %}
Note: The instructions below only denote how to implement the Rainfall Slider through the an app's front-end. It does not go through the back-end implementation to connect to the data storage. Please see the [SET-UP AND MANAGEMENT](/data-fabric-manual/set-up-and-management/overview.md) section for these specifications. 
{% endhint %}

{% hint style="info" %}
Note: As this component was requested specifically by the Copenhagen RWL, it was created as a standalone component only for the Copenhagen app. To utilize this implementation across multiple apps, it must be refactored into a package. See OPT's documentation on [how to create a package](https://github.com/open-pioneer/trails-starter/blob/main/docs/tutorials/HowToCreateAPackage.md) to learn more. 
{% endhint %}

For this implementation, we will reference the Copenhagen RWL app in [this repository](https://github.com/directedproject-eu/directed-pioneer/tree/main/src/apps/rwl_copenhagen/copenhagen-app). 

{% stepper %}
{% step %}

#### Add necessary files into your application

In the `controls` folder, there are four necessary files: 

* `FloodSelector.tsx`
* `FloodSlider.tsx`
* `Selector.tsx`
* `SelectorItem.tsx`

In the `services` folder, there is one necessary file:

* `FloodHandler.ts`
  {% endstep %}

{% step %}

#### Export the service

Export the service so that it is available for your app by adding it into the `services.ts` 

```typescript
// your-app/services.ts
export { FloodHandlerImpl } from "./services/FloodHandler";
```

{% endstep %}

{% step %}

#### Add the service to the app's `build.config.mjs`

It must be added under the app's `UI` and under `services`. For example: 

```typescript
// your-app/build.config.mjs
import { defineBuildConfig } from "@open-pioneer/build-support";

export default defineBuildConfig({
    styles: "./app.css",
    i18n: ["en", "de", "da"],
    ui: {
        references: [
            "app.FloodHandler"
        ]
    },
    services: {
        MainMapProvider: {
            provides: ["map.MapConfigProvider"]
        },
        FloodHandlerImpl: {
            provides: ["app.FloodHandler"],
            references: {
                mapRegistry: "map.MapRegistry"
            }
        },
    },
    properties: {
        userConfig: {}
    }
});

```

{% endstep %}

{% step %}

### Use the service in the app

This will be done in the `MapApp.tsx` . In this step we will show the minimal working code snippets. Please see the repository linked above to view the full file.

**Import the controls and service into the `MapApp.tsx`** 

```typescript
// your-app/MapApp.tsx
import { FloodSelector } from "./controls/FloodSelector";
import { FloodSlider } from "./controls/FloodSlider";
import { FloodHandler } from "./services/FloodHandler";
```

**Prep the service to be used in the app in the `export` statement, before the `return` statement**

```typescript
// your-app/MapApp.tsx
const prepSrvc = useService<FloodHandler>("app.FloodHandler");
```

**Add the `FloodSlider` and `FloodSelector` UI components into the map in the `return` statement.**&#x20;

The location of these components can be played around with, however it is recommended they are in a `MapAnchor` for best styling. For example:&#x20;

```typescript
// your-app/MapApp.tsx
<MapAnchor position="top-right" horizontalGap={5} verticalGap={5}>
    <FloodSlider/>
</MapAnchor>
<MapAnchor position="top-left" horizontalGap={5} verticalGap={5}>
    <FloodSelector/>
</MapAnchor>
```

{% 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/rainfall-and-coastal-slider.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.