🧩 LControlScale

A simple scale control that shows the scale of the current center of screen in metric (m/km) and imperial (mi/ft) systems.

🧪 Demo

<script setup lang="ts">
import { LControlScale, LMap, LTileLayer } from '@maxel01/vue-leaflet'
</script>

<template>
    <LMap ref="map" :zoom="2" :center="[47.41322, -1.219482]">
        <LTileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            layer-type="base"
            name="OpenStreetMap"
        />
        <LControlScale position="bottomleft" />
    </LMap>
</template>

⚙️ Props

Prop name	Description	Type	Reactive	Default	Required
maxWidth	Maximum width of the control in pixels. The width is set dynamically to show round values (eg. 100, 200, 500).	number	initOnly	-	false
metric	Whether to show the metric scale line (m/km).	boolean	initOnly	-	false
imperial	Whether to show the imperial scale line (mi/ft).	boolean	initOnly	-	false
updateWhenIdle	If true, the control is updated on moveend, otherwise it's always up-to-date (updated on move).	boolean	initOnly	-	false

🔗 Inherited props

from ControlAbstractProps

Prop name	Description	Type	Reactive	Default	Required
position	The position of the control (one of the map corners). Possible values are topleft, topright, bottomleft or bottomright.	ControlPosition	true	-	false

from ComponentProps

Prop name	Description	Type	Reactive	Default	Required
options	Leaflet options to pass to the component constructor.	T	initOnly	-	false

📡 Emits

Event	Arguments	Description
ready	T	Triggers when the component is ready

🧭 Exposes

Name	Type	Description
leafletObject	Ref<Control.Scale | undefined>	The underlying Leaflet instance. Can be used to directly interact with the Leaflet API (e.g. calling methods or accessing internal state).