sync max zoom for map code

packages/blocks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-blocks",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/viamrobotics/prime.git",

packages/blocks/src/lib/maplibre/index.svelte

@@ -27,6 +27,7 @@ import { Map, type MapOptions } from 'maplibre-gl';
 import { getStyleSpecification } from './style';
 import { LngLat } from '$lib';
 import { MapProviders, type MapProvider } from './types';
+import { DEFAULT_MAX_ZOOM } from './zoom';
 
 /** The minimum camera pitch. */
 export let minPitch = 0;
@@ -41,7 +42,7 @@ export let zoom = 9;
 export let minZoom = 0;
 
 /** The maximum zoom level of the map (0-24). */
-export let maxZoom = 22;
+export let maxZoom = DEFAULT_MAX_ZOOM;
 
 /**
  * The map center.
@@ -130,7 +131,7 @@ onMount(() => {
   map = new Map({
     antialias: true,
     container,
-    style: getStyleSpecification(mapProvider, mapProviderKey),
+    style: getStyleSpecification(mapProvider, mapProviderKey, maxZoom),
     center,
     zoom,
     minPitch,

packages/blocks/src/lib/maplibre/style.ts

@@ -1,10 +1,13 @@
 import type { StyleSpecification } from 'maplibre-gl';
 import { MapProviders, type MapProvider } from './types';
+import { DEFAULT_MAX_ZOOM } from './zoom';
 
 const tileSize = 256;
-const maxzoom = 20;
 
-const getGoogleMapsStyle = (apiKey: string): StyleSpecification => ({
+const getGoogleMapsStyle = (
+  apiKey: string,
+  maxzoom: number
+): StyleSpecification => ({
   version: 8,
   sources: {
     [MapProviders.googleMaps]: {
@@ -43,7 +46,7 @@ const getGoogleMapsStyle = (apiKey: string): StyleSpecification => ({
   ],
 });
 
-const getOpenStreetMapStyle = (): StyleSpecification => ({
+const getOpenStreetMapStyle = (maxzoom: number): StyleSpecification => ({
   version: 8,
   sources: {
     osm: {
@@ -82,19 +85,21 @@ const getOpenStreetMapStyle = (): StyleSpecification => ({
 
 export const getStyleSpecification = (
   provider: MapProvider,
-  apiKey?: string
+  apiKey?: string,
+  maxZoom?: number
 ): StyleSpecification => {
+  const maxzoom = maxZoom ?? DEFAULT_MAX_ZOOM;
   switch (provider) {
     case MapProviders.googleMaps: {
       if (!apiKey) {
         // eslint-disable-next-line no-console
         console.warn('Google Maps API key is required');
-        return getOpenStreetMapStyle();
+        return getOpenStreetMapStyle(maxzoom);
       }
-      return getGoogleMapsStyle(apiKey);
+      return getGoogleMapsStyle(apiKey, maxzoom);
     }
     case MapProviders.openStreet: {
-      return getOpenStreetMapStyle();
+      return getOpenStreetMapStyle(maxzoom);
     }
   }
 };

packages/blocks/src/lib/maplibre/zoom.ts

@@ -0,0 +1 @@
+export const DEFAULT_MAX_ZOOM = 21;