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

feat: auto-invalidate map size on element resize via ResizeObserver

Browse Source 
Replace the height-attribute approach with a ResizeObserver on the host
element so the map re-renders whenever its container size changes from
any source — CSS class, inline style, parent layout, etc.
This commit is contained in:
Buddy 2026-06-06 16:11:03 -07:00
parent 41acdc9bb7
commit 2c2e83b7d0
1 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/leaflet-map.ts
View File

@ -165,6 +165,7 @@ export class LeafletMap extends TypedBase {
#cssLink?: HTMLLinkElement;
#syncing = false;
#mapEventHandlers = new globalThis.Map<string, () => void>();
#resizeObserver?: ResizeObserver;
static get observedAttributes(): string[] {
return [...Object.values(PROPS).map((s) => s.attr), ...CSS_ATTRS];
@ -241,6 +242,9 @@ export class LeafletMap extends TypedBase {
map.setView([lat, lng], zoom);
this.#map = map;
this.#resizeObserver = new ResizeObserver(() => this.#map?.invalidateSize());
this.#resizeObserver.observe(this);
// Register one handler per unique map event, updating all props that share it
const groups = new globalThis.Map<string, NumProp[]>();
for (const spec of Object.values(PROPS) as PropDef[]) {
@ -270,6 +274,8 @@ export class LeafletMap extends TypedBase {
}
disconnectedCallback() {
this.#resizeObserver?.disconnect();
this.#resizeObserver = undefined;
this.removeEventListener(
'leaflet-register',
this.#handleLeafletRegister as EventListenerOrEventListenerObject,