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.
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { TileLayer } from 'leaflet';
|
|
import { buildOptions, buildAttrMap, setLayerAttr } from '../core/utils.ts';
|
|
import { withProps } from '../core/with-props.ts';
|
|
|
|
import { registerChildren, unregisterChildren } from '../core/register.ts';
|
|
import type { PropDef } from '../core/props.ts';
|
|
|
|
const PROPS = {
|
|
url: { kind: 'str', attr: 'url', default: '' },
|
|
attribution: { kind: 'str', attr: 'attribution', default: '' },
|
|
minZoom: { kind: 'num', attr: 'min-zoom', default: 0 },
|
|
maxZoom: { kind: 'num', attr: 'max-zoom', default: 18 },
|
|
opacity: { kind: 'num', attr: 'opacity', default: 1.0 },
|
|
zIndex: { kind: 'num', attr: 'z-index', default: 0 },
|
|
} satisfies Record<string, PropDef>;
|
|
|
|
const PROP_BY_ATTR = buildAttrMap(PROPS);
|
|
|
|
export class LeafletTileLayer extends withProps(HTMLElement, PROPS) {
|
|
#obj?: TileLayer;
|
|
|
|
connectedCallback() {
|
|
const url = this.getAttribute('url') || '';
|
|
this.#obj = new TileLayer(url, buildOptions(this, PROPS, ['url']));
|
|
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 === 'url') {
|
|
if (val) this.#obj.setUrl(val);
|
|
} else {
|
|
setLayerAttr(this.#obj!, PROPS, PROP_BY_ATTR, name, val);
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('leaflet-tile-layer', LeafletTileLayer);
|