LiveMap (live_map v0.0.1) View Source

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"
  width={800} height={600}
  latitude={10.4197639} longitude={107.1070841} zoom={11}
>
</.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.

Link to this section Summary

Functions

render(arg)

Callback implementation for Phoenix.LiveComponent.render/1.

tiles(latitude, longitude, zoom, width, height)

See LiveMap.Tile.map/5.

tiles(latitude, longitude, zoom, width, height, mapper)

See LiveMap.Tile.map/6.

viewbox(tiles)

Returns the viewbox that covers the tiles.

Link to this section Functions