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

Releases Tags

  • v0.2.0 6ff1b75ed3
    v0.2.0
    v0.1.0
    v0.1.1
    ${ item.name }
    Create tag ${ searchTerm }
    Create branch ${ searchTerm }
    from 'main'
    ${ noResults }

    v0.2.0 Stable

    buddy released this 2 weeks ago | 0 commits to main since this release

    Auto-fit the map to its markers

    New on <leaflet-map>:

    attribute default meaning
    fit-to-markers off when present, ignore lat / lng / zoom and frame every locatable layer instead
    fit-padding 20 pixel gutter kept around the bounds
    fit-max-zoom none cap on how far it zooms in — set this so a single marker doesn't snap to max zoom 
    <leaflet-map fit-to-markers fit-padding="40" fit-max-zoom="15">
  <leaflet-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></leaflet-tile-layer>
  <leaflet-marker lat="34.0537" lng="-118.2427"></leaflet-marker>
  <leaflet-marker lat="34.0083" lng="-118.4987"></leaflet-marker>
  <leaflet-marker lat="34.1341" lng="-118.3215"></leaflet-marker>
</leaflet-map>

    "Locatable" means anything with a getLatLng() (markers, circles) or getBounds()
    (rectangles, image / video overlays). Tile layers and open popups / tooltips are
    skipped.

    Behaviour

    • The only reframe trigger is a component registering — initial page load and
      any child added later. Panning, zooming, opening a popup and removing a marker
      all leave the view exactly where it is.
    • Reframes are coalesced onto a microtask, so page load produces one fitBounds
      call, not one per marker.
    • Panning / zooming still writes the live centre and zoom back to the
      lat / lng / zoom attributes as before — including the view fitBounds()
      lands on. That write-back never re-triggers a fit.
    • setView() still runs once at construction, so the map has a valid view before
      the first frame.

    Also

    • jsr.json / package.json now carry a description, for the JSR package
      score and search.

    Full diff: https://git.buddy.wtf/lib/leaflet-components/compare/v0.1.1...v0.2.0

    Downloads
     
  • v0.1.1 664064bf1c
    v0.2.0
    v0.1.0
    v0.1.1
    ${ item.name }
    Create tag ${ searchTerm }
    Create branch ${ searchTerm }
    from 'main'
    ${ noResults }

    v0.1.1 Stable

    buddy released this 2 weeks ago | 4 commits to main since this release

    Documentation-only release. No API or runtime changes.

    • JSDoc on every public symbol — element classes, the WithProps mixin, the
      prop codecs (num / str / bool / positional / …), the registration
      helpers, and the event-type fragments.
    • Module-level doc comments across src/index.ts and src/elements/*.
    • Raises the JSR documentation score.
    • Fixed a stale package-name reference in a test comment.

    Full diff: https://git.buddy.wtf/lib/leaflet-components/compare/v0.1.0...v0.1.1

    Downloads
     
  • v0.1.0 4d05109d98
    v0.2.0
    v0.1.0
    v0.1.1
    ${ item.name }
    Create tag ${ searchTerm }
    Create branch ${ searchTerm }
    from 'main'
    ${ noResults }

    v0.1.0 Stable

    buddy released this 2 weeks ago | 6 commits to main since this release

    Initial release.

    leaflet-web-components (npm) / @buddy/leaflet-components (JSR) — native Web
    Components wrapping Leaflet.js. Each <leaflet-*>
    element maps 1:1 to a Leaflet object, and nesting the elements mirrors the
    Leaflet object graph.

    Elements

    24 custom elements: leaflet-map, leaflet-tile-layer, leaflet-tile-layer-wms,
    leaflet-marker, leaflet-popup, leaflet-tooltip, leaflet-circle,
    leaflet-circle-marker, leaflet-polygon, leaflet-polyline,
    leaflet-rectangle, leaflet-line, leaflet-image-overlay,
    leaflet-video-overlay, leaflet-svg-overlay, leaflet-geojson,
    leaflet-layer-group, leaflet-feature-group, leaflet-control-zoom,
    leaflet-control-scale, leaflet-control-layers, leaflet-control-attribution,
    leaflet-icon, leaflet-div-icon.

    Core

    • WithProps mixin — each element declares a prop table; the mixin keeps
      attribute ⇄ property ⇄ live Leaflet option in sync, both directions, without
      cycles.
    • Event forwarding — every Leaflet event the wrapped object fires is
      re-emitted on the element as leaflet:<type>, with detail matching what a
      real Leaflet .on() listener would receive.
    • Registration protocol — children announce themselves to the nearest
      ancestor component via a bubbling leaflet-register event; no component
      reaches into another's DOM.
    • elements/ vs components/ — elements/leaflet-foo.ts exports the class
      only; components/leaflet-foo.ts adds customElements.define. Plugin authors
      can subclass or re-register under a different tag without triggering the
      built-in define.

    Packaging

    • Dual publish: npm (leaflet-web-components) and JSR
      (@buddy/leaflet-components), with separate entry points. JSR passes the
      "no slow types" check.
    • leaflet is a peer dependency (^1.9.4); @types/leaflet ships as a
      regular dependency.
    • Individual ESM modules, no bundling. Subpath exports for elements/* and
      components/* (npm).
    • HTMLElementTagNameMap / HTMLElementEventMap augmented for npm consumers.

    Tests

    Vitest + jsdom suite covering prop/attribute wiring, event forwarding, the
    registration protocol, and real-page load order.

    Downloads