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

npm install @icgcat/basemap

Usage

Import and use the component in your Svelte project:

<script>
    import Basemap from "@icgcat/basemap";
    import maplibregl from "maplibre-gl";
    
    let map;
    
    function handleBasemapChange(selectedBasemap) {
        console.log("Basemap changed to:", selectedBasemap);
    }
    
    onMount(() => {
        map = new maplibregl.Map({
            container: "map",
            style: "https://geoserveis.icgc.cat/contextmaps/icgc_mapa_base_topografic.json",
            center: [1.9, 41.7],
            zoom: 8
        });
    });
</script>

<div id="map" style="width: 100%; height: 500px;"></div>
<Basemap {map} onChange={handleBasemapChange} backgroundColor="black" fontSize="14px" />

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:

<Basemap {map} baseLayers={[{ id: 10, label: "Custom Basemap", url: "https://example.com/custom-style.json" }]} />

You can also customize the appearance:

<Basemap {map} textColor="black" hoverColor="blue" backgroundColor="gray" fontSize="16px" />

License

MIT

For more details, visit ICGC.