You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
leaflet-components/src/components/leaflet-control-scale.ts

35 lines
1.1 KiB
TypeScript

import { Control, ControlPosition } from 'leaflet';
import { defineProps, num, str, on } from '../core/props.ts';
import { WithProps, registerWithParent } from '../core/utils.ts';
const PROPS = defineProps({
position: str('bottomleft'),
maxWidth: num(100),
metric: on(),
imperial: on(),
updateWhenIdle: on(),
});
export default class LeafletControlScale extends WithProps(HTMLElement, PROPS) {
#obj?: Control.Scale;
connectedCallback() {
this.#obj = new Control.Scale({
position: this.getAttribute('position') as ControlPosition | undefined,
maxWidth: parseInt(this.getAttribute('max-width') ?? '100', 10),
metric: !this.hasAttribute('metric') || this.getAttribute('metric') !== 'false',
imperial: !this.hasAttribute('imperial') || this.getAttribute('imperial') !== 'false',
updateWhenIdle:
!this.hasAttribute('update-when-idle') || this.getAttribute('update-when-idle') !== 'false',
});
registerWithParent(this, this.#obj);
}
disconnectedCallback() {
this.#obj?.remove();
this.#obj = undefined;
}
}
customElements.define('leaflet-control-scale', LeafletControlScale);