Basemap Selection Component

This package provides a basemap selection component for MapLibre-based applications. It allows users to switch between different basemap styles with a simple UI.

Installation

``sh
npm install @icgcat/basemap
`

Usage

Import and use the component in your Svelte project:

`svelte

`

Props

| Prop | Type | Default | Description |
|----------------|--------|---------|-------------|
| map | Object | null | The MapLibre instance where the basemap will be applied. |
| baseLayers | Array | Predefined set | List of available basemaps with labels, images, and URLs. |
| textColor | String | "white" | Text color for labels in the basemap selection. |
| hoverColor | String | "rgb(255, 238, 0)" | Highlight color when hovering over a basemap option. |
| onChange | Function | null | Callback function triggered when a basemap is changed. |
| backgroundColor | String | "transparent" | Background color of the basemap selection panel. |
| fontSize | String | "12px" | Font size for basemap labels. |

Available Basemaps

The component includes the following basemaps by default:

- Topographic
- Hybrid Orthophoto Map
- Boundary Map
- Road Network
- Dark Map
- Urban Areas
- Shaded Relief
- Protected Areas
- Standard Orthophoto Map
- Geological Information Map

Each basemap is represented with an image preview and can be switched dynamically.

Customization

You can pass a custom list of basemaps via the baseLayers prop:

`svelte

`

You can also customize the appearance:

`svelte

``

License

MIT

---

For more details, visit ICGC.