Add locate (#64)

Co-authored-by: Jonatan Kłosko <[email protected]>

lib/assets/maplibre/main.js

@@ -3,7 +3,9 @@ import "https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.min.js";
 import "https://cdn.jsdelivr.net/gh/jimmyrocks/maplibre-gl-vector-text-protocol@main/dist/maplibre-gl-vector-text-protocol.min.js";
 
 export function init(ctx, data) {
-  ctx.importCSS("https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.min.css");
+  ctx.importCSS(
+    "https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.min.css"
+  );
 
   ctx.root.innerHTML = `
     <div id='map' style='width: 896px; height: 400px;'></div>
@@ -15,6 +17,7 @@ export function init(ctx, data) {
     markers = [],
     clusters = [],
     controls = [],
+    locate = [],
     hover = [],
     center = [],
     info = [],
@@ -36,6 +39,9 @@ export function init(ctx, data) {
     controls.forEach(({ position, options }) => {
       addNavControls({ position, options });
     });
+    locate.forEach(({ high_accuracy, options }) => {
+      addLocate({ high_accuracy, options });
+    });
     hover.forEach((layer) => {
       addHover(layer);
     });
@@ -70,6 +76,10 @@ export function init(ctx, data) {
     addNavControls({ position, options });
   });
 
+  ctx.handleEvent("add_locate", ({ high_accuracy, options }) => {
+    addLocate({ high_accuracy, options });
+  });
+
   ctx.handleEvent("clusters_expansion", (clusters) => {
     inspectClusters(clusters);
   });
@@ -107,6 +117,18 @@ export function init(ctx, data) {
     map.addControl(nav, position);
   }
 
+  function addLocate({ high_accuracy, options }) {
+    const locate = new maplibregl.GeolocateControl({
+      positionOptions: {
+        enableHighAccuracy: high_accuracy,
+        maximumAge: 0,
+        timeout: 6000,
+      },
+      ...options,
+    });
+    map.addControl(locate);
+  }
+
   function loadImage({ name, url, options }) {
     map.loadImage(url, (error, image) => {
       if (error) throw error;

lib/kino/maplibre.ex

@@ -177,6 +177,37 @@ defmodule Kino.MapLibre do
     update_events(map, :controls, control)
   end
 
+  @doc """
+  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(map)
+        Kino.MapLibre.add_locate(map, high_accuracy: true, track_user_location: true)
+  """
+  @spec add_locate(maplibre(), keyword()) :: :ok | %__MODULE__{}
+  def add_locate(map, opts \\ []) do
+    high_accuracy = Keyword.get(opts, :high_accuracy, false)
+    locate = %{high_accuracy: high_accuracy, options: normalize_opts(opts)}
+    update_events(map, :locate, locate)
+  end
+
   @doc """
   A helper function to allow inspect a cluster on click. Receives the ID of the clusters layer
   ## Examples
@@ -287,6 +318,12 @@ defmodule Kino.MapLibre do
     {:noreply, ctx}
   end
 
+  def handle_cast({:locate, locate}, ctx) do
+    broadcast_event(ctx, "add_locate", locate)
+    ctx = update_assigned_events(ctx, :locate, locate)
+    {: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

@@ -146,7 +146,7 @@ defmodule Kino.MapLibreTest do
     end
   end
 
-  describe "add_nav_controls/3" do
+  describe "add_nav_controls/2" do
     test "adds a nav control to a static map" do
       ml = Ml.new() |> Kino.MapLibre.add_nav_controls()
       assert ml.events.controls == [%{options: %{}, position: "top-right"}]
@@ -184,6 +184,39 @@ defmodule Kino.MapLibreTest do
     end
   end
 
+  describe "add_locate/2" do
+    test "adds a geolocate control to a static map" do
+      ml = Ml.new() |> Kino.MapLibre.add_locate()
+      assert ml.events.locate == [%{options: %{}, high_accuracy: false}]
+    end
+
+    test "adds a geolocate control to a dynamic map" do
+      ml = Ml.new() |> Kino.MapLibre.new()
+      Kino.MapLibre.add_locate(ml, high_accuracy: true)
+      data = connect(ml)
+
+      assert data.events.locate == [%{high_accuracy: true, options: %{"highAccuracy" => true}}]
+
+      assert_broadcast_event(ml, "add_locate", %{options: %{}, high_accuracy: true})
+    end
+
+    test "adds a geolocate control to a converted map" do
+      ml = Ml.new() |> Kino.MapLibre.add_locate(high_accuracy: true) |> Kino.MapLibre.new()
+      Kino.MapLibre.add_locate(ml, track_user_location: true)
+      data = connect(ml)
+
+      assert data.events.locate == [
+               %{options: %{"trackUserLocation" => true}, high_accuracy: false},
+               %{options: %{"highAccuracy" => true}, high_accuracy: true}
+             ]
+
+      assert_broadcast_event(ml, "add_locate", %{
+        options: %{"trackUserLocation" => true},
+        high_accuracy: false
+      })
+    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")