Expand Events section with real-world examples and sample usage with Alpine.js and _hyperscript.

[cemrehancavdar]

The Events section in the documentation would be more helpful if it had real-world examples and sample usage with Alpine.js and _hyperscript. This would help users understand how to use the library in practical scenarios and make it easier for them to integrate it into their projects.

[tlc28]

Hi @cemrehancavdar

Thanks for hyperleaflet! It's a brilliant idea! 👍

I would be definitively interested in some real-world examples, for I have try some stuff but not everything is working as I was expecting.

For instance, adding a button that modify/update the data-hyperleaflet-source tag using htmx works as expected (neat! 😎) but I failed to define other triggers. I've tried hx-trigger="geometry:click" and a global hx-trigger="click, keyup[key=='X'] from:body" without success.

I might be doing something obviously wrong, though! 😅 Can't wait to read more examples.

[cemrehancavdar]

Hi @tlc28, Well there are lots of stuff i need to improve about docs. I'll keep adding more if needed.

So hyperleaflet events system is like custom events with "i think it might be needed" details send to window. The event listeners like Vanilla: window.eventListener("map:click", ... ) htmx: hx-trigger="geometry:click from:window" hyperscript

 <input
  type="text"
  _="on map:click(point) from window set my value to point.lat" />

So you need to listen window 😃 sample sandbox: https://codesandbox.io/s/hyperleaflet-forked-3nzx4p

You can read further: https://docs.hyperleaflet.dev/usage/#event-handling

Feel free to ask for more 🪴

[tlc28]

Hi @cemrehancavdar

Thanks for the answer! Makes total sense! … RT*M! 😅 I "just" missed the bold window in the first paragraph! For my defense, it doesn't quite fit my mental model of "an event is emitted by a tag and bubbles up", but I guess it's my problem.

Everything now works as expected! Sorry for the noise!

[cemrehancavdar]

Well you are possibly right, i had an another opinion like data-evented="map:click" like hx-trigger so i can query it before trigger and send directly to element. But it seemed add another piece to the table also "map:click" needed to catch twice like <span data-evented="map:click" _="on map:click ..."> Same goes for htmx itself, or any other library that goes with hypertexts.

So i decided to catching events from window may look like pub sub pattern hyperleaflet publishes via window. Elements needed to do stuff with it catches via window.

I put lots of thought to it. So, feedbacks would be awesome. 😃 🪴

[tlc28]

I'll play a bit with hyperleaflet and let you know if/when I have any worth-sharing feedback!