I’d suggest digging into the LiveMap source code and extending it to add these markers. You can look at how buttons are rendered onto the svg tiled map to get an idea of how to accomplish this.
<svg id={@id}
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width={@width} height={@height}
>
<title><%= @title %></title>
<style>
<%= render_slot(@style) %>
</style>
<%# Thanks to SVG scaling, we can simply place the 1x1 tile images at their
exact X, Y location. The viewBox is then used to offset the view to the map.
The tile layer then uses preserveAspectRatio to make the tiles cover. %>
<svg viewBox={viewbox(@tiles)} preserveAspectRatio="xMidYMid slice">
<title>Tile Layer</title>
<%= for tile <- @tiles do %>
<image
show original
defmodule LiveMap do
@external_resource "./README.md"
@moduledoc """
#{File.read!(@external_resource)}
"""
require Logger
alias LiveMap.Tile
@doc deletegate_to: {Tile, :map, 5}
defdelegate tiles(latitude, longitude, zoom, width, height), to: Tile, as: :map
use Phoenix.LiveComponent
@impl Phoenix.LiveComponent
@spec mount(Phoenix.LiveView.Socket.t()) :: {:ok, Phoenix.LiveView.Socket.t()}
def mount(socket) do
{:ok,
socket
|> assign_new(:width, fn -> 300 end)
show original
And for getting the market coordinates off a click:
_el has clientWidth and clientHeight properties that may be what you’re looking for.
click: (e, el) => {
return {
offsetX: e.offsetX,
offsetY: e.offsetY,
clientWidth: el.clientWidth,
clientHeight: el.clientHeight
}
}
2 Likes
