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.
63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import { DivIcon, type DivIconOptions, type PointExpression } from 'leaflet';
|
|
import { json, str, type PropDef } from '../core/props.ts';
|
|
import { emitIconChanged } from '../core/register.ts';
|
|
import { WithProps, type LeafletElementConstructor } from '../core/with-props.ts';
|
|
|
|
// Like leaflet-icon, rebuilt on every change -- including changes to the
|
|
// markup, which is what the icon renders when `html` isn't set.
|
|
const PROPS: {
|
|
iconSize: PropDef<PointExpression>;
|
|
iconAnchor: PropDef<PointExpression>;
|
|
popupAnchor: PropDef<PointExpression>;
|
|
tooltipAnchor: PropDef<PointExpression>;
|
|
className: PropDef<string>;
|
|
html: PropDef<string>;
|
|
bgPos: PropDef<PointExpression>;
|
|
} = {
|
|
iconSize: json<PointExpression>([0, 0]),
|
|
iconAnchor: json<PointExpression>([0, 0]),
|
|
popupAnchor: json<PointExpression>([0, 0]),
|
|
tooltipAnchor: json<PointExpression>([0, 0]),
|
|
className: str('leaflet-div-icon'),
|
|
html: str(),
|
|
bgPos: json<PointExpression>([0, 0]),
|
|
};
|
|
const Base: LeafletElementConstructor<DivIcon, typeof PROPS> = WithProps(PROPS, {
|
|
attach: 'none',
|
|
recreate: true,
|
|
});
|
|
|
|
/**
|
|
* `<leaflet-div-icon>` — a Leaflet `DivIcon` (a CSS-styled marker icon). Child
|
|
* of `<leaflet-marker>`; renders its own markup when `html` isn't set, and is
|
|
* rebuilt on every change.
|
|
*/
|
|
export default class LeafletDivIconElement extends Base {
|
|
declare readonly leafletObject?: DivIcon;
|
|
|
|
#observer?: MutationObserver;
|
|
|
|
createLeafletObject(options: DivIconOptions): DivIcon {
|
|
return new DivIcon(this.innerHTML ? { ...options, html: this.innerHTML } : options);
|
|
}
|
|
|
|
connectedCallback(): void {
|
|
super.connectedCallback();
|
|
this.#observer = new MutationObserver(() => {
|
|
this.recreateLeafletObject();
|
|
});
|
|
this.#observer.observe(this, { childList: true, characterData: true, subtree: true });
|
|
}
|
|
|
|
disconnectedCallback(): void {
|
|
this.#observer?.disconnect();
|
|
this.#observer = undefined;
|
|
super.disconnectedCallback();
|
|
emitIconChanged(this, null);
|
|
}
|
|
|
|
leafletObjectCreated(): void {
|
|
emitIconChanged(this, this.leafletObject);
|
|
}
|
|
}
|