View Source Kino.MapLibre (KinoMapLibre v0.1.8)
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
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})Link to this section 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
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 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.
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.
Link to this section Types
Link to this section 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
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
Examples
Kino.MapLibre.add_hover(map, "state-fills")See the docs for more details.
@spec add_marker(maplibre(), location(), keyword()) :: :ok | %Kino.MapLibre{events: term(), spec: term()}
Adds a marker to the map at the given location
options
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:elementis not provided. The default is light blue. Default: "#3FB1CE":scale- The scale to use for the default marker if:elementis 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_alignmentsetting. 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.
Receives a list of markers and adds them to the map
examples
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)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
@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
Examples
Kino.MapLibre.clusters_expansion(map, "earthquakes-clusters")Fits the map to the rectangle given by the 2 vertices in bounds
@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.
Jumps to a given location using an animated transition
@spec new(MapLibre.t()) :: t()
Creates a new kino with the given MapLibre style.