# 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 |