lib/leaflet-components
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

fix: sync lat/lng attributes on marker dragend

Browse Source 
LeafletMarker now listens for Leaflet's 'dragend' event and writes
the final position back to the lat/lng attributes, using a #syncing
guard to prevent re-entrant setLatLng calls.
This commit is contained in:
Buddy 2026-06-08 22:11:45 -07:00
parent 80c87468b6
commit 78c39f33a3
1 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/leaflet-marker.ts
View File

@ -25,6 +25,7 @@ const PROP_BY_ATTR = new Map<string, string>(
export class LeafletMarker extends withProps(HTMLElement, PROPS) {
#obj?: Marker;
#syncing = false;
#children = new Map<HTMLElement, ChildEntry>();
#childHandler?: (e: LeafletRegisterEvent) => void;
@ -33,6 +34,7 @@ export class LeafletMarker extends withProps(HTMLElement, PROPS) {
[this.#num('lat'), this.#num('lng')],
buildOptions(this, PROPS, ['lat', 'lng']),
);
this.#obj.on('dragend', this.#onDragEnd);
this.#childHandler = createChildRegisterHandler(this.#obj, this.#children);
this.addEventListener('leaflet-register', this.#childHandler);
registerWithParent(this, this.#obj);
@ -40,13 +42,14 @@ export class LeafletMarker extends withProps(HTMLElement, PROPS) {
disconnectedCallback() {
if (this.#childHandler) this.removeEventListener('leaflet-register', this.#childHandler);
this.#obj?.off('dragend', this.#onDragEnd);
this.#children.clear();
this.#obj?.remove();
this.#obj = undefined;
}
attributeChangedCallback(name: string, _old: string | null, val: string | null) {
if (!this.#obj) return;
if (!this.#obj || this.#syncing) return;
if (name === 'lat' || name === 'lng') {
this.#obj.setLatLng([this.#num('lat'), this.#num('lng')]);
} else {
@ -59,6 +62,15 @@ export class LeafletMarker extends withProps(HTMLElement, PROPS) {
}
}
#onDragEnd = () => {
if (!this.#obj || this.#syncing) return;
this.#syncing = true;
const pos = this.#obj.getLatLng();
this.setAttribute('lat', String(pos.lat));
this.setAttribute('lng', String(pos.lng));
this.#syncing = false;
};
#num(name: string): number {
const v = this.getAttribute(name);
return v !== null