Using LiveMap to handle OSM

Sidi_Mohammed · August 7, 2023, 5:59pm

Hello,
Iam looking for a simple and efficient way to handle openstreetmap in Phoenix project, I can see LiveMap module which say : LiveMap — live_map v0.0.1

By rendering the map on the server, it avoids the client-side map libraries for simple mapping needs. Utilizing LiveView, we can also update map data on the server, and let the browser do what it does best—rendering markup.
The map is rendered as an SVG, in which each tiles are rendered as , using tiles from OpenStreetMap’s tile server by default.
…

So I just want to show maps and update them in the server-side like add markers and push updates to the client without using javascript libs like leaflet but I can’t find examples or tutorials so if someone can help in this.

Thanks in advance.

codeanpeace · August 8, 2023, 9:07pm

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.

github.com

sntran/live_map/blob/main/lib/live_map.html.heex

<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

This file has been truncated. show original

github.com

sntran/live_map/blob/main/lib/live_map.ex

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)

This file has been truncated. show original

And for getting the market coordinates off a click:

Sidi_Mohammed · August 8, 2023, 11:26pm

Thank you @codeanpeace for sharing those links, this is exactly what I was looking for.
After some researches, I found that openstreetmap server is not scalable and can’t handle more than 1 request per second(which is so bad), there is a second method : downloading the needed maps in pbf format and building the own maps server but I don’t know about performance because serving big data in general require high hardware capacities so I don’t think that it will be good idea.

D4no0 · August 9, 2023, 8:20am

This is exactly done on propose to avoid having people spam the endpoints, you can use OSM to test if everything works, however you want to use this for business, go and pay, nobody is obligated to offer you a free service.

It highly depends on what kind of detail you require for maps, there are unlimited possibilities of what kind of data you want to serve from your map, be it only a country, level of detail (for example showing only the main roads), this directly influences the overhead and processing power the server requires. In practice pretty much nobody needs all the map with the full details like OSM.