# LControlScale
Add any custom component as a leaflet control-scale
# Demo








show code
<template> <l-map style="height: 350px" :zoom="zoom" :center="center"> <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer> <l-control-scale position="topright" :imperial="true" :metric="false"></l-control-scale> </l-map> </template> <script> import {LMap, LTileLayer, LControlScale} from 'vue2-leaflet'; export default { components: { LMap, LTileLayer, LControlScale }, data () { return { url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', attribution: '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors', zoom: 8, center: [47.313220, -1.319482], }; } } </script>
Copied!
# Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
position | string | - | 'topright' | |
options | Leaflet options to pass to the component constructor | object | - | {} |
maxWidth | number | - | 100 | |
metric | boolean | - | true | |
imperial | boolean | - | true | |
updateWhenIdle | boolean | - | false |
# Events
Event name | Type | Description |
---|---|---|
ready | object | Triggers when the component is ready |