View Source Kino.MapLibre (KinoMapLibre v0.1.11)

This Kino allows rendering a regular MapLibre map and then adds an initial support for the Evented API to update the map with event capabilities.

There are two types of maps: static and dynamic. Essentially, a dynamic map can be updated on the fly without having to be re-evaluated. To make a map dynamic you need to wrap it in Kino.MapLibre.new/1

All functions are available for both map types.

Examples

map =
  Ml.new(center: {-68.13734351262877, 45.137451890638886}, zoom: 3)
  # This makes the map dynamic
  |> Kino.MapLibre.new()

# These markers will be added with no need to re-evaluate the map
Kino.MapLibre.add_marker(map, {-68, 45}, color: "red", draggable: true)
Kino.MapLibre.add_marker(map, {-69, 50})

# This is a static map and the markers will be added on evaluation
Ml.new(center: {-68.13734351262877, 45.137451890638886}, zoom: 3)
|> Kino.MapLibre.add_marker({-68, 45}, color: "red", draggable: true)
|> Kino.MapLibre.add_marker({-69, 50})

Summary

Functions

Adds an image to the style. This image can be displayed on the map like any other icon in the style's sprite using its ID

Adds a control to exports the map as a PDF or image (PNG, JPEG and SVG).

Adds a fullscreen control for toggling the map in and out of fullscreen mode.

Adds a geocoder control to the map to handle Nominatim queries

A helper function to create a per feature hover effect. Receives the ID of the layer where the effect should be enabled. It uses events and feature states to create the effect.

Adds a geolocate control to the map.

Adds a marker to the map at the given location

Receives a list of markers and adds them to the map

Adds a navigation control to the map. A navigation control contains zoom buttons and a compass.

Adds a scale control for displaying the ratio of a distance on the map to the corresponding distance on the ground.

Adds a terrain control to the map for turning the terrain on and off.

A helper function that adds the event of centering to coordinates when clicking on a symbol. Receives the ID of the symbols layer and adds the event to all the symbols present in that layer

A helper function to allow inspect a cluster on click. Receives the ID of the clusters layer

Fits the map to the rectangle given by the 2 vertices in bounds

A helper function that adds the event to show the information of a given property on click. Receives the layer ID and the name of the property to show.

Jumps to a given location using an animated transition

Creates a new kino with the given MapLibre style.

Types

@type location() :: {number(), number()}
@type maplibre() :: t() | MapLibre.t() | Kino.JS.Live.t()
@type t() :: Kino.JS.Live.t()

Functions

Link to this function

add_custom_image(map, image_name, image_url, opts \\ [])

View Source

Adds an image to the style. This image can be displayed on the map like any other icon in the style's sprite using its ID

Link to this function

add_export_map(map, opts \\ [])

View Source
@spec add_export_map(
  maplibre(),
  keyword()
) :: :ok | %Kino.MapLibre{events: term(), spec: term()}

Adds a control to exports the map as a PDF or image (PNG, JPEG and SVG).

Options

  • :filename - The filename without the extension. Default: "map"

  • :pintable_area Display printable area on the map. It helps to adjust printable area before printing.

  • :crosshair Display crosshair on the map. It helps to adjust the map center before printing.

Examples

  Kino.MapLibre.add_scale_control(map)
  Kino.MapLibre.add_scale_control(map, unit: :nautical)
Link to this function

add_fullscreen_control(map)

View Source
@spec add_fullscreen_control(maplibre()) ::
  :ok | %Kino.MapLibre{events: term(), spec: term()}

Adds a fullscreen control for toggling the map in and out of fullscreen mode.

Examples

  Kino.MapLibre.add_fullscreen_control(map)
Link to this function

add_geocode_control(map)

View Source
@spec add_geocode_control(maplibre()) ::
  :ok | %Kino.MapLibre{events: term(), spec: term()}

Adds a geocoder control to the map to handle Nominatim queries

Examples

  Kino.MapLibre.add_geocode_control(map)
Link to this function

add_hover(map, layer_id)

View Source
@spec add_hover(maplibre(), String.t()) ::
  :ok | %Kino.MapLibre{events: term(), spec: term()}

A helper function to create a per feature hover effect. Receives the ID of the layer where the effect should be enabled. It uses events and feature states to create the effect.

Examples

  Kino.MapLibre.add_hover(map, "state-fills")

See the docs for more details.

Link to this function

add_locate_control(map, opts \\ [])

View Source
@spec add_locate_control(
  maplibre(),
  keyword()
) :: :ok | %Kino.MapLibre{events: term(), spec: term()}

Adds a geolocate control to the map.

A geolocate control provides a button that uses the browser's geolocation API to locate the user on the map.

Options

  • :track_user_location - If true, the geolocate control acts as a toggle button that when active the user's location is actively monitored for changes. Default: false

  • :high_accuracy - Uses a more accurate position if the device is able to. Default: false

  • :show_user_location - A dot will be shown on the map at the user's location. Default: true

  • :show_accuracy_circle - By default, if :show_user_location is true, a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Default: true

Examples

  Kino.MapLibre.add_locate_control(map)
  Kino.MapLibre.add_locate_control(map, high_accuracy: true, track_user_location: true)
Link to this function

add_marker(map, location, opts \\ [])

