Merge pull request #67 from ubilabs/feat/example-directions

feat(examples): example for useDirections hook

Author: BiniCodes

examples/directions/README.md

@@ -0,0 +1,37 @@
+# Basic Google Maps Setup Example
+
+This is an example setup to show the usage of the **useDirections hook with findAndRenderRoute** with the Google Maps React Hooks library.
+
+## Instructions
+
+To run this project, clone the Google Maps React Hooks repository locally.
+
+Go to the root of the repository and run
+
+
+```shell
+npm install
+```
+
+
+once to install all dependencies.
+
+Then start this example locally with
+
+
+```shell
+npm run start:directions-example
+```
+
+**NOTE**:
+To see the examples it is needed to add an `.env` file with a [Google Maps API key](https://developers.google.com/maps/documentation/embed/get-api-key#:~:text=Go%20to%20the%20Google%20Maps%20Platform%20%3E%20Credentials%20page.&text=On%20the%20Credentials%20page%2C%20click,Click%20Close.) in the following format:
+
+`GOOGLE_MAPS_API_KEY="<YOUR API KEY HERE>"`
+
+An example can be found in `.env.example`.
+
+## Output
+
+The project will start at [localhost:1234](http://localhost:1234) and show a Google Map with a route from Berlin to Munich, retrieved from directions.
+
+![image](https://user-images.githubusercontent.com/39244966/196410364-de14d9a0-5ecf-430d-846e-bc04e405b889.png)

examples/directions/app.tsx

@@ -0,0 +1,45 @@
+import React, {FunctionComponent, useState, useCallback} from 'react';
+import {GoogleMapProvider} from '@ubilabs/google-maps-react-hooks';
+
+import MapCanvas from './components/map-canvas/map-canvas';
+import DirectionsExample from './components/directions/directions';
+
+import {GOOGLE_MAPS_API_KEY} from '../constants';
+
+import './main.module.css';
+
+const mapOptions = {
+  center: {lat: 51.08998021141488, lng: 10.627828045134935},
+  zoom: 6,
+  disableDefaultUI: true,
+  zoomControl: false,
+  clickableIcons: false
+};
+
+const App: FunctionComponent<Record<string, unknown>> = () => {
+  const [mapContainer, setMapContainer] = useState<HTMLDivElement | null>(null);
+
+  const mapRef = useCallback(
+    (node: React.SetStateAction<HTMLDivElement | null>) => {
+      node && setMapContainer(node);
+    },
+    []
+  );
+
+  return (
+    <React.StrictMode>
+      <GoogleMapProvider
+        googleMapsAPIKey={GOOGLE_MAPS_API_KEY}
+        mapContainer={mapContainer}
+        options={mapOptions}
+      >
+        <div id="container">
+          <MapCanvas ref={mapRef} />
+          <DirectionsExample />
+        </div>
+      </GoogleMapProvider>
+    </React.StrictMode>
+  );
+};
+
+export default App;

examples/directions/components/directions/directions.tsx

@@ -0,0 +1,48 @@
+import {useEffect} from 'react';
+import {useDirections, useGoogleMap} from '@ubilabs/google-maps-react-hooks';
+
+const DirectionsExample = () => {
+  const {map} = useGoogleMap();
+
+  const directionsOptions = {
+    renderOnMap: true,
+    renderOptions: {
+      suppressMarkers: true,
+      polylineOptions: {strokeColor: '#FB2576', strokeWeight: 4}
+    }
+  };
+
+  // Use findAndRenderRoute to get directions and render a route to the map
+  const {findAndRenderRoute} = useDirections(directionsOptions);
+
+  useEffect(() => {
+    if (!map || !findAndRenderRoute) {
+      return;
+    }
+
+    // Form Request to pass to findAndRenderRoute
+    // https://developers.google.com/maps/documentation/javascript/directions#DirectionsRequests
+    const request = {
+      travelMode: google.maps.TravelMode.DRIVING,
+      origin: 'Berlin',
+      destination: 'München',
+      drivingOptions: {
+        departureTime: new Date(),
+        trafficModel: google.maps.TrafficModel.BEST_GUESS
+      }
+    };
+
+    findAndRenderRoute(request)
+      .then((result: google.maps.DirectionsResult) => {
+        // eslint-disable-next-line no-console
+        console.log(result);
+      })
+      .catch((errorStatus: google.maps.DirectionsStatus) => {
+        console.error(errorStatus);
+      });
+  }, [map]);
+
+  return null;
+};
+
+export default DirectionsExample;

examples/directions/components/map-canvas/map-canvas.module.css

@@ -0,0 +1,4 @@
+.map {
+  width: 100%;
+  height: 100%;
+}

examples/directions/components/map-canvas/map-canvas.tsx

@@ -0,0 +1,9 @@
+import React, {forwardRef} from 'react';
+
+import styles from './map-canvas.module.css';
+
+const MapCanvas = forwardRef<HTMLDivElement, Record<string, unknown>>(
+  (_, ref) => <div ref={ref} className={styles.map} />
+);
+
+export default MapCanvas;

examples/directions/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="de-DE">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
+    <title>
+      Example of the usage of the useDirections hook with the Google Maps React Hooks.
+    </title>
+    <meta
+      name="description"
+      content="Example of the usage of the useDirections hook with the Google Maps React Hooks."
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

examples/directions/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './app';
+
+ReactDOM.render(<App />, document.getElementById('app'));

examples/directions/main.module.css

@@ -0,0 +1,9 @@
+html,
+body,
+:global(#app),
+:global(#container) {
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}

examples/package.json

@@ -10,7 +10,8 @@
     "start:map-markers": "PARCEL_AUTOINSTALL=false parcel serve ./google-map-with-markers/index.html --dist-dir public --port 1234",
     "start:geocoding": "PARCEL_AUTOINSTALL=false parcel serve ./geocoding/index.html --dist-dir public --port 1234",
     "start:places": "PARCEL_AUTOINSTALL=false parcel serve ./places/index.html --dist-dir public --port 1234",
-    "start:autocomplete": "PARCEL_AUTOINSTALL=false parcel serve ./places-autocomplete/index.html --dist-dir public --port 1234"
+    "start:autocomplete": "PARCEL_AUTOINSTALL=false parcel serve ./places-autocomplete/index.html --dist-dir public --port 1234",
+    "start:directions": "PARCEL_AUTOINSTALL=false parcel serve ./directions/index.html --dist-dir public --port 1234"
   },
   "license": "MIT",
   "dependencies": {

package.json

@@ -26,7 +26,8 @@
     "start:map-with-markers": "cd examples && npm run clean-examples && npm i && npm run start:map-markers",
     "start:geocoding-example": "cd examples && npm run clean-examples && npm i && npm run start:geocoding",
     "start:places-example": "cd examples && npm run clean-examples && npm run start:places",
-    "start:autocomplete-example": "cd examples && npm run clean-examples && npm run start:autocomplete"
+    "start:autocomplete-example": "cd examples && npm run clean-examples && npm run start:autocomplete",
+    "start:directions-example": "cd examples && npm run clean-examples && npm run start:directions"
   },
   "keywords": [
     "React hooks",