Replace inline CSS import with a configurable CDN <link> to fix 404s on
marker icon PNG files (relative paths now resolve against the CDN URL).
- Remove leaflet/dist/leaflet.css import and --loader:.css=text from build
- Add css-url, css-integrity, css-crossorigin attributes on <leaflet-map>
- Derive Icon.Default.imagePath from CSS URL for JS-loaded marker icons
- Move shadow DOM setup into connectedCallback with reconnection guard
- Use CSS_ATTRS constant for observedAttributes and attributeChangedCallback
CSS attrs default to https://unpkg.com/leaflet@1.9.4/dist/leaflet.css with
SRI integrity and crossorigin='anonymous'. Custom CSS URLs drop the
default integrity; set css-integrity explicitly to re-enable SRI.
buildOptions was passing default values for absent attributes,
including empty-string defaults like pane:'', which caused Leaflet to
look up this._panes[''] and return undefined, crashing in appendChild.
- Skip empty-string defaults in buildOptions so Leaflet uses its own
- Broaden createChildRegisterHandler param from LayerGroup to Layer so
non-container layers (marker, circle, etc.) can intercept popup/tooltip
children and call bindPopup/bindTooltip instead of bubbling to the map
- Add child-registration handler to every layer component (all 12)
- Fix disconnectedCallback in container components to unbind popups and
tooltips and remove child layers properly
Remove LeafletElement and LeafletControl base classes. Every component
now self-describes its attributes via a PROPS table, derives observed-
Attributes from it, and generates prototype getters/setters in static {}.
Registration lifecycle is extracted into standalone helpers
(registerWithParent, createChildRegisterHandler). Common update
patterns (path style) are shared via imported helpers instead of
duplicated across 5+ components.
Components manage their own #obj private field instead of a shared
protected leafletObject. Leaflet-map-style declarative patterns are
now consistent across all 20 components.
Wraps Leaflet.js as native Web Components. Each element maps 1:1 to a
Leaflet object with reactive attribute binding and proper lifecycle cleanup.
Key design decisions:
- LeafletElement base class handles attribute→option mapping, the
leaflet-register bubble event for parent/child wiring, and
disconnectedCallback cleanup tracking parent bindings.
- LeafletControl base class for map controls (zoom, attribution, scale).
- leaflet-map uses a PROPS table to drive observedAttributes, getters/setters,
attributeChangedCallback, and map event listeners from a single source of
truth. Property types are derived via a mapped type over the table; the
mixin-base pattern (TypedBase) makes them visible to TypeScript without an
interface merge.
- Boolean map options that default to true use disable-* attributes.
- Leaflet and its CSS are bundled into dist/index.js via esbuild.
- JSR config included for @buddy/leaflet-components.
Buddy