Components
Mix.install([
{:maplibre, "~> 0.1.9"},
{:kino_maplibre, "~> 0.1.12"},
{:req, "~> 0.3.1"}
])
alias MapLibre, as: Ml
Kinos
MapLibre
This integration automatically renders the MapLibre
struct as a map:
Ml.new(
center: {-90.73414, 14.55524},
zoom: 13,
style: "https://api.maptiler.com/maps/basic/style.json?key=Q4UbchekCfyvXvZcWRoU"
)
|> Ml.update_layer("building",
paint: [
fill_color: ["interpolate", ["exponential", 0.5], ["zoom"], 15, "#e2714b", 22, "#eee695"],
fill_opacity: ["interpolate", ["exponential", 0.5], ["zoom"], 15, 0, 22, 1]
]
)
Kino.MapLibre
Kino.MapLibre
allows you to render a regular MapLibre
map and then adds an initial support for the Evented API to update the map.
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
:
map =
Ml.new(center: {-68.13734351262877, 45.137451890638886}, zoom: 3)
|> Kino.MapLibre.new()
Having our dynamic map, we can now add new markers to the map at any point:
Kino.MapLibre.add_marker(map, {-69, 50})
Kino.MapLibre.add_marker(map, {-68, 45}, color: "red", draggable: true)
All manipulation functions are available for the static map as well. We just need to build it at once:
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})
You can make a static map dynamic at any moment wrapping it in Kino.MapLibre.new/1
map =
Ml.new(center: {-68.13734351262877, 45.137451890638886}, zoom: 3)
# These markers will appear on the initial map render
|> Kino.MapLibre.add_marker({-68, 45}, color: "red", draggable: true)
|> Kino.MapLibre.add_marker({-69, 50})
# This makes the map dynamic for further interactions
|> Kino.MapLibre.new()
Let’s add navigation controls on the fly!
Kino.MapLibre.add_nav_controls(map)
Smart cells
The following Smart cells are available:
- Map cell - for building maps with geojson data