Scale Control Component

This Svelte component allows users to set and display the scale of a MapLibre map. It synchronizes the scale with the map's zoom level and enables users to manually input a desired scale.

Features

• Dynamically calculates the map scale based on zoom level.
• Updates the map zoom when the user inputs a scale.
• Synchronizes scale changes through a Svelte store (scaleStore).

Installation

Ensure you have the necessary dependencies:

npm install @icgcat/scalemanager

Usage

Import and use the component in your Svelte application:

<script>
    import ScaleManager from "@icgcat/scalemanager";
    let map; // Your MapLibre map instance
</script>

<ScaleManager {map} />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | map | object | null | The MapLibre GL map instance. |

How It Works

1. Scale Calculation

• The component listens for zoom events on the map.
• Uses zoomToScale(zoom, lat) to compute the scale.
• Updates the displayed scale accordingly.

2. User Input Handling

• Users can manually input a scale (e.g., 1:25000).
• The component converts this input into a zoom level and applies it to the map.

3. Store Synchronization

• scaleStore keeps the scale value in sync across components.
• When the store updates, the corresponding zoom level is applied.

Events

None.

Example

<script>
    import ScaleControl from "./ScaleControl.svelte";
    import maplibregl from "maplibre-gl";
    
    let map = new maplibregl.Map({
        container: "map",
        style: "https://demotiles.maplibre.org/style.json",
        center: [2.154, 41.387],
        zoom: 12
    });
</script>

<div id="map" style="width: 100%; height: 500px;"></div>
<ScaleControl {map} />

Styling

The component includes basic styling for the scale input and apply button. Customize as needed.

#escala {
    padding: 8px;
    background-color: #ddd;
    color: black;
    width: 120px;
    border-radius: 8px;
}
.apply {
    font-size: 0.9em;
    background-color: #ddd;
    padding: 5px;
}
.apply:hover {
    background-color: #adadad;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}

License

MIT

Author

Institut Cartogràfic i Geològic de Catalunya (ICGC)