https://github.com/iodesystems/hl-leaflet
Htmx Compatible Hypermedia Leaflet Engine
https://github.com/iodesystems/hl-leaflet
Last synced: 12 months ago
JSON representation
Htmx Compatible Hypermedia Leaflet Engine
- Host: GitHub
- URL: https://github.com/iodesystems/hl-leaflet
- Owner: IodeSystems
- Created: 2023-12-20T06:24:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-06-22T03:48:25.000Z (about 1 year ago)
- Last Synced: 2025-06-22T04:26:41.558Z (about 1 year ago)
- Language: TypeScript
- Size: 65.4 KB
- Stars: 7
- Watchers: 1
- Forks: 2
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# hl-leaflet
A [Leaflet](http://leafletjs.com/) plugin for `htmx` and `hypermedia` inspired
by [hyperleaflet](https://github.com/cemrehancavdar/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`.
```html
```
When triggering `hx-swap`, you should take care to not re-render the map.
```html
```
## Tested With
- [Leaflet](http://leafletjs.com/) 1.4.4
- [htmx](https://htmx.org/) 1.9.9
## Development
```shell
npm install
npm run dev # Watches for changes and rebuilds dist
npm run build # Builds final dist
npm run test # Runs tests
```
## Publishing
```shell
npm login
npm publish
```
## Advanced htmx usage
See the [tests](https://github.com/IodeSystems/hl-leaflet/blob/main/src/hl-leaflet.test.ts) for advanced `hx-on`
and `hx-swap` usage.