feat: adjust existing map3d example to use new component

Author: mrMetalWood

examples/map-3d/src/app.tsx

@@ -1,18 +1,28 @@
 import React, {useCallback, useState} from 'react';
 import {createRoot} from 'react-dom/client';
 
-import {APIProvider, MapMouseEvent} from '@vis.gl/react-google-maps';
+import {
+  APIProvider,
+  Map3D,
+  Map3DCameraChangedEvent,
+  MapMouseEvent
+} from '@vis.gl/react-google-maps';
 import ControlPanel from './control-panel';
 import {MiniMap} from './minimap';
 
-import {Map3D, Map3DCameraProps} from './map-3d';
-
 import './style.css';
 
-const API_KEY =
-  globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string);
+const API_KEY = 'AIzaSyDawI6PNc2EjUnzHhADtph4YWTj2PL-X6A';
+
+export type Map3DCameraProps = {
+  center: google.maps.LatLngAltitudeLiteral;
+  range: number;
+  heading: number;
+  tilt: number;
+  roll: number;
+};
 
-const INITIAL_VIEW_PROPS = {
+const INITIAL_VIEW_PROPS: Map3DCameraProps = {
   center: {lat: 37.72809, lng: -119.64473, altitude: 1300},
   range: 5000,
   heading: 61,
@@ -23,8 +33,8 @@ const INITIAL_VIEW_PROPS = {
 const Map3DExample = () => {
   const [viewProps, setViewProps] = useState(INITIAL_VIEW_PROPS);
 
-  const handleCameraChange = useCallback((props: Map3DCameraProps) => {
-    setViewProps(oldProps => ({...oldProps, ...props}));
+  const handleCameraChange = useCallback((ev: Map3DCameraChangedEvent) => {
+    setViewProps(oldProps => ({...oldProps, ...ev.detail}));
   }, []);
 
   const handleMapClick = useCallback((ev: MapMouseEvent) => {
@@ -38,18 +48,20 @@ const Map3DExample = () => {
     <>
       <Map3D
         {...viewProps}
-        onCameraChange={handleCameraChange}
+        onCameraChanged={handleCameraChange}
         defaultLabelsDisabled
+        mode="SATELLITE"
+        style={{width: '100vw', height: '100vh'}}
       />
 
-      <MiniMap camera3dProps={viewProps} onMapClick={handleMapClick}></MiniMap>
+      <MiniMap camera3dProps={viewProps} onMapClick={handleMapClick} />
     </>
   );
 };
 
 const App = () => {
   return (
-    <APIProvider apiKey={API_KEY} version={'alpha'}>
+    <APIProvider apiKey={API_KEY}>
       <Map3DExample />
       <ControlPanel />
     </APIProvider>

examples/map-3d/src/control-panel.tsx

@@ -8,8 +8,8 @@ function ControlPanel() {
     <div className="control-panel">
       <h3>3D Maps</h3>
       <p>
-        This example implements a new <code>Map3D</code> component that renders
-        a 3D Globe based on the new{' '}
+        This example showcases the <code>Map3D</code> component that renders a
+        3D globe based on the{' '}
         <a href={GMP_3D_MAPS_OVERVIEW_URL} target={'_blank'} rel="noreferrer">
           <code>Map3DElement</code>
         </a>{' '}

examples/map-3d/src/map-3d/index.ts

@@ -6,7 +6,7 @@ import {estimateCameraPosition} from './estimate-camera-position';
 import {CameraPositionMarker} from './camera-position-marker';
 import {ViewCenterMarker} from './view-center-marker';
 
-import type {Map3DCameraProps} from '../map-3d';
+import type {Map3DCameraProps} from '../app';
 
 type MiniMapProps = {
   camera3dProps: Map3DCameraProps;

examples/map-3d/src/map-3d/map-3d.tsx

@@ -52,6 +52,7 @@ describe('Map3D', () => {
     render(
       <APIProviderContext.Provider value={createMockContextValue()}>
         <Map3D
+          mode="SATELLITE"
           center={{lat: 37.7749, lng: -122.4194, altitude: 0}}
           range={1000}
         />
@@ -66,6 +67,7 @@ describe('Map3D', () => {
       <APIProviderContext.Provider value={createMockContextValue()}>
         <Map3D
           id="my-map"
+          mode="SATELLITE"
           center={{lat: 37.7749, lng: -122.4194, altitude: 0}}
           range={1000}
         />
@@ -80,6 +82,7 @@ describe('Map3D', () => {
       <APIProviderContext.Provider value={createMockContextValue()}>
         <Map3D
           className="custom-class"
+          mode="SATELLITE"
           center={{lat: 37.7749, lng: -122.4194, altitude: 0}}
           range={1000}
         />
@@ -94,6 +97,7 @@ describe('Map3D', () => {
       <APIProviderContext.Provider value={createMockContextValue()}>
         <Map3D
           style={{border: '1px solid red'}}
+          mode="SATELLITE"
           center={{lat: 37.7749, lng: -122.4194, altitude: 0}}
           range={1000}
         />
@@ -109,6 +113,7 @@ describe('Map3D', () => {
     render(
       <APIProviderContext.Provider value={createMockContextValue()}>
         <Map3D
+          mode="SATELLITE"
           center={{lat: 37.7749, lng: -122.4194, altitude: 0}}
           range={1000}>
           <div data-testid="child-element">Child content</div>

examples/map-3d/src/map-3d/use-map-3d-camera-events.ts

@@ -132,7 +132,7 @@ export type Map3DProps = PropsWithChildren<
        * Specifies a mode the map should be rendered in.
        * Import MapMode from '@vis.gl/react-google-maps' to use this.
        */
-      mode?: MapMode;
+      mode: MapMode;
 
       /**
        * Specifies how gesture events should be handled on the map.

examples/map-3d/src/minimap/minimap.tsx

@@ -43,7 +43,7 @@ export function useMap3DOptions(
         )
       )
         continue;
-      const value = (props as Record<string, unknown>)[key];
+      const value = (props as unknown as Record<string, unknown>)[key];
 
       if (value === undefined) continue;
 

src/components/__tests__/map-3d.test.tsx

@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["./src/**/*"],
+  "include": ["./src/**/*", "./types/**/*"],
   "exclude": ["./examples/**/*"],
   "compilerOptions": {
     "noEmit": false