hl-leaflet

A Leaflet plugin for htmx and hypermedia inspired by hyperleaflet.

Usage

When including the script, the library will automatically search for all root .hl-map elements and configure and render them on document load.

Maps generated by the library cannot survive a full htmx hx-swap, so it is advisable to put your data-hl-render target outside, and ensure it is tagged with hx-preserve.

<script src="https://unpkg.com/[email protected]/dist/hl-leaflet.js"></script>

When triggering hx-swap, you should take care to not re-render the map.

<div id="map-render" hx-preserve/>
<div
        id="map-config"
        class="hl-map"
        data-hl-render="#map-render"
        data-hl-center="[39.73, 39.99]"
        data-hl-zoom="5"
>
    <div
            class="hl-marker"
            data-hl-center="[-33.8650, 151.2094]"
            data-hl-popup="Sydney"
    ></div>
</div>

Tested With

• Leaflet 1.4.4
• htmx 1.9.9

Development

npm install
npm run dev # Watches for changes and rebuilds dist
npm run build # Builds final dist
npm run test # Runs tests

Publishing

npm login
npm publish

Advanced htmx usage

See the tests for advanced hx-on and hx-swap usage.