Hi there, thanks for checking out my experiment.

To add support for markers, I think the way to go is to create slots for them, like the current :style and :zoom_in and :zoom_out slots. We can then render them using the attributes on the slots. Some math are required to convert longitude and latitude to pixel coordinates.

PR is very welcome, as I have moved away from Elixir for some time now.

Thanks @sntran, I agree with You about the slots, the tricky part is going to be the calculation of latitude and longitude to pixels, right.
I will try, thanks again!

I am also thinking of adding a map with markers (actually multiple Maps with markers on one view)
and found this while searching for MapLibre snippets.

In a previous project I worked with Leaflet, but somehow that felt a bit clunky with pushing events around manually and writing the hooks on the frontend. So this would actually be great! (I do not even need map interaction)

@JuanjoA Did you manage to get it working? I tried the same but got stuck when I found SVG not centring the coordinate correctly meaning its hard to determine precise lat/long position in the image. I tried to hardcode a black square in the middle of the SVG image and expected this to be placed at the lat/lon argument for livemap at all zoom levels. It was not the case..

I went with a different approach and used LeafLet Map.

After your question I created a quick gist for app.js, liveview and a component here: https://gist.github.com/larshei/249ebc49b7469c41d8ea4260fe9ad93a

As noted in the readme, I copied this together and did not actually give it a try in its own project, as I am short on time right now. If needed I can review it in 2 weeks.

I took this approach because I worked with Leaflet earlier and it seemed like the "easier" way for me personally.

If someone adjusts this package instead, I'd be happy to try that as well!

Yeah, it may be an easier solution to use already existing mapping engine with scrolling, markers and all. Thanks @larshei, I'll take a look at that solution.