cemrehancavdar / hyperleaflet

https://docs.hyperleaflet.dev/
MIT License
67 stars 3 forks source link

Working example with hxml #40

Closed Nthalk closed 10 months ago

Nthalk commented 11 months ago

Great library!

However, it doesn't play well with htmx with hx-swap patterns

  1. No event for 'map:popover-created' with the html, for use with htmx.parse(content)
  2. The data-center and data-zoom live on the unconfigurable #map element, and hx-swap kills the map completely, and is unable to be used with hx-preserve due to nesting (perhaps having a #map[data-config-selector=#map-config] attribute would help here?)

It would be nice to have an interactive htmx example where pins can re-zoom / set bounding box with hx-swaps.

Nthalk commented 11 months ago

I had some spare time, so I re-implemented a large portion of this library in way that supports advanced htmx usage here: https://github.com/IodeSystems/hl-leaflet

You can see the strategy of separating the configuration and the render element allows for surviving hx-swaps, additionally, exporting the popupopen event allows for a htmx.process() call to enable htmx features within popups.

There is a large number of things that my library doesn't do that yours does, like intelligent adding/removing of layers and components, for mine, I have a naive extract, compare, apply config pattern, though it appears to work well with hundreds of markers.

And it currently doesn't support some of the things that I think you are using, like bounding box updates for marker result fetches, or any of the geometries, however I can get to those things later.

cemrehancavdar commented 11 months ago

Great work @Nthalk, I read your code and you have valid points. I've been writing a experimental rewrite of hyperleaflet (pretty much stall for sometime) to finish one or two week. I'll be teaching @Duhan07 codebase to further improvements.

There has been new features like styling, adding new types and new extension support (which is to intercept, change the way you add geometries etc). Also have ability to have some kind of configuration by json. I've choose json instead of html attributes for them keep html part neat.

So, seperating map configuration by map element can be done by the way you describe as an option. There are two ways comes to my mind,

  1. "data-map-config" on map element so if map-config exists, it'll be main configuration of map.
  2. another configuration parameter on JSON to point it out to new configuration element.

First one is more suitable imho.

You can read new configuration and structure if you want (not final might change) https://github.com/cemrehancavdar/hyperleaflet/blob/33c1c0cb35f7591905b3d8fcc32a9fc91d70062c/src/config.js#L3

Also I was a bit reluctant to changing map state by listening element change. But from what i see of your point, we must have it.

I won't gatekeep any of my design choice for hyperlaeflet, you can open pull requests for hyperleaflet or make comments about mines. If you choose to keep improving hl-leaflet i'll try to support you :)

In next two weeks or so, i'll come with better and more configurable hyperleaflet base 🪴

I might need to create a discussion platform for hyperleaflet to improve like discord etc so we can talk about it more. Would it be interest you?