View Source
@spec add_marker(maplibre(), location(), keyword()) ::
  :ok | %Kino.MapLibre{events: term(), spec: term()}

Adds a marker to the map at the given location

Options

  • :element - DOM element to use as a marker. The default is a light blue, droplet-shaped SVG marker.

  • :anchor - A string indicating the part of the Marker that should be positioned closest to the coordinate set via Marker#setLngLat. Options are "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" and "bottom-right". Default: "center"

  • :offset - The offset in pixels as a PointLike object to apply relative to the element"s center. Negatives indicate left and up.

  • :color - The color to use for the default marker if :element is not provided. The default is light blue. Default: "#3FB1CE"

  • :scale - The scale to use for the default marker if :element is not provided. The default scale corresponds to a height of 41px and a width of 27px. Default: 1

  • :draggable - A boolean indicating whether or not a marker is able to be dragged to a new position on the map. Default: false

  • :click_tolerance - The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag). The default is to inherit map"s :click_tolerance. Default: 0

  • :rotation - The rotation angle of the marker in degrees, relative to its respective :rotation_alignment setting. A positive value will rotate the marker clockwise. Default: 0

  • :pitch_alignment - "map" aligns the marker to the plane of the map. "viewport" aligns the marker to the plane of the viewport. "auto" automatically matches the value of :rotation_alignment. Default: "auto"

  • :rotation_alignment - "map" aligns the marker"s rotation relative to the map, maintaining a bearing as the map rotates. "viewport" aligns the marker"s rotation relative to the viewport, agnostic to map rotations. "auto" is equivalent to viewport. Default: "auto"

See the docs for more details.

Link to this function

add_markers(map, markers)

View Source
@spec add_markers(maplibre(), list()) ::
  :ok | %Kino.MapLibre{events: term(), spec: term()}

Receives a list of markers and adds them to the map

Examples

markers = [
  [{0, 0}, color: "red", draggable: true],
  [{-32, 2}, color: "green"],
  [{-45, 23}]
]

Ml.new(center: {-68.13734351262877, 45.137451890638886}, zoom: 3)
|> Kino.MapLibre.add_markers(markers)
Link to this function

add_nav_controls(map, opts \\ [])

View Source
@spec add_nav_controls(
  maplibre(),
  keyword()
) :: :ok | %Kino.MapLibre{events: term(), spec: term()}

Adds a navigation control to the map. A navigation control contains zoom buttons and a compass.

Options

  • :show_compass - If true the compass button is included. Default: true

  • :show_zoom - If true the zoom-in and zoom-out buttons are included. Default: true

  • :visualize_pitch - If true the pitch is visualized by rotating X-axis of compass. Default: false

  • :position - The position on the map to which the control will be added. Valid values are "top-left" , "top-right" , "bottom-left" , and "bottom-right" . Defaults to "top-right". Default: "top-right"

You can add multiple controls separately to have granular options over positioning and appearance

Examples

  Kino.MapLibre.add_nav_controls(map, show_compass: false)
  Kino.MapLibre.add_nav_controls(map, show_zoom: false, position: "top-left")
Link to this function

add_scale_control(map, opts \\ [])

View Source
@spec add_scale_control(
  maplibre(),
  keyword()
) :: :ok | %Kino.MapLibre{events: term(), spec: term()}

Adds a scale control for displaying the ratio of a distance on the map to the corresponding distance on the ground.

Options

  • :max_width - The maximum length of the scale control in pixels. Default: 100

  • :unit - Unit of the distance (:imperial, :metric or ':nautical'). Default: :metric

Examples

  Kino.MapLibre.add_scale_control(map)
  Kino.MapLibre.add_scale_control(map, unit: :nautical)
Link to this function

add_terrain_control(map)

View Source
@spec add_terrain_control(maplibre()) ::
  :ok | %Kino.MapLibre{events: term(), spec: term()}

Adds a terrain control to the map for turning the terrain on and off.

Examples

  Kino.MapLibre.add_terrain_control(map)
Link to this function

center_on_click(map, symbols_id)

View Source
@spec center_on_click(maplibre(), String.t()) ::
  :ok | %Kino.MapLibre{events: term(), spec: term()}

A helper function that adds the event of centering to coordinates when clicking on a symbol. Receives the ID of the symbols layer and adds the event to all the symbols present in that layer

Link to this function

clusters_expansion(map, clusters_id)

View Source
@spec clusters_expansion(maplibre(), String.t()) ::
  :ok | %Kino.MapLibre{events: term(), spec: term()}

A helper function to allow inspect a cluster on click. Receives the ID of the clusters layer

Examples

  Kino.MapLibre.clusters_expansion(map, "earthquakes-clusters")
Link to this function

fit_bounds(map, bounds, opts \\ [])

View Source

Fits the map to the rectangle given by the 2 vertices in bounds

Link to this function

info_on_click(map, layer_id, property)

View Source
@spec info_on_click(maplibre(), String.t(), String.t()) ::
  :ok | %Kino.MapLibre{events: term(), spec: term()}

A helper function that adds the event to show the information of a given property on click. Receives the layer ID and the name of the property to show.

Link to this function

jump_to(map, location, opts \\ [])

View Source
@spec jump_to(t(), location(), keyword()) :: :ok

Jumps to a given location using an animated transition

@spec new(MapLibre.t()) :: t()

Creates a new kino with the given MapLibre style.