diff --git a/examples/map-control/README.md b/examples/map-control/README.md new file mode 100644 index 00000000..47776e7c --- /dev/null +++ b/examples/map-control/README.md @@ -0,0 +1,35 @@ +# Custom Map Control Example + +This is an example to show how to add custom map-controls. + +## 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="" +``` + +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/map-control/index.html b/examples/map-control/index.html new file mode 100644 index 00000000..ed5c0de9 --- /dev/null +++ b/examples/map-control/index.html @@ -0,0 +1,30 @@ + + + + + + Example: Custom Map Control + + + + +
+ + + diff --git a/examples/map-control/package.json b/examples/map-control/package.json new file mode 100644 index 00000000..b1de7319 --- /dev/null +++ b/examples/map-control/package.json @@ -0,0 +1,13 @@ +{ + "dependencies": { + "@vis.gl/react-google-maps": "*", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "vite": "^4.3.9" + }, + "scripts": { + "start": "vite", + "start-local": "vite --config ../vite.config.local.js", + "build": "vite build" + } +} diff --git a/examples/map-control/src/app.tsx b/examples/map-control/src/app.tsx new file mode 100644 index 00000000..924c3574 --- /dev/null +++ b/examples/map-control/src/app.tsx @@ -0,0 +1,67 @@ +import React, {useMemo, useState} from 'react'; +import {createRoot} from 'react-dom/client'; + +import { + APIProvider, + ControlPosition, + Map, + MapControl +} from '@vis.gl/react-google-maps'; + +import ControlPanel from './control-panel'; +import {CustomZoomControl} from './custom-zoom-control'; + +const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string; + +const App = () => { + const [controlPosition, setControlControlPosition] = + useState(ControlPosition.LEFT_BOTTOM); + + const [zoom, setZoom] = useState(4); + const center = useMemo(() => ({lat: 0, lng: 20}), []); + + return ( + + setZoom(ev.detail.zoom)}> + +
+ Zoom: {zoom.toFixed(2)} +
+ + + setZoom(zoom)} + /> + + + setControlControlPosition(p)} + /> + + ); +}; + +export default App; + +export function renderToDom(container: HTMLElement) { + const root = createRoot(container); + + root.render( + + + + ); +} diff --git a/examples/map-control/src/control-panel.tsx b/examples/map-control/src/control-panel.tsx new file mode 100644 index 00000000..4d3cfa86 --- /dev/null +++ b/examples/map-control/src/control-panel.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; + +import {ControlPosition} from '@vis.gl/react-google-maps'; + +export type ControlPanelProps = { + position: ControlPosition; + onControlPositionChange: (position: ControlPosition) => void; +}; + +function ControlPanel({position, onControlPositionChange}: ControlPanelProps) { + const positionOptions: {key: string; value: ControlPosition}[] = []; + + for (const [p, v] of Object.entries(ControlPosition)) { + positionOptions.push({key: p, value: v as ControlPosition}); + } + + return ( +
+

MapControl Example

+

+ Demonstrates how to use the <MapControl> component to + add custom control components to the map. +

+ +
+ + +
+ +
+ + Try on CodeSandbox ↗ + + + + View Code ↗ + +
+
+ ); +} + +export default React.memo(ControlPanel); diff --git a/examples/map-control/src/custom-zoom-control.tsx b/examples/map-control/src/custom-zoom-control.tsx new file mode 100644 index 00000000..3ceaf65f --- /dev/null +++ b/examples/map-control/src/custom-zoom-control.tsx @@ -0,0 +1,38 @@ +import {ControlPosition, MapControl} from '@vis.gl/react-google-maps'; +import React from 'react'; + +type CustomZoomControlProps = { + controlPosition: ControlPosition; + zoom: number; + onZoomChange: (zoom: number) => void; +}; + +export const CustomZoomControl = ({ + controlPosition, + zoom, + onZoomChange +}: CustomZoomControlProps) => { + return ( + +
+ + onZoomChange(ev.target.valueAsNumber)} + /> +
+ + ); +}; diff --git a/examples/map-control/vite.config.js b/examples/map-control/vite.config.js new file mode 100644 index 00000000..187e629c --- /dev/null +++ b/examples/map-control/vite.config.js @@ -0,0 +1,11 @@ +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) + } + }; +}); diff --git a/website/src/examples-sidebar.js b/website/src/examples-sidebar.js index b816ced7..1b1f02a7 100644 --- a/website/src/examples-sidebar.js +++ b/website/src/examples-sidebar.js @@ -8,7 +8,12 @@ const sidebars = { { type: 'category', label: 'Examples', - items: ['basic-map', 'markers-and-infowindows', 'change-map-id'] + items: [ + 'basic-map', + 'markers-and-infowindows', + 'change-map-id', + 'map-control' + ] } ] }; diff --git a/website/src/examples/map-control.mdx b/website/src/examples/map-control.mdx new file mode 100644 index 00000000..0eb3fdb3 --- /dev/null +++ b/website/src/examples/map-control.mdx @@ -0,0 +1,5 @@ +# Custom Map Controls + +import App from 'website-examples/map-control/src/app'; + + diff --git a/website/static/images/examples/map-control.jpg b/website/static/images/examples/map-control.jpg new file mode 100644 index 00000000..686da928 Binary files /dev/null and b/website/static/images/examples/map-control.jpg differ