LiveMap

A Phoenix LiveView Component for displaying an interactive map with dynamic data.

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 <image>, using tiles from OpenStreetMap's tile server by default. All the transforms are natively handled by the browser for SVG.

Please consult and follow usage policies of the tile servers.

Usage

A LiveMap can be added to a LiveView by:

<.live_component
  module={LiveMap} id="live-map"
  title="Example Live Map"
  width="800" height="600"
  latitude="10.4197639" longitude="107.1070841" zoom="11"
>
  <%# Styles slot %>
  <:style>
    image {
      opacity: 0.75;
    }
  </:style>

  <%# Custom Zoom-In Button %>
  <:zoom_in>
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
  </:zoom_in>

  <%# Custom Zoom-Out Button %>
  <:zoom_out>
    <path d="M19 13H5v-2h14v2z"/>
  </:zoom_out>
</.live_component>

Checkout examples for a Phoenix application demonstrating LiveMap usage.

Installation

If available in Hex, the package can be installed by adding live_map to your list of dependencies in mix.exs:

def deps do
  [
    {:live_map, "~> 0.0.1"}
  ]
end

Documentation is generated with ExDoc and published on HexDocs. Once published, the docs can be found at https://hexdocs.pm/live_map.