APP-8726 Add google maps to MapLibre (#632)

Author: DTCurrie

packages/blocks/package.json

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

packages/blocks/src/lib/index.ts

@@ -28,7 +28,12 @@ export {
   cartesianToLngLat,
   cartesianToMercator,
 } from './maplibre/math';
-export { GeoPose, Waypoint } from './maplibre/types';
+export {
+  GeoPose,
+  Waypoint,
+  type MapProvider,
+  MapProviders,
+} from './maplibre/types';
 
 // Slam components
 export { default as SlamMap2D } from './slam-map-2d/index.svelte';

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

@@ -0,0 +1,52 @@
+import { describe, it, expect, vi } from 'vitest';
+
+// Mock maplibre-gl module to avoid URL.createObjectURL issues
+vi.mock('maplibre-gl', () => ({
+  LngLat: class {
+    constructor(
+      public lng: number,
+      public lat: number
+    ) {}
+  },
+  Map: vi.fn(),
+  NavigationControl: vi.fn(),
+  GeolocateControl: vi.fn(),
+  FullscreenControl: vi.fn(),
+  ScaleControl: vi.fn(),
+}));
+
+import { getStyleSpecification } from '../style';
+import { MapProviders } from '../types';
+
+describe('MapLibre Provider', () => {
+  describe('getStyle', () => {
+    it('should return OpenStreetMap style for open-streets provider', () => {
+      const style = getStyleSpecification('open-street');
+
+      expect(style.version).toBe(8);
+      expect(style.sources).toHaveProperty('osm');
+      expect(style.sources).toHaveProperty('satellite');
+      expect(style.layers).toHaveLength(2);
+    });
+
+    it('should return Google Maps style for google-maps provider with valid API key', () => {
+      const style = getStyleSpecification(
+        MapProviders.googleMaps,
+        'test_api_key'
+      );
+
+      expect(style.version).toBe(8);
+      expect(style.sources).toHaveProperty('google-maps');
+      expect(style.sources).toHaveProperty('satellite');
+      expect(style.layers).toHaveLength(2);
+    });
+
+    it('should fallback to OpenStreetMap when Google Maps API key is not configured', () => {
+      const style = getStyleSpecification(MapProviders.googleMaps);
+
+      expect(style.version).toBe(8);
+      expect(style.sources).toHaveProperty('osm');
+      expect(style.sources).toHaveProperty('satellite');
+    });
+  });
+});

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

@@ -6,7 +6,13 @@
   Children will mount once the map is fully loaded.
 
   ```svelte
-    <MapLibre>
+    <MapLibre mapProvider="open-street">
+      <MapLibreMarker lngLat={{ lng: 0, lat: 0 }} />
+    </MapLibre>
+  ```
+
+  ```svelte
+    <MapLibre mapProvider="google-maps" mapProviderKey="mycoolkey">
       <MapLibreMarker lngLat={{ lng: 0, lat: 0 }} />
     </MapLibre>
   ```
@@ -18,8 +24,9 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 import { onMount, tick } from 'svelte';
 import { provideMapContext } from './hooks';
 import { Map, type MapOptions } from 'maplibre-gl';
-import { style } from './style';
+import { getStyleSpecification } from './style';
 import { LngLat } from '$lib';
+import { MapProviders, type MapProvider } from './types';
 
 /** The minimum camera pitch. */
 export let minPitch = 0;
@@ -49,6 +56,20 @@ export let map: Map | undefined = undefined;
 
 export let options: Partial<MapOptions> | undefined = undefined;
 
+/**
+ * The map provider to use.
+ *
+ * @default 'open-street'
+ */
+export let mapProvider: MapProvider = MapProviders.openStreet;
+
+/**
+ * The API key for the map provider.
+ *
+ * @default undefined
+ */
+export let mapProviderKey: string | undefined = undefined;
+
 /** Fired after the map has been created. */
 export let onCreate: undefined | ((map: Map) => void) = undefined;
 
@@ -109,7 +130,7 @@ onMount(() => {
   map = new Map({
     antialias: true,
     container,
-    style,
+    style: getStyleSpecification(mapProvider, mapProviderKey),
     center,
     zoom,
     minPitch,
@@ -136,6 +157,7 @@ $: map?.setMinPitch(minPitch);
 $: map?.setMaxPitch(maxPitch);
 $: map?.setZoom(zoom);
 $: map?.setCenter(center);
+$: map?.setStyle(getStyleSpecification(mapProvider, mapProviderKey));
 </script>
 
 {#if created}

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

@@ -1,23 +1,66 @@
 import type { StyleSpecification } from 'maplibre-gl';
+import { MapProviders, type MapProvider } from './types';
 
-export const style: StyleSpecification = {
+const tileSize = 256;
+const maxzoom = 20;
+
+const getGoogleMapsStyle = (apiKey: string): StyleSpecification => ({
+  version: 8,
+  sources: {
+    [MapProviders.googleMaps]: {
+      type: 'raster',
+      tiles: [
+        `https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`,
+      ],
+      tileSize,
+      attribution: '© Google Maps',
+      maxzoom,
+    },
+    satellite: {
+      type: 'raster',
+      tiles: [
+        `https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&key=${apiKey}`,
+      ],
+      tileSize: 256,
+      attribution: '© Google Maps',
+      maxzoom,
+    },
+  },
+  layers: [
+    {
+      id: MapProviders.googleMaps,
+      type: 'raster',
+      source: MapProviders.googleMaps,
+    },
+    {
+      id: 'satellite',
+      type: 'raster',
+      source: 'satellite',
+      layout: {
+        visibility: 'none',
+      },
+    },
+  ],
+});
+
+const getOpenStreetMapStyle = (): StyleSpecification => ({
   version: 8,
   sources: {
     osm: {
       type: 'raster',
       tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
-      tileSize: 256,
+      tileSize,
       attribution: '© OpenStreetMap Contributors',
-      maxzoom: 19,
+      maxzoom,
     },
     satellite: {
       type: 'raster',
       tiles: [
         'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}',
       ],
-      tileSize: 256,
+      tileSize,
       attribution: '© USGS National Map Services',
-      maxzoom: 19,
+      maxzoom,
     },
   },
   layers: [
@@ -35,4 +78,23 @@ export const style: StyleSpecification = {
       },
     },
   ],
+});
+
+export const getStyleSpecification = (
+  provider: MapProvider,
+  apiKey?: string
+): StyleSpecification => {
+  switch (provider) {
+    case MapProviders.googleMaps: {
+      if (!apiKey) {
+        // eslint-disable-next-line no-console
+        console.warn('Google Maps API key is required');
+        return getOpenStreetMapStyle();
+      }
+      return getGoogleMapsStyle(apiKey);
+    }
+    case MapProviders.openStreet: {
+      return getOpenStreetMapStyle();
+    }
+  }
 };

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

@@ -1,6 +1,13 @@
 // eslint-disable-next-line max-classes-per-file
 import { LngLat } from 'maplibre-gl';
 
+export const MapProviders = {
+  openStreet: 'open-street',
+  googleMaps: 'google-maps',
+} as const;
+
+export type MapProvider = (typeof MapProviders)[keyof typeof MapProviders];
+
 export class GeoPose extends LngLat {
   rotation: number;
   constructor(lng: number, lat: number, rotation: number) {

packages/blocks/src/lib/navigation-map/components/map.svelte

@@ -4,6 +4,8 @@ import type { Map } from 'maplibre-gl';
 import {
   MapLibre,
   type GeoPose,
+  type MapProvider,
+  MapProviders,
   NavigationControls,
   SatelliteControls,
   FollowControls,
@@ -20,6 +22,12 @@ import type { Obstacle } from '../types';
 /** The Geo-pose of a robot base. */
 export let baseGeoPose: GeoPose | undefined = undefined;
 
+/** The map provider to use. */
+export let mapProvider: MapProvider = MapProviders.openStreet;
+
+/** The API key for the map provider. */
+export let mapProviderKey: string | undefined = undefined;
+
 const minPitch = 0;
 const maxPitch = 60;
 
@@ -42,6 +50,8 @@ let didHoverTooltip = Boolean(
     {minPitch}
     maxPitch={$view === '3D' ? maxPitch : minPitch}
     minZoom={6}
+    {mapProvider}
+    {mapProviderKey}
     bind:map
   >
     <NavigationControls showZoom={false} />

packages/blocks/src/lib/navigation-map/index.svelte

@@ -31,7 +31,12 @@ import {
   tab as tabStore,
   tabs as tabsStore,
 } from './stores';
-import type { GeoPose, Waypoint } from '$lib';
+import {
+  type GeoPose,
+  type Waypoint,
+  type MapProvider,
+  MapProviders,
+} from '$lib';
 
 /** The map environment. "debug" assumes the robot is on and connected. */
 export let environment: 'debug' | 'configure' = 'debug';
@@ -60,6 +65,12 @@ export let tabs: NavigationTabType[] = [
 /** The pose (Lng,Lat) and rotation of a base. */
 export let baseGeoPose: GeoPose | undefined = undefined;
 
+/** The map provider to use. */
+export let mapProvider: MapProvider = MapProviders.openStreet;
+
+/** The API key for the map provider. */
+export let mapProviderKey: string | undefined = undefined;
+
 export let onUpdate: (payload: Obstacle[]) => void;
 
 $: $tabStore = tab;
@@ -73,6 +84,8 @@ $: $envStore = environment;
 <Map
   bind:map
   {baseGeoPose}
+  {mapProvider}
+  {mapProviderKey}
   {onUpdate}
   on:add-waypoint
   on:delete-waypoint

packages/blocks/src/routes/+page.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
 import pointcloudUrl from '$lib/assets/pointcloud.pcd?url';
 import motionPath from '$lib/assets/cbirrtsmooth800.txt?raw';
-import { MapLibre, NavigationControls, SlamMap2D } from '$lib';
+import {
+  MapLibre,
+  NavigationControls,
+  SatelliteControls,
+  SlamMap2D,
+} from '$lib';
 import NavigationMap from './navigation-map.svelte';
 import FollowingMarker from './following-marker.svelte';
 
@@ -53,5 +58,17 @@ const path = () =>
     </div>
   </div>
 
+  <div class="px-12">
+    <div class="relative aspect-video w-full border border-gray-200 pt-0">
+      <MapLibre
+        mapProvider="google-maps"
+        mapProviderKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
+      >
+        <NavigationControls />
+        <SatelliteControls />
+      </MapLibre>
+    </div>
+  </div>
+
   <FollowingMarker />
 </div>