🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Sign inDemoInstall
Socket

hl-leaflet

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

hl-leaflet

Htmx Compatible Leaflet Map

0.0.3
latest
Source
npm
Version published
Weekly downloads
5
-28.57%
Maintainers
1
Weekly downloads
 
Created
Source

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/hl-leaflet@0.0.1/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.

FAQs

Package last updated on 20 Dec 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts