How to add Markers

[JuanjoA]

Hi @sntran , I'm trying your library because it seems interesting to me that the calls to the open street maps api are managed from the backend and javascript libraries are not used.

I'm a bit stuck, as I can't think of a way to add markers.

Can you give me a little guidance? If I can collaborate and contribute with some PR, it will be done.

Thanks.

[sntran]

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.

[JuanjoA]

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!

[larshei]

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)

[nomtrosk]

@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..

[larshei]

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.

[larshei]

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!

[nomtrosk]

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.

[sntran]

Hi y'all!

Not sure if any of you still have interest in this any more, but I have added marker support for this if y'all need it.