docs: add mapTypeId switching to change-map-id example (#11)

visgl · Oct 4, 2023 · 27c4f63 · 27c4f63
1 parent 1a0ac6e
commit 27c4f63
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 25 deletions.
diff --git a/examples/change-map-id/index.html b/examples/change-map-id/index.html
@@ -10,6 +10,7 @@
     <style>
       body {
         margin: 0;
+        font-family: sans-serif;
       }
       #app {
         width: 100vw;
@@ -20,7 +21,9 @@
   <body>
     <div id="app"></div>
     <script type="module">
+      import '../../website/src/styles.css';
       import {renderToDom} from './src/app';
+
       renderToDom(document.querySelector('#app'));
     </script>
   </body>

diff --git a/examples/change-map-id/src/app.tsx b/examples/change-map-id/src/app.tsx
@@ -2,35 +2,92 @@ import React, {useState} from 'react';
 import {createRoot} from 'react-dom/client';
 
 import {
-  AdvancedMarker,
+  Marker,
   APIProvider,
   InfoWindow,
   Map,
-  useAdvancedMarkerRef
+  useMarkerRef
 } from '@vis.gl/react-google-maps';
 import ControlPanel from './control-panel';
 
 const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string;
 
-const MAP_IDS = {
-  light: {label: 'Light', mapId: '49ae42fed52588c3'},
-  dark: {label: 'Dark', mapId: '739af084373f96fe'}
+const MapTypeId = {
+  HYBRID: 'hybrid',
+  ROADMAP: 'roadmap',
+  SATELLITE: 'satellite',
+  TERRAIN: 'terrain'
 };
+export type MapConfig = {
+  id: string;
+  label: string;
+  mapId?: string;
+  mapTypeId?: string;
+};
+
+const MAP_CONFIGS: MapConfig[] = [
+  {
+    id: 'light',
+    label: 'Light',
+    mapId: '49ae42fed52588c3',
+    mapTypeId: MapTypeId.ROADMAP
+  },
+  {
+    id: 'dark',
+    label: 'Dark',
+    mapId: '739af084373f96fe',
+    mapTypeId: MapTypeId.ROADMAP
+  },
+  {
+    id: 'satellite',
+    label: 'Satellite (no mapId)',
+    mapTypeId: MapTypeId.SATELLITE
+  },
+  {
+    id: 'hybrid',
+    label: 'Hybrid (no mapId)',
+    mapTypeId: MapTypeId.HYBRID
+  },
+  {
+    id: 'terrain',
+    label: 'Terrain (no mapId)',
+    mapTypeId: MapTypeId.TERRAIN
+  },
+  {
+    id: 'satellite2',
+    label: 'Satellite ("light" mapId)',
+    mapId: '49ae42fed52588c3',
+    mapTypeId: MapTypeId.SATELLITE
+  },
+  {
+    id: 'hybrid2',
+    label: 'Hybrid ("light" mapId)',
+    mapId: '49ae42fed52588c3',
+    mapTypeId: MapTypeId.HYBRID
+  },
+  {
+    id: 'terrain2',
+    label: 'Terrain ("light" mapId)',
+    mapId: '49ae42fed52588c3',
+    mapTypeId: MapTypeId.TERRAIN
+  }
+];
 
 const App = () => {
-  const [mapId, setMapId] = useState(MAP_IDS.light.mapId);
+  const [mapConfig, setMapConfig] = useState<MapConfig>(MAP_CONFIGS[0]);
   const [infowindowOpen, setInfowindowOpen] = useState(true);
-  const [markerRef, marker] = useAdvancedMarkerRef();
+  const [markerRef, marker] = useMarkerRef();
 
   return (
     <APIProvider apiKey={API_KEY}>
       <Map
-        mapId={mapId}
+        mapId={mapConfig.mapId}
+        mapTypeId={mapConfig.mapTypeId}
         center={{lat: 22, lng: 0}}
         zoom={3}
         gestureHandling={'greedy'}
         disableDefaultUI={true}>
-        <AdvancedMarker
+        <Marker
           ref={markerRef}
           onClick={() => setInfowindowOpen(true)}
           position={{lat: 28, lng: -82}}
@@ -48,9 +105,11 @@ const App = () => {
       </Map>
 
       <ControlPanel
-        mapIds={MAP_IDS}
-        selectedMapId={mapId}
-        setSelectedMapId={setMapId}
+        mapConfigs={MAP_CONFIGS}
+        mapConfigId={mapConfig.id}
+        onMapConfigIdChange={id =>
+          setMapConfig(MAP_CONFIGS.find(s => s.id === id)!)
+        }
       />
     </APIProvider>
   );

diff --git a/examples/change-map-id/src/control-panel.tsx b/examples/change-map-id/src/control-panel.tsx
@@ -1,15 +1,16 @@
 import * as React from 'react';
+import type {MapConfig} from './app';
 
 type ControlPanelProps = {
-  mapIds: {[key: string]: {label: string; mapId: string}};
-  selectedMapId: string;
-  setSelectedMapId: (id: string) => void;
+  mapConfigs: MapConfig[];
+  mapConfigId: string;
+  onMapConfigIdChange: (id: string) => void;
 };
 
 function ControlPanel({
-  mapIds,
-  selectedMapId,
-  setSelectedMapId
+  mapConfigs,
+  mapConfigId,
+  onMapConfigIdChange
 }: ControlPanelProps) {
   return (
     <div className="control-panel">
@@ -25,12 +26,12 @@ function ControlPanel({
       </p>
 
       <div>
-        <label>MapId:</label>
+        <label>Map Configuration</label>
         <select
-          value={selectedMapId}
-          onChange={ev => setSelectedMapId(ev.target.value)}>
-          {Object.entries(mapIds).map(([key, {label, mapId}]) => (
-            <option key={key} value={mapId}>
+          value={mapConfigId}
+          onChange={ev => onMapConfigIdChange(ev.target.value)}>
+          {mapConfigs.map(({id, label}) => (
+            <option key={id} value={id}>
               {label}
             </option>
           ))}
@@ -39,7 +40,7 @@ function ControlPanel({
 
       <div className="source-link">
         <a
-          href="https://github.com/visgl/react-google-maps/tree/main/examples/_template"
+          href="https://github.com/visgl/react-google-maps/tree/main/examples/change-map-id"
           target="_new">
           View Code ↗
         </a>

diff --git a/examples/change-map-id/vite.config.js b/examples/change-map-id/vite.config.js
@@ -1,12 +1,17 @@
-/* @ts-check */
 import {defineConfig, loadEnv} from 'vite';
+import {resolve} from 'node:path';
 
 export default defineConfig(({mode}) => {
   const {GOOGLE_MAPS_API_KEY} = loadEnv(mode, process.cwd(), '');
 
   return {
     define: {
       'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
+    },
+    resolve: {
+      alias: {
+        '@vis.gl/react-google-maps': resolve('../../src/index.ts')
+      }
     }
   };
 });