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.
79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import { Icon, Marker } from 'leaflet';
|
|
import { defineProps, num, str, on } from '../core/props.ts';
|
|
import { LeafletIconChangedEvent, registerChildren, unregisterChildren } from '../core/register.ts';
|
|
import { WithProps, buildAttrMap, buildOptions, numAttr, setLayerAttr } from '../core/utils.ts';
|
|
|
|
const PROPS = defineProps({
|
|
lat: num(),
|
|
lng: num(),
|
|
title: str(),
|
|
alt: str(),
|
|
draggable: on(),
|
|
opacity: num(1.0),
|
|
zIndexOffset: num(),
|
|
});
|
|
|
|
const PROP_BY_ATTR = buildAttrMap(PROPS);
|
|
|
|
export class LeafletMarker extends WithProps(HTMLElement, PROPS) {
|
|
#obj?: Marker;
|
|
#syncing = false;
|
|
|
|
connectedCallback() {
|
|
this.#obj = new Marker(
|
|
[numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')],
|
|
buildOptions(this, PROPS, ['lat', 'lng']),
|
|
);
|
|
this.#obj.on('dragend move', this.#onChange, this);
|
|
registerChildren(this, this.#obj);
|
|
this.addEventListener('icon-changed', this.#onIconChanged);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
this.#obj?.off('dragend move', this.#onChange, this);
|
|
this.removeEventListener('icon-changed', this.#onIconChanged);
|
|
unregisterChildren(this);
|
|
this.#obj?.remove();
|
|
this.#obj = undefined;
|
|
}
|
|
|
|
get leafletObject() {
|
|
return this.#obj;
|
|
}
|
|
|
|
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
|
|
if (!this.#obj || this.#syncing) return;
|
|
if (name === 'lat' || name === 'lng') {
|
|
this.#obj.setLatLng([numAttr(this, PROPS, 'lat'), numAttr(this, PROPS, 'lng')]);
|
|
} else if (name === 'draggable') {
|
|
if (val !== null) this.#obj.dragging?.enable();
|
|
else this.#obj.dragging?.disable();
|
|
} else if (name === 'title') {
|
|
const el = this.#obj.getElement();
|
|
if (el) (el as HTMLImageElement).title = val ?? '';
|
|
} else if (name === 'alt') {
|
|
const el = this.#obj.getElement();
|
|
if (el) (el as HTMLImageElement).alt = val ?? '';
|
|
} else {
|
|
setLayerAttr(this.#obj!, PROPS, PROP_BY_ATTR, name, val);
|
|
}
|
|
}
|
|
|
|
#onChange() {
|
|
if (!this.#obj || this.#syncing) return;
|
|
this.#syncing = true;
|
|
const pos = this.#obj.getLatLng();
|
|
this.setAttribute('lat', `${pos.lat}`);
|
|
this.setAttribute('lng', `${pos.lng}`);
|
|
this.#syncing = false;
|
|
}
|
|
|
|
#onIconChanged(e: LeafletIconChangedEvent) {
|
|
if (!this.#obj) return;
|
|
if (e.detail.icon) this.#obj.setIcon(e.detail.icon);
|
|
else this.#obj.setIcon(new Icon.Default());
|
|
}
|
|
}
|
|
|
|
customElements.define('leaflet-marker', LeafletMarker);
|