Add scale (#73)

assets/maplibre/main.js

@@ -21,6 +21,7 @@ export function init(ctx, data) {
     terrain = [],
     geocode = [],
     fullscreen = [],
+    scale = [],
     hover = [],
     center = [],
     info = [],
@@ -54,6 +55,9 @@ export function init(ctx, data) {
     fullscreen.forEach(() => {
       addFullScreen();
     });
+    scale.forEach((options) => {
+      addScale(options);
+    });
     hover.forEach((layer) => {
       addHover(layer);
     });
@@ -104,6 +108,10 @@ export function init(ctx, data) {
     addFullScreen();
   });
 
+  ctx.handleEvent("add_scale", (options) => {
+    addScale();
+  });
+
   ctx.handleEvent("clusters_expansion", (clusters) => {
     inspectClusters(clusters);
   });
@@ -168,6 +176,11 @@ export function init(ctx, data) {
     map.addControl(fullscreen);
   }
 
+  function addScale(options) {
+    const scale = new maplibregl.ScaleControl(options);
+    map.addControl(scale);
+  }
+
   function loadImage({ name, url, options }) {
     map.loadImage(url, (error, image) => {
       if (error) throw error;

lib/kino/maplibre.ex

@@ -244,6 +244,27 @@ defmodule Kino.MapLibre do
     update_events(map, :fullscreen, %{})
   end
 
+  @doc """
+  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)
+  """
+  @spec add_scale_control(maplibre(), keyword()) :: :ok | %__MODULE__{}
+  def add_scale_control(map, opts \\ []) do
+    scale = %{options: normalize_opts(opts)}
+    update_events(map, :scale, scale)
+  end
+
   @doc """
   A helper function to allow inspect a cluster on click. Receives the ID of the clusters layer
   ## Examples
@@ -378,6 +399,12 @@ defmodule Kino.MapLibre do
     {:noreply, ctx}
   end
 
+  def handle_cast({:scale, scale}, ctx) do
+    broadcast_event(ctx, "add_scale", scale)
+    ctx = update_assigned_events(ctx, :scale, scale)
+    {:noreply, ctx}
+  end
+
   def handle_cast({:hover, layer}, ctx) do
     broadcast_event(ctx, "add_hover", layer)
     ctx = update_assigned_events(ctx, :hover, layer)

test/kino/maplibre_test.exs

@@ -300,6 +300,34 @@ defmodule Kino.MapLibreTest do
     end
   end
 
+  describe "add_scale_control/2" do
+    test "adds a scale control to a static map" do
+      ml = Ml.new() |> Kino.MapLibre.add_scale_control()
+      assert ml.events.scale == [%{options: %{}}]
+    end
+
+    test "adds a scale control to a dynamic map" do
+      ml = Ml.new() |> Kino.MapLibre.new()
+      Kino.MapLibre.add_scale_control(ml, unit: :nautical)
+      data = connect(ml)
+
+      assert data.events.scale == [%{options: %{"unit" => :nautical}}]
+
+      assert_broadcast_event(ml, "add_scale", %{options: %{"unit" => :nautical}})
+    end
+
+    test "adds a scale control to a converted map" do
+      ml = Ml.new() |> Kino.MapLibre.add_scale_control() |> Kino.MapLibre.new()
+
+      Kino.MapLibre.add_scale_control(ml, max_width: 200)
+      data = connect(ml)
+
+      assert data.events.scale == [%{options: %{"maxWidth" => 200}}, %{options: %{}}]
+
+      assert_broadcast_event(ml, "add_scale", %{options: %{"maxWidth" => 200}})
+    end
+  end
+
   describe "clusters_expansion/2" do
     test "adds a cluster expansion to a static map" do
       ml = Ml.new() |> Kino.MapLibre.clusters_expansion("clusters")