From 7dd93fb8a8cef4cb2d3f5b7f48772f5d7f0da578 Mon Sep 17 00:00:00 2001
From: Micheal Parks <103450731+micheal-parks@users.noreply.github.com>
Date: Wed, 8 May 2024 13:37:19 -0400
Subject: [PATCH] Make maplibre center prop reactive (#518)

---
 packages/blocks/package.json                       | 2 +-
 packages/blocks/src/lib/maplibre/index.svelte      | 6 ++++--
 packages/blocks/src/routes/following-marker.svelte | 7 +------
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index 92580849..ee10656a 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-blocks",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/blocks/src/lib/maplibre/index.svelte b/packages/blocks/src/lib/maplibre/index.svelte
index b055cec7..4ceb8cf8 100644
--- a/packages/blocks/src/lib/maplibre/index.svelte
+++ b/packages/blocks/src/lib/maplibre/index.svelte
@@ -27,7 +27,7 @@ export let minPitch = 0;
 /** The maximum camera pitch. */
 export let maxPitch = 60;
 
-/** The initial map zoom. */
+/** The map zoom. */
 export let zoom = 9;
 
 /** The maximum zoom level of the map (0-24). */
@@ -37,7 +37,7 @@ export let minZoom = 0;
 export let maxZoom = 22;
 
 /**
- * The initial map center.
+ * The map center.
  *
  * @default { lng: -73.984421, lat: 40.7718116 }
  * The Viam Robotics office.
@@ -134,6 +134,8 @@ onMount(() => {
 
 $: map?.setMinPitch(minPitch);
 $: map?.setMaxPitch(maxPitch);
+$: map?.setZoom(zoom);
+$: map?.setCenter(center);
 </script>
 
 {#if created}
diff --git a/packages/blocks/src/routes/following-marker.svelte b/packages/blocks/src/routes/following-marker.svelte
index 57e03887..58092d84 100644
--- a/packages/blocks/src/routes/following-marker.svelte
+++ b/packages/blocks/src/routes/following-marker.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 import { MapLibre, MapLibreDirectionalMarker } from '$lib';
-import type { Map } from 'maplibre-gl';
 
 let lng = -73.98;
 let lat = 40.77;
@@ -17,11 +16,8 @@ const frame = (delta: number) => {
   rotation = (Math.atan2(dx, dy) - Math.atan2(lng, lat)) * RAD2DEG - 90;
   lat += dy;
   lng += dx;
-  map?.jumpTo({ center: { lng, lat } });
 };
 
-let map: Map | undefined;
-
 requestAnimationFrame(frame);
 </script>
 
@@ -29,10 +25,9 @@ requestAnimationFrame(frame);
   Following robot
   <div class="relative aspect-video w-full border border-gray-200 pt-0">
     <MapLibre
-      bind:map
       minZoom={10}
       center={{ lng, lat }}
-      onCreate={() => console.log('create')}
+      options={{ dragPan: false }}
     >
       <MapLibreDirectionalMarker
         {lng}