live_map

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  width={@width} height={@height}
>
  <title><%= @title %></title>

  <%# 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
        href={"https://tile.openstreetmap.org/#{@zoom}/#{tile.x}/#{tile.y}.png"}
        x={tile.x} y={tile.y} width="1" height="1"
      />
    <% end %>
  </svg>

  <style></style>
</svg>