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.
leaflet-components/src/elements/leaflet-icon.ts

56 lines
1.9 KiB
TypeScript

import { Icon, type IconOptions, 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';
const PROPS: {
iconUrl: PropDef<string>;
iconRetinaUrl: PropDef<string>;
iconSize: PropDef<PointExpression>;
iconAnchor: PropDef<PointExpression>;
popupAnchor: PropDef<PointExpression>;
tooltipAnchor: PropDef<PointExpression>;
shadowUrl: PropDef<string>;
shadowRetinaUrl: PropDef<string>;
shadowSize: PropDef<PointExpression>;
shadowAnchor: PropDef<PointExpression>;
className: PropDef<string>;
} = {
iconUrl: str(),
iconRetinaUrl: str(),
iconSize: json<PointExpression>([0, 0]),
iconAnchor: json<PointExpression>([0, 0]),
popupAnchor: json<PointExpression>([0, 0]),
tooltipAnchor: json<PointExpression>([0, 0]),
shadowUrl: str(),
shadowRetinaUrl: str(),
shadowSize: json<PointExpression>([0, 0]),
shadowAnchor: json<PointExpression>([0, 0]),
className: str(),
};
// An Icon has no setters, so every attribute change builds a new one and the
// parent marker is told to swap it in.
const Base: LeafletElementConstructor<Icon, typeof PROPS> = WithProps(PROPS, {
attach: 'none',
recreate: true,
});
/** `<leaflet-icon>` — a Leaflet `Icon` (an image marker icon). Child of `<leaflet-marker>`; rebuilt on every attribute change and swapped in via `setIcon()`. */
export default class LeafletIconElement extends Base {
declare readonly leafletObject?: Icon;
createLeafletObject(options: Partial<IconOptions>): Icon | undefined {
return options.iconUrl ? new Icon(options as IconOptions) : undefined;
}
leafletObjectCreated(): void {
emitIconChanged(this, this.leafletObject);
}
disconnectedCallback(): void {
super.disconnectedCallback();
emitIconChanged(this, null);
}
}