feat(examples): adjust template

visgl · Jan 22, 2024 · ccc3c16 · ccc3c16
1 parent 61db3f8
commit ccc3c16
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/examples/_template/index.html b/examples/_template/index.html
@@ -22,6 +22,7 @@
     <div id="app"></div>
     <script type="module">
       import '@vis.gl/react-google-maps/examples.css';
+      import '@vis.gl/react-google-maps/examples.js';
       import {renderToDom} from './src/app';
 
       renderToDom(document.querySelector('#app'));

diff --git a/examples/_template/src/app.tsx b/examples/_template/src/app.tsx
@@ -1,12 +1,23 @@
-import React, {FunctionComponent} from 'react';
+import React from 'react';
 import {createRoot} from 'react-dom/client';
 
 import {APIProvider, Map} from '@vis.gl/react-google-maps';
+import ControlPanel from './control-panel';
 
-const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string;
-
-const App = () => <APIProvider apiKey={API_KEY}></APIProvider>;
+const API_KEY =
+  globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string);
 
+const App = () => (
+  <APIProvider apiKey={API_KEY}>
+    <Map
+      zoom={3}
+      center={{lat: 22.54992, lng: 0}}
+      gestureHandling={'greedy'}
+      disableDefaultUI={true}
+    />
+    <ControlPanel />
+  </APIProvider>
+);
 export default App;
 
 export function renderToDom(container: HTMLElement) {

diff --git a/examples/_template/vite.config.js b/examples/_template/vite.config.js
@@ -6,6 +6,12 @@ export default defineConfig(({mode}) => {
   return {
     define: {
       'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(GOOGLE_MAPS_API_KEY)
+    },
+    resolve: {
+      alias: {
+        '@vis.gl/react-google-maps/examples.js':
+          'https://visgl.github.io/react-google-maps/scripts/examples.js'
+      }
     }
   };
 });