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.
54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { CircleMarker } from 'leaflet';
|
|
import { defineProps, num, str, on } from '../core/props.ts';
|
|
import { registerChildren, unregisterChildren } from '../core/register.ts';
|
|
import {
|
|
WithProps,
|
|
buildOptions,
|
|
isPathStyleAttr,
|
|
numAttr,
|
|
updatePathStyle,
|
|
} from '../core/utils.ts';
|
|
|
|
const PROPS = defineProps({
|
|
lat: num(),
|
|
lng: num(),
|
|
radius: num(10),
|
|
color: str('#3388ff'),
|
|
weight: num(3),
|
|
opacity: num(1.0),
|
|
fill: on(),
|
|
fillColor: str('#3388ff'),
|
|
fillOpacity: num(0.2),
|
|
});
|
|
|
|
export default class LeafletCircleMarker extends WithProps(HTMLElement, PROPS) {
|
|
#obj?: CircleMarker;
|
|
|
|
connectedCallback() {
|
|
this.#obj = new CircleMarker(
|
|
[numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')],
|
|
buildOptions(this, PROPS, ['lat', 'lng']),
|
|
);
|
|
registerChildren(this, this.#obj);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
unregisterChildren(this);
|
|
this.#obj?.remove();
|
|
this.#obj = undefined;
|
|
}
|
|
|
|
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
|
|
if (!this.#obj) return;
|
|
if (name === 'lat' || name === 'lng') {
|
|
this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
|
|
} else if (name === 'radius') {
|
|
this.#obj.setRadius(numAttr(this, PROPS, 'radius'));
|
|
} else if (isPathStyleAttr(name)) {
|
|
updatePathStyle(this.#obj, name, val);
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('leaflet-circle-marker', LeafletCircleMarker);
|