Make maplibre center prop reactive (viamrobotics#518)

micheal-parks · May 8, 2024 · 7dd93fb · 7dd93fb
1 parent ff4cc32
commit 7dd93fb
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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,22 +16,18 @@ 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>
 
 <div class="px-12">
   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}