feat: add fit_bounds functionality (#45)

* feat: add features

* chore: remove unused filter

* chore: revert some changes

* test: make tests pass

lib/assets/maplibre/main.js

@@ -20,6 +20,7 @@ export function init(ctx, data) {
     info = [],
     images = [],
     jumps = [],
+    fit_bounds = [],
   } = data.events;
 
   const map = new maplibregl.Map({ container: container, style: style });
@@ -44,12 +45,15 @@ export function init(ctx, data) {
     info.forEach(({ layer, property }) => {
       infoOnClick({ layer, property });
     });
-    images.forEach(({ name, url }) => {
-      loadImage({ name, url });
+    images.forEach(({ name, url, options }) => {
+      loadImage({ name, url, options });
     });
     jumps.forEach(({ location, options }) => {
       map.easeTo({ center: location, ...options });
     });
+    fit_bounds.forEach(({ bounds, options }) => {
+      map.fitBounds(bounds, options);
+    });
   });
 
   ctx.handleEvent("add_markers", (markers) => {
@@ -82,14 +86,18 @@ export function init(ctx, data) {
     infoOnClick({ layer, property });
   });
 
-  ctx.handleEvent("add_custom_image", ({ name, url }) => {
-    loadImage({ name, url });
+  ctx.handleEvent("add_custom_image", ({ name, url, options }) => {
+    loadImage({ name, url, options });
   });
 
   ctx.handleEvent("jump_to", ({ location, options }) => {
     map.easeTo({ center: location, ...options });
   });
 
+  ctx.handleEvent("fit_bounds", ({ bounds, options }) => {
+    map.fitBounds(bounds, options);
+  });
+
   function addMarker({ location, options }) {
     new maplibregl.Marker(options).setLngLat(location).addTo(map);
   }
@@ -99,10 +107,10 @@ export function init(ctx, data) {
     map.addControl(nav, position);
   }
 
-  function loadImage({ name, url }) {
+  function loadImage({ name, url, options }) {
     map.loadImage(url, (error, image) => {
       if (error) throw error;
-      map.addImage(name, image);
+      map.addImage(name, image, options);
     });
   }
 

lib/kino/maplibre.ex

@@ -219,8 +219,8 @@ defmodule Kino.MapLibre do
   """
   @spec add_custom_image(maplibre(), String.t(), String.t()) ::
           :ok | %__MODULE__{}
-  def add_custom_image(map, image_name, image_url) do
-    image = %{name: image_name, url: image_url}
+  def add_custom_image(map, image_name, image_url, opts \\ []) do
+    image = %{name: image_name, url: image_url, options: normalize_opts(opts)}
     update_events(map, :images, image)
   end
 
@@ -233,6 +233,14 @@ defmodule Kino.MapLibre do
     update_events(map, :jumps, jump)
   end
 
+  @doc """
+  Fits the map to the rectangle given by the 2 vertices in `bounds`
+  """
+  def fit_bounds(map, bounds, opts \\ []) do
+    fit_bounds = %{bounds: bounds, options: normalize_opts(opts)}
+    update_events(map, :fit_bounds, fit_bounds)
+  end
+
   @impl true
   def init(ml, ctx) do
     {:ok, assign(ctx, spec: ml.spec, events: ml.events)}
@@ -299,6 +307,12 @@ defmodule Kino.MapLibre do
     {:noreply, ctx}
   end
 
+  def handle_cast({:fit_bounds, bounds}, ctx) do
+    broadcast_event(ctx, "fit_bounds", bounds)
+    ctx = update_assigned_events(ctx, :fit_bounds, bounds)
+    {:noreply, ctx}
+  end
+
   defp update_events(%MapLibre{} = ml, key, value) do
     update_events(%__MODULE__{spec: ml.spec}, key, value)
   end

test/kino/maplibre_test.exs

@@ -291,16 +291,21 @@ defmodule Kino.MapLibreTest do
   describe "add_custom_image/3" do
     test "adds a custom image to a static map" do
       ml = Ml.new() |> Kino.MapLibre.add_custom_image("kitten", "kitten_url")
-      assert ml.events.images == [%{name: "kitten", url: "kitten_url"}]
+      assert ml.events.images == [%{name: "kitten", url: "kitten_url", options: %{}}]
     end
 
     test "adds a custom image to a dynamic map" do
       ml = Ml.new() |> Kino.MapLibre.new()
       Kino.MapLibre.add_custom_image(ml, "kitten", "kitten_url")
       data = connect(ml)
 
-      assert data.events.images == [%{name: "kitten", url: "kitten_url"}]
-      assert_broadcast_event(ml, "add_custom_image", %{name: "kitten", url: "kitten_url"})
+      assert data.events.images == [%{name: "kitten", url: "kitten_url", options: %{}}]
+
+      assert_broadcast_event(ml, "add_custom_image", %{
+        name: "kitten",
+        url: "kitten_url",
+        options: %{}
+      })
     end
 
     test "adds a custom image to a converted map" do
@@ -311,15 +316,20 @@ defmodule Kino.MapLibreTest do
       data = connect(ml)
 
       assert data.events.images == [
-               %{name: "another_kitten", url: "another_kitten_url"},
-               %{name: "kitten", url: "kitten_url"}
+               %{name: "another_kitten", url: "another_kitten_url", options: %{}},
+               %{name: "kitten", url: "kitten_url", options: %{}}
              ]
 
       assert_broadcast_event(ml, "add_custom_image", %{
         name: "another_kitten",
         url: "another_kitten_url"
       })
     end
+
+    test "broadcasts options as well" do
+      ml = Ml.new() |> Kino.MapLibre.add_custom_image("kitten", "kitten_url", sdf: true)
+      assert ml.events.images == [%{name: "kitten", url: "kitten_url", options: %{"sdf" => true}}]
+    end
   end
 
   describe "jump_to/3" do