add simple ECL compatibility example

visgl · Apr 3, 2024 · e41a74c · e41a74c
1 parent 0909f82
commit e41a74c
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 0 deletions.
diff --git a/examples/ecl-compat/README.md b/examples/ecl-compat/README.md
@@ -0,0 +1,38 @@
+# Basic Google Maps Setup Example
+
+![image](https://user-images.githubusercontent.com/39244966/208682692-d5b23518-9e51-4a87-8121-29f71e41c777.png)
+
+This is an example to show how to setup a simple Google Maps Map with the `<Map/>` component of the Google Maps React
+library.
+
+## Google Maps API key
+
+This example does not come with an API key. Running the examples locally requires a valid API key for the Google Maps Platform.
+See [the official documentation][get-api-key] on how to create and configure your own key.
+
+The API key has to be provided via an environment variable `GOOGLE_MAPS_API_KEY`. This can be done by creating a
+file named `.env` in the example directory with the following content:
+
+```shell title=".env"
+GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"
+```
+
+If you are on the CodeSandbox playground you can also choose to [provide the API key like this](https://codesandbox.io/docs/learn/environment/secrets)
+
+## Development
+
+Go into the example-directory and run
+
+```shell
+npm install
+```
+
+To start the example with the local library run
+
+```shell
+npm run start-local
+```
+
+The regular `npm start` task is only used for the standalone versions of the example (CodeSandbox for example)
+
+[get-api-key]: https://developers.google.com/maps/documentation/javascript/get-api-key
diff --git a/examples/ecl-compat/index.html b/examples/ecl-compat/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <title>Example:</title>
+
+    <style>
+      body {
+        margin: 0;
+        font-family: sans-serif;
+      }
+      #app {
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <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'));
+    </script>
+  </body>
+</html>
diff --git a/examples/ecl-compat/package.json b/examples/ecl-compat/package.json
@@ -0,0 +1,15 @@
+{
+  "type": "module",
+  "dependencies": {
+    "@googlemaps/extended-component-library": "^0.6.9",
+    "@vis.gl/react-google-maps": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^5.0.4"
+  },
+  "scripts": {
+    "start": "vite",
+    "start-local": "vite --config ../vite.config.local.js",
+    "build": "vite build"
+  }
+}
diff --git a/examples/ecl-compat/src/app.tsx b/examples/ecl-compat/src/app.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import {createRoot} from 'react-dom/client';
+import {APIProvider, Map} from '@vis.gl/react-google-maps';
+import {RouteOverview} from '@googlemaps/extended-component-library/react';
+import ControlPanel from './control-panel';
+
+const API_KEY =
+  globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string);
+
+const App = () => (
+  <APIProvider apiKey={API_KEY} version={'beta'}>
+    <Map
+      mapId={'49ae42fed52588c3'}
+      defaultCenter={{lat: 53.55, lng: 10.05}}
+      defaultZoom={10}
+      gestureHandling={'greedy'}
+      disableDefaultUI={true}>
+      <RouteOverview
+        originAddress={'Little Island, New York'}
+        destinationAddress={'Times Square Plaza, New York'}
+        travelMode={'walking'}
+        noPin></RouteOverview>
+    </Map>
+    <ControlPanel />
+  </APIProvider>
+);
+export default App;
+
+export function renderToDom(container: HTMLElement) {
+  const root = createRoot(container);
+
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}
diff --git a/examples/ecl-compat/src/control-panel.tsx b/examples/ecl-compat/src/control-panel.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+function ControlPanel() {
+  return (
+    <div className="control-panel">
+      <h3>Example Template</h3>
+      <p>
+        Add a brief description of the example here and update the link below
+      </p>
+
+      <div className="links">
+        <a
+          href="https://codesandbox.io/s/github/visgl/react-google-maps/tree/main/examples/_template"
+          target="_new">
+          Try on CodeSandbox ↗
+        </a>
+
+        <a
+          href="https://github.com/visgl/react-google-maps/tree/main/examples/_template"
+          target="_new">
+          View Code ↗
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export default React.memo(ControlPanel);
diff --git a/examples/ecl-compat/vite.config.js b/examples/ecl-compat/vite.config.js
@@ -0,0 +1,17 @@
+import {defineConfig, loadEnv} from 'vite';
+
+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/examples.js':
+          'https://visgl.github.io/react-google-maps/scripts/examples.js'
+      }
+    }
+  };
+});