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.
66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import { ImageOverlay, LatLngBounds, LatLngExpression } from 'leaflet';
|
|
import type { ImageOverlayOptions } from 'leaflet';
|
|
import { defineProps, num, str, on } from '../core/props.ts';
|
|
import { registerChildren, unregisterChildren } from '../core/register.ts';
|
|
import {
|
|
WithProps,
|
|
buildAttrMap,
|
|
buildOptions,
|
|
parseBoundsAttr,
|
|
setLayerAttr,
|
|
} from '../core/utils.ts';
|
|
|
|
const PROPS = defineProps({
|
|
url: str(),
|
|
bounds: str(),
|
|
opacity: num(1.0),
|
|
alt: str(),
|
|
interactive: on(),
|
|
crossOrigin: str(),
|
|
errorOverlayUrl: str(),
|
|
zIndex: num(),
|
|
className: str(),
|
|
});
|
|
|
|
const PROP_BY_ATTR = buildAttrMap(PROPS);
|
|
|
|
export class LeafletImageOverlay extends WithProps(HTMLElement, PROPS) {
|
|
#obj?: ImageOverlay;
|
|
|
|
connectedCallback() {
|
|
const url = this.getAttribute('url') || '';
|
|
this.#obj = new ImageOverlay(
|
|
url,
|
|
parseBoundsAttr(this),
|
|
buildOptions(this, PROPS, ['url', 'bounds']) as ImageOverlayOptions,
|
|
);
|
|
registerChildren(this, this.#obj);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
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) return;
|
|
if (name === 'url') {
|
|
if (val) this.#obj.setUrl(val);
|
|
} else if (name === 'bounds') {
|
|
this.#obj.setBounds(new LatLngBounds(parseBoundsAttr(this) as LatLngExpression[]));
|
|
} 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);
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('leaflet-image-overlay', LeafletImageOverlay);
|