From 3774d5709145f598e0cfd9094198a90911c89530 Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Thu, 2 Nov 2023 13:15:44 +0100 Subject: [PATCH 01/19] feat(examples): first standalone test with basic map --- examples/basic-map/index.html | 4 +- examples/basic-map/package.json | 3 +- examples/basic-map/src/app.tsx | 4 +- examples/basic-map/src/control-panel.tsx | 2 +- examples/basic-map/src/lib/get-api-key.ts | 20 + examples/basic-map/src/styles.css | 111 ++++++ examples/basic-map/vite.config.js | 24 +- examples/vite.config.local.js | 17 + package-lock.json | 463 +++++++++++++++++++++- package.json | 3 +- website/docusaurus.config.js | 5 +- website/src/styles.css | 97 ----- 12 files changed, 631 insertions(+), 122 deletions(-) create mode 100644 examples/basic-map/src/lib/get-api-key.ts create mode 100644 examples/basic-map/src/styles.css create mode 100644 examples/vite.config.local.js diff --git a/examples/basic-map/index.html b/examples/basic-map/index.html index cdb709c..1ff5113 100644 --- a/examples/basic-map/index.html +++ b/examples/basic-map/index.html @@ -21,9 +21,9 @@ -
+
diff --git a/examples/basic-map/package.json b/examples/basic-map/package.json index e3493f5..7df7233 100644 --- a/examples/basic-map/package.json +++ b/examples/basic-map/package.json @@ -6,7 +6,8 @@ "vite": "^4.3.9" }, "scripts": { - "start": "vite", + "start": "vite --open", + "start-local": "vite --config ../vite.config.local.js", "build": "vite build" } } diff --git a/examples/basic-map/src/app.tsx b/examples/basic-map/src/app.tsx index ff560e4..68bcebe 100644 --- a/examples/basic-map/src/app.tsx +++ b/examples/basic-map/src/app.tsx @@ -4,7 +4,9 @@ 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; +import {getApiKey} from './lib/get-api-key'; + +const API_KEY = getApiKey(); const App = () => ( diff --git a/examples/basic-map/src/control-panel.tsx b/examples/basic-map/src/control-panel.tsx index d623b6d..1942bd8 100644 --- a/examples/basic-map/src/control-panel.tsx +++ b/examples/basic-map/src/control-panel.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; function ControlPanel() { return ( -
+

Basic Map

The simplest example possible, just rendering a google map with some diff --git a/examples/basic-map/src/lib/get-api-key.ts b/examples/basic-map/src/lib/get-api-key.ts new file mode 100644 index 0000000..e7c7ca8 --- /dev/null +++ b/examples/basic-map/src/lib/get-api-key.ts @@ -0,0 +1,20 @@ +export function getApiKey() { + const url = new URL(location.href); + const apiKey = + url.searchParams.get('apiKey') || + (process.env.GOOGLE_MAPS_API_KEY as string); + + if (!apiKey) { + const key = prompt( + 'Please provide your Google Maps API key in the URL\n' + + '(using the parameter `?apiKey=YOUR_API_KEY_HERE`) or enter it here:' + ); + + if (key) { + url.searchParams.set('apiKey', key); + location.replace(url.toString()); + } + } + + return apiKey; +} diff --git a/examples/basic-map/src/styles.css b/examples/basic-map/src/styles.css new file mode 100644 index 0000000..8513ec4 --- /dev/null +++ b/examples/basic-map/src/styles.css @@ -0,0 +1,111 @@ +.control-panel-basic-map { + font-size: 14px; + line-height: 18px; + width: 284px; + background: #fff; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); + margin: 24px; + padding: 12px 24px; + position: absolute; + top: 0; + right: 0; + outline: none; + cursor: auto; + + & h3 { + font-size: 1.2em; + font-weight: 500; + margin: 8px 0; + } + + & a { + display: inline; + } + + & p { + margin-bottom: 16px; + } + + .legend { + display: inline-block; + width: 12px; + height: 12px; + } + + & hr { + margin: 12px -24px; + } + + .source-link { + text-align: right; + margin-top: 8px; + + & a { + font-weight: bold; + color: #486865; + font-size: 11px; + } + } + + .input { + position: relative; + display: flex; + width: 100%; + opacity: 1; + + > * { + vertical-align: middle; + white-space: nowrap; + } + + & label { + text-transform: uppercase; + width: 50%; + margin-right: 10%; + color: #486865; + margin-bottom: 4px; + } + + & input, + & a { + font-size: 0.9em; + display: inline-block; + padding: 0 4px; + width: 40%; + height: 20px; + line-height: 1.833; + } + + & input[type='checkbox'] { + height: auto; + } + + & input[type='checkbox'], + & input[type='radio'], + & input[type='color'] { + width: 20%; + } + + & input { + border: solid 1px #ccc; + + &:disabled { + background: #fff; + } + } + + .tooltip { + left: 50%; + top: 24px; + opacity: 0; + pointer-events: none; + transition: opacity 200ms; + } + + &:hover { + .tooltip { + opacity: 1; + } + } + } +} diff --git a/examples/basic-map/vite.config.js b/examples/basic-map/vite.config.js index 17260d5..1d6187b 100644 --- a/examples/basic-map/vite.config.js +++ b/examples/basic-map/vite.config.js @@ -1,17 +1,7 @@ -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') - } - } - }; -}); +export default { + define: { + 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify( + process.env.GOOGLE_MAPS_API_KEY + ) + } +}; diff --git a/examples/vite.config.local.js b/examples/vite.config.local.js new file mode 100644 index 0000000..17260d5 --- /dev/null +++ b/examples/vite.config.local.js @@ -0,0 +1,17 @@ +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') + } + } + }; +}); diff --git a/package-lock.json b/package-lock.json index e935311..6bc7d95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,7 +30,8 @@ "react": ">=16.8.0", "react-dom": ">=16.8.0", "ts-jest": "^29.0.5", - "typescript": "^5.1.6" + "typescript": "^5.1.6", + "vite": "^4.5.0" }, "peerDependencies": { "react": ">=16.8.0", @@ -2103,6 +2104,358 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "node_modules/@esbuild/android-arm": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz", + "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz", + "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz", + "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz", + "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz", + "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz", + "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz", + "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz", + "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz", + "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz", + "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz", + "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz", + "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz", + "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz", + "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz", + "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz", + "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz", + "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz", + "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz", + "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz", + "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz", + "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz", + "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -5029,6 +5382,43 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/esbuild": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", + "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/android-arm": "0.18.20", + "@esbuild/android-arm64": "0.18.20", + "@esbuild/android-x64": "0.18.20", + "@esbuild/darwin-arm64": "0.18.20", + "@esbuild/darwin-x64": "0.18.20", + "@esbuild/freebsd-arm64": "0.18.20", + "@esbuild/freebsd-x64": "0.18.20", + "@esbuild/linux-arm": "0.18.20", + "@esbuild/linux-arm64": "0.18.20", + "@esbuild/linux-ia32": "0.18.20", + "@esbuild/linux-loong64": "0.18.20", + "@esbuild/linux-mips64el": "0.18.20", + "@esbuild/linux-ppc64": "0.18.20", + "@esbuild/linux-riscv64": "0.18.20", + "@esbuild/linux-s390x": "0.18.20", + "@esbuild/linux-x64": "0.18.20", + "@esbuild/netbsd-x64": "0.18.20", + "@esbuild/openbsd-x64": "0.18.20", + "@esbuild/sunos-x64": "0.18.20", + "@esbuild/win32-arm64": "0.18.20", + "@esbuild/win32-ia32": "0.18.20", + "@esbuild/win32-x64": "0.18.20" + } + }, "node_modules/escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -11507,6 +11897,77 @@ "spdx-expression-parse": "^3.0.0" } }, + "node_modules/vite": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz", + "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==", + "dev": true, + "dependencies": { + "esbuild": "^0.18.10", + "postcss": "^8.4.27", + "rollup": "^3.27.1" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "@types/node": ">= 14", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, + "node_modules/vite/node_modules/rollup": { + "version": "3.29.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", + "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", + "dev": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=14.18.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, "node_modules/w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", diff --git a/package.json b/package.json index 1865f1b..ac1dba8 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "react": ">=16.8.0", "react-dom": ">=16.8.0", "ts-jest": "^29.0.5", - "typescript": "^5.1.6" + "typescript": "^5.1.6", + "vite": "^4.5.0" } } diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index f58127a..2dedfd3 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -38,7 +38,10 @@ const config = { 'https://github.com/visgl/react-google-maps/tree/main/website' }, theme: { - customCss: [resolve('./src/styles.css')] + customCss: [ + resolve('./src/styles.css'), + resolve('../examples/basic-map/src/styles.css') + ] } }) ] diff --git a/website/src/styles.css b/website/src/styles.css index 6c63d33..e96d317 100644 --- a/website/src/styles.css +++ b/website/src/styles.css @@ -62,100 +62,3 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { z-index: 9; pointer-events: none; } - -.control-panel { - font-size: 14px; - line-height: 18px; - width: 284px; - background: #fff; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); - margin: 24px; - padding: 12px 24px; - position: absolute; - top: 0; - right: 0; - outline: none; - cursor: auto; -} - -.control-panel h3 { - font-size: 1.2em; - font-weight: 500; - margin: 8px 0; -} - -.control-panel a { - display: inline; -} - -.control-panel p { - margin-bottom: 16px; -} - -.control-panel .legend { - display: inline-block; - width: 12px; - height: 12px; -} -.control-panel hr { - margin: 12px -24px; -} -.control-panel .source-link { - text-align: right; - margin-top: 8px; -} -.control-panel .source-link a { - font-weight: bold; - color: #486865; - font-size: 11px; -} -.control-panel .input { - position: relative; - display: flex; - width: 100%; -} - -.control-panel .input>* { - vertical-align: middle; - white-space: nowrap; -} -.control-panel .input label { - text-transform: uppercase; - width: 50%; - margin-right: 10%; - color: #486865; - margin-bottom: 4px; -} -.control-panel .input input, .control-panel .input a { - font-size: 0.9em; - display: inline-block; - padding: 0 4px; - width: 40%; - height: 20px; - line-height: 1.833; -} -.control-panel .input input[type="checkbox"], -.control-panel .input input[type="radio"], -.control-panel .input input[type="color"] { - width: 20%; -} -.control-panel .input input { - border: solid 1px #ccc; -} -.control-panel .input input:disabled { - background: #fff; -} -.control-panel .input input[type="checkbox"] { - height: auto; -} - -.control-panel .input .tooltip { - left: 50%; - top: 24px; - opacity: 0; - pointer-events: none; - transition: opacity 200ms; -} -.control-panel .input:hover .tooltip { - opacity: 1; -} From 68b4f3356f914dcda9b60bfd926217408c3df832 Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Thu, 2 Nov 2023 13:21:46 +0100 Subject: [PATCH 02/19] feat(examples): remove the --open modifier --- examples/basic-map/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/basic-map/package.json b/examples/basic-map/package.json index 7df7233..b1de731 100644 --- a/examples/basic-map/package.json +++ b/examples/basic-map/package.json @@ -6,7 +6,7 @@ "vite": "^4.3.9" }, "scripts": { - "start": "vite --open", + "start": "vite", "start-local": "vite --config ../vite.config.local.js", "build": "vite build" } From f1c58d12fa71cce6329d7b8749a75f6e76844e55 Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Thu, 2 Nov 2023 13:42:27 +0100 Subject: [PATCH 03/19] feat(examples): remove not needed styles from basic map --- examples/basic-map/src/styles.css | 77 +------------------------------ 1 file changed, 1 insertion(+), 76 deletions(-) diff --git a/examples/basic-map/src/styles.css b/examples/basic-map/src/styles.css index 8513ec4..b5640bb 100644 --- a/examples/basic-map/src/styles.css +++ b/examples/basic-map/src/styles.css @@ -11,6 +11,7 @@ right: 0; outline: none; cursor: auto; + box-sizing: border-box; & h3 { font-size: 1.2em; @@ -18,24 +19,10 @@ margin: 8px 0; } - & a { - display: inline; - } - & p { margin-bottom: 16px; } - .legend { - display: inline-block; - width: 12px; - height: 12px; - } - - & hr { - margin: 12px -24px; - } - .source-link { text-align: right; margin-top: 8px; @@ -46,66 +33,4 @@ font-size: 11px; } } - - .input { - position: relative; - display: flex; - width: 100%; - opacity: 1; - - > * { - vertical-align: middle; - white-space: nowrap; - } - - & label { - text-transform: uppercase; - width: 50%; - margin-right: 10%; - color: #486865; - margin-bottom: 4px; - } - - & input, - & a { - font-size: 0.9em; - display: inline-block; - padding: 0 4px; - width: 40%; - height: 20px; - line-height: 1.833; - } - - & input[type='checkbox'] { - height: auto; - } - - & input[type='checkbox'], - & input[type='radio'], - & input[type='color'] { - width: 20%; - } - - & input { - border: solid 1px #ccc; - - &:disabled { - background: #fff; - } - } - - .tooltip { - left: 50%; - top: 24px; - opacity: 0; - pointer-events: none; - transition: opacity 200ms; - } - - &:hover { - .tooltip { - opacity: 1; - } - } - } } From aed82c36d59593a52768a282de7debfbe500a2ee Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Thu, 2 Nov 2023 13:43:38 +0100 Subject: [PATCH 04/19] feat(examples): restructure map id example --- examples/change-map-id/index.html | 2 +- examples/change-map-id/package.json | 1 + examples/change-map-id/src/control-panel.tsx | 2 +- examples/change-map-id/src/styles.css | 36 ++++++++++++++++++++ examples/change-map-id/vite.config.js | 24 ++++--------- website/docusaurus.config.js | 3 +- 6 files changed, 48 insertions(+), 20 deletions(-) create mode 100644 examples/change-map-id/src/styles.css diff --git a/examples/change-map-id/index.html b/examples/change-map-id/index.html index d7aee19..1aac72e 100644 --- a/examples/change-map-id/index.html +++ b/examples/change-map-id/index.html @@ -21,7 +21,7 @@

diff --git a/examples/deckgl-overlay/package.json b/examples/deckgl-overlay/package.json index 80229c0..d4a36f2 100644 --- a/examples/deckgl-overlay/package.json +++ b/examples/deckgl-overlay/package.json @@ -9,6 +9,7 @@ }, "scripts": { "start": "vite", + "start-local": "vite --config ../vite.config.local.js", "build": "vite build" } } diff --git a/examples/deckgl-overlay/src/app.tsx b/examples/deckgl-overlay/src/app.tsx index 00800e5..12bcfc0 100644 --- a/examples/deckgl-overlay/src/app.tsx +++ b/examples/deckgl-overlay/src/app.tsx @@ -10,6 +10,7 @@ const DATA_URL = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart.geo.json'; import type {Feature, GeoJSON} from 'geojson'; +import ControlPanel from './control-panel'; const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string; @@ -32,6 +33,7 @@ const App = () => { disableDefaultUI={true}> + ); }; diff --git a/examples/deckgl-overlay/src/control-panel.tsx b/examples/deckgl-overlay/src/control-panel.tsx index 92aeef8..99492fb 100644 --- a/examples/deckgl-overlay/src/control-panel.tsx +++ b/examples/deckgl-overlay/src/control-panel.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; function ControlPanel() { return ( -
+

deck.gl Interleaved Overlay Example

An example demonstrating how an interleaved deck.gl overlay can be added diff --git a/examples/deckgl-overlay/src/styles.css b/examples/deckgl-overlay/src/styles.css new file mode 100644 index 0000000..776fc5c --- /dev/null +++ b/examples/deckgl-overlay/src/styles.css @@ -0,0 +1,35 @@ +.control-panel-deckgl { + font-size: 14px; + line-height: 18px; + width: 284px; + background: #fff; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); + margin: 24px; + padding: 12px 24px; + position: absolute; + top: 0; + right: 0; + outline: none; + cursor: auto; + + & h3 { + font-size: 1.2em; + font-weight: 500; + margin: 8px 0; + } + + & p { + margin-bottom: 16px; + } + + .source-link { + text-align: right; + margin-top: 8px; + + & a { + font-weight: bold; + color: #486865; + font-size: 11px; + } + } +} diff --git a/examples/deckgl-overlay/vite.config.js b/examples/deckgl-overlay/vite.config.js index 17260d5..1d6187b 100644 --- a/examples/deckgl-overlay/vite.config.js +++ b/examples/deckgl-overlay/vite.config.js @@ -1,17 +1,7 @@ -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') - } - } - }; -}); +export default { + define: { + 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify( + process.env.GOOGLE_MAPS_API_KEY + ) + } +}; diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index ff8160a..692f0c5 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -41,7 +41,8 @@ const config = { customCss: [ resolve('./src/styles.css'), resolve('../examples/basic-map/src/styles.css'), - resolve('../examples/change-map-id/src/styles.css') + resolve('../examples/change-map-id/src/styles.css'), + resolve('../examples/deckgl-overlay/src/styles.css') ] } }) From fe1b65b63ac61d332204ab4046d99dc964834b65 Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Thu, 2 Nov 2023 14:00:50 +0100 Subject: [PATCH 06/19] feat(examples): restructure markers and IW example --- examples/markers-and-infowindows/index.html | 2 +- examples/markers-and-infowindows/package.json | 1 + .../src/control-panel.tsx | 2 +- .../markers-and-infowindows/src/styles.css | 36 +++++++++++++++++++ .../markers-and-infowindows/vite.config.js | 24 ++++--------- website/docusaurus.config.js | 3 +- 6 files changed, 48 insertions(+), 20 deletions(-) create mode 100644 examples/markers-and-infowindows/src/styles.css diff --git a/examples/markers-and-infowindows/index.html b/examples/markers-and-infowindows/index.html index 1faa0d2..58def60 100644 --- a/examples/markers-and-infowindows/index.html +++ b/examples/markers-and-infowindows/index.html @@ -21,7 +21,7 @@

diff --git a/examples/markers-and-infowindows/package.json b/examples/markers-and-infowindows/package.json index e3493f5..b1de731 100644 --- a/examples/markers-and-infowindows/package.json +++ b/examples/markers-and-infowindows/package.json @@ -7,6 +7,7 @@ }, "scripts": { "start": "vite", + "start-local": "vite --config ../vite.config.local.js", "build": "vite build" } } diff --git a/examples/markers-and-infowindows/src/control-panel.tsx b/examples/markers-and-infowindows/src/control-panel.tsx index 24ac380..b4a4d09 100644 --- a/examples/markers-and-infowindows/src/control-panel.tsx +++ b/examples/markers-and-infowindows/src/control-panel.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; function ControlPanel() { return ( -
+

Markers and InfoWindows

This example shows the different ways to add markers and infowindows to diff --git a/examples/markers-and-infowindows/src/styles.css b/examples/markers-and-infowindows/src/styles.css new file mode 100644 index 0000000..a7f22b4 --- /dev/null +++ b/examples/markers-and-infowindows/src/styles.css @@ -0,0 +1,36 @@ +.control-panel-markers-and-infowindows { + font-size: 14px; + line-height: 18px; + width: 284px; + background: #fff; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); + margin: 24px; + padding: 12px 24px; + position: absolute; + top: 0; + right: 0; + outline: none; + cursor: auto; + box-sizing: border-box; + + & h3 { + font-size: 1.2em; + font-weight: 500; + margin: 8px 0; + } + + & p { + margin-bottom: 16px; + } + + .source-link { + text-align: right; + margin-top: 8px; + + & a { + font-weight: bold; + color: #486865; + font-size: 11px; + } + } +} diff --git a/examples/markers-and-infowindows/vite.config.js b/examples/markers-and-infowindows/vite.config.js index 17260d5..1d6187b 100644 --- a/examples/markers-and-infowindows/vite.config.js +++ b/examples/markers-and-infowindows/vite.config.js @@ -1,17 +1,7 @@ -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') - } - } - }; -}); +export default { + define: { + 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify( + process.env.GOOGLE_MAPS_API_KEY + ) + } +}; diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 692f0c5..a0bbd6d 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -42,7 +42,8 @@ const config = { resolve('./src/styles.css'), resolve('../examples/basic-map/src/styles.css'), resolve('../examples/change-map-id/src/styles.css'), - resolve('../examples/deckgl-overlay/src/styles.css') + resolve('../examples/deckgl-overlay/src/styles.css'), + resolve('../examples/markers-and-infowindows/src/styles.css') ] } }) From e4d8f0b0936e86b475ad7817f54d1fa2e401c9bc Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Thu, 2 Nov 2023 14:01:14 +0100 Subject: [PATCH 07/19] feat(examples): use border-box for control panel --- examples/deckgl-overlay/src/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/deckgl-overlay/src/styles.css b/examples/deckgl-overlay/src/styles.css index 776fc5c..cb04db8 100644 --- a/examples/deckgl-overlay/src/styles.css +++ b/examples/deckgl-overlay/src/styles.css @@ -11,6 +11,7 @@ right: 0; outline: none; cursor: auto; + box-sizing: border-box; & h3 { font-size: 1.2em; From 1dc45d0e7a16f4df6fb16203126d96c646dde8cb Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Thu, 2 Nov 2023 14:06:13 +0100 Subject: [PATCH 08/19] feat(examples): adjust example template --- examples/_template/package.json | 1 + examples/_template/src/styles.css | 36 +++++++++++++++++++++++++++++++ examples/_template/vite.config.js | 24 ++++++--------------- 3 files changed, 44 insertions(+), 17 deletions(-) create mode 100644 examples/_template/src/styles.css diff --git a/examples/_template/package.json b/examples/_template/package.json index e3493f5..b1de731 100644 --- a/examples/_template/package.json +++ b/examples/_template/package.json @@ -7,6 +7,7 @@ }, "scripts": { "start": "vite", + "start-local": "vite --config ../vite.config.local.js", "build": "vite build" } } diff --git a/examples/_template/src/styles.css b/examples/_template/src/styles.css new file mode 100644 index 0000000..af4821c --- /dev/null +++ b/examples/_template/src/styles.css @@ -0,0 +1,36 @@ +.control-panel { + font-size: 14px; + line-height: 18px; + width: 284px; + background: #fff; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); + margin: 24px; + padding: 12px 24px; + position: absolute; + top: 0; + right: 0; + outline: none; + cursor: auto; + box-sizing: border-box; + + & h3 { + font-size: 1.2em; + font-weight: 500; + margin: 8px 0; + } + + & p { + margin-bottom: 16px; + } + + .source-link { + text-align: right; + margin-top: 8px; + + & a { + font-weight: bold; + color: #486865; + font-size: 11px; + } + } +} diff --git a/examples/_template/vite.config.js b/examples/_template/vite.config.js index 17260d5..1d6187b 100644 --- a/examples/_template/vite.config.js +++ b/examples/_template/vite.config.js @@ -1,17 +1,7 @@ -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') - } - } - }; -}); +export default { + define: { + 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify( + process.env.GOOGLE_MAPS_API_KEY + ) + } +}; From f9373644a2a01c132512e1364c2055c1b90a6042 Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Thu, 2 Nov 2023 14:08:29 +0100 Subject: [PATCH 09/19] docs(examples): adjust readme of examples --- examples/_template/README.md | 6 ++++-- examples/basic-map/README.md | 6 ++++-- examples/change-map-id/README.md | 6 ++++-- examples/deckgl-overlay/README.md | 6 ++++-- examples/markers-and-infowindows/README.md | 6 ++++-- 5 files changed, 20 insertions(+), 10 deletions(-) diff --git a/examples/_template/README.md b/examples/_template/README.md index 40a3e64..21bd60d 100644 --- a/examples/_template/README.md +++ b/examples/_template/README.md @@ -13,12 +13,14 @@ Go into the example-directory and run npm install ``` -Then start the example with +To start the example with the local library run ```shell -npm start +npm run start-local ``` +The regular `npm start` task is only used for the standalone versions of the the example (codesandbox for example) + 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. diff --git a/examples/basic-map/README.md b/examples/basic-map/README.md index 40a3e64..21bd60d 100644 --- a/examples/basic-map/README.md +++ b/examples/basic-map/README.md @@ -13,12 +13,14 @@ Go into the example-directory and run npm install ``` -Then start the example with +To start the example with the local library run ```shell -npm start +npm run start-local ``` +The regular `npm start` task is only used for the standalone versions of the the example (codesandbox for example) + 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. diff --git a/examples/change-map-id/README.md b/examples/change-map-id/README.md index 40a3e64..21bd60d 100644 --- a/examples/change-map-id/README.md +++ b/examples/change-map-id/README.md @@ -13,12 +13,14 @@ Go into the example-directory and run npm install ``` -Then start the example with +To start the example with the local library run ```shell -npm start +npm run start-local ``` +The regular `npm start` task is only used for the standalone versions of the the example (codesandbox for example) + 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. diff --git a/examples/deckgl-overlay/README.md b/examples/deckgl-overlay/README.md index c0a6e87..00209e1 100644 --- a/examples/deckgl-overlay/README.md +++ b/examples/deckgl-overlay/README.md @@ -13,12 +13,14 @@ Go into the example-directory and run npm install ``` -Then start the example with +To start the example with the local library run ```shell -npm start +npm run start-local ``` +The regular `npm start` task is only used for the standalone versions of the the example (codesandbox for example) + 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. diff --git a/examples/markers-and-infowindows/README.md b/examples/markers-and-infowindows/README.md index 93077a1..3b592d6 100644 --- a/examples/markers-and-infowindows/README.md +++ b/examples/markers-and-infowindows/README.md @@ -11,12 +11,14 @@ Go into the example-directory and run npm install ``` -Then start the example with +To start the example with the local library run ```shell -npm start +npm run start-local ``` +The regular `npm start` task is only used for the standalone versions of the the example (codesandbox for example) + 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. From bfa8316ca56949d63cdbe03fffa29d15c9b27610 Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Thu, 2 Nov 2023 14:22:18 +0100 Subject: [PATCH 10/19] feat(examples): add CodeSandbox links to control panels --- examples/README.md | 4 ++-- examples/_template/src/control-panel.tsx | 9 ++++++++- examples/_template/src/styles.css | 5 +++-- examples/basic-map/src/control-panel.tsx | 8 +++++++- examples/basic-map/src/styles.css | 5 +++-- examples/change-map-id/src/control-panel.tsx | 8 +++++++- examples/change-map-id/src/styles.css | 5 +++-- examples/deckgl-overlay/src/control-panel.tsx | 8 +++++++- examples/deckgl-overlay/src/styles.css | 5 +++-- examples/markers-and-infowindows/src/control-panel.tsx | 8 +++++++- examples/markers-and-infowindows/src/styles.css | 5 +++-- 11 files changed, 53 insertions(+), 17 deletions(-) diff --git a/examples/README.md b/examples/README.md index 1785f56..a748177 100644 --- a/examples/README.md +++ b/examples/README.md @@ -19,8 +19,8 @@ additional scripts to start the example in the context of the library, using the library itself and its dependencies instead of those locally installed in the example folder. -> In the future, we want to add codesandbox-links for all examples that -> allow you to instantly start playing around with them. +All examples should contain a link to a CodeSandbox environment where the +example can be played with right away. ## Writing examples diff --git a/examples/_template/src/control-panel.tsx b/examples/_template/src/control-panel.tsx index 6319573..734fd9c 100644 --- a/examples/_template/src/control-panel.tsx +++ b/examples/_template/src/control-panel.tsx @@ -7,7 +7,14 @@ function ControlPanel() {

Add a brief description of the example here and update the link below

-
+ +
+ + Try on CodeSandbox ↗ + + diff --git a/examples/_template/src/styles.css b/examples/_template/src/styles.css index af4821c..ab70efd 100644 --- a/examples/_template/src/styles.css +++ b/examples/_template/src/styles.css @@ -23,9 +23,10 @@ margin-bottom: 16px; } - .source-link { - text-align: right; + .links { margin-top: 8px; + display: flex; + justify-content: space-between; & a { font-weight: bold; diff --git a/examples/basic-map/src/control-panel.tsx b/examples/basic-map/src/control-panel.tsx index 1942bd8..a6cf76c 100644 --- a/examples/basic-map/src/control-panel.tsx +++ b/examples/basic-map/src/control-panel.tsx @@ -8,7 +8,13 @@ function ControlPanel() { The simplest example possible, just rendering a google map with some settings adjusted.

-
+ -
+
+ + Try on CodeSandbox ↗ + + diff --git a/examples/change-map-id/src/styles.css b/examples/change-map-id/src/styles.css index 23cc3e3..d13511c 100644 --- a/examples/change-map-id/src/styles.css +++ b/examples/change-map-id/src/styles.css @@ -23,9 +23,10 @@ margin-bottom: 16px; } - .source-link { - text-align: right; + .links { margin-top: 8px; + display: flex; + justify-content: space-between; & a { font-weight: bold; diff --git a/examples/deckgl-overlay/src/control-panel.tsx b/examples/deckgl-overlay/src/control-panel.tsx index 99492fb..9e9295d 100644 --- a/examples/deckgl-overlay/src/control-panel.tsx +++ b/examples/deckgl-overlay/src/control-panel.tsx @@ -13,7 +13,13 @@ function ControlPanel() { ).

-
+
+ + Try on CodeSandbox ↗ + + diff --git a/examples/deckgl-overlay/src/styles.css b/examples/deckgl-overlay/src/styles.css index cb04db8..3abf857 100644 --- a/examples/deckgl-overlay/src/styles.css +++ b/examples/deckgl-overlay/src/styles.css @@ -23,9 +23,10 @@ margin-bottom: 16px; } - .source-link { - text-align: right; + .links { margin-top: 8px; + display: flex; + justify-content: space-between; & a { font-weight: bold; diff --git a/examples/markers-and-infowindows/src/control-panel.tsx b/examples/markers-and-infowindows/src/control-panel.tsx index b4a4d09..33aa53f 100644 --- a/examples/markers-and-infowindows/src/control-panel.tsx +++ b/examples/markers-and-infowindows/src/control-panel.tsx @@ -8,7 +8,13 @@ function ControlPanel() { This example shows the different ways to add markers and infowindows to the map.

-
+
+ + Try on CodeSandbox ↗ + + diff --git a/examples/markers-and-infowindows/src/styles.css b/examples/markers-and-infowindows/src/styles.css index a7f22b4..a323add 100644 --- a/examples/markers-and-infowindows/src/styles.css +++ b/examples/markers-and-infowindows/src/styles.css @@ -23,9 +23,10 @@ margin-bottom: 16px; } - .source-link { - text-align: right; + .links { margin-top: 8px; + display: flex; + justify-content: space-between; & a { font-weight: bold; From ec40e115809b7ad33d8e1e63fd9e2f387fe9f9ab Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Thu, 2 Nov 2023 14:25:33 +0100 Subject: [PATCH 11/19] feat(examples): add getApiKey lib to every example --- examples/_template/src/app.tsx | 4 +++- examples/_template/src/lib/get-api-key.ts | 20 +++++++++++++++++++ examples/change-map-id/src/app.tsx | 4 +++- examples/change-map-id/src/lib/get-api-key.ts | 20 +++++++++++++++++++ examples/deckgl-overlay/src/app.tsx | 4 +++- .../deckgl-overlay/src/lib/get-api-key.ts | 20 +++++++++++++++++++ examples/markers-and-infowindows/src/app.tsx | 4 +++- .../src/lib/get-api-key.ts | 20 +++++++++++++++++++ 8 files changed, 92 insertions(+), 4 deletions(-) create mode 100644 examples/_template/src/lib/get-api-key.ts create mode 100644 examples/change-map-id/src/lib/get-api-key.ts create mode 100644 examples/deckgl-overlay/src/lib/get-api-key.ts create mode 100644 examples/markers-and-infowindows/src/lib/get-api-key.ts diff --git a/examples/_template/src/app.tsx b/examples/_template/src/app.tsx index 0455012..410d943 100644 --- a/examples/_template/src/app.tsx +++ b/examples/_template/src/app.tsx @@ -3,7 +3,9 @@ import {createRoot} from 'react-dom/client'; import {APIProvider, Map} from '@vis.gl/react-google-maps'; -const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string; +import {getApiKey} from './lib/get-api-key'; + +const API_KEY = getApiKey(); const App = () => ; diff --git a/examples/_template/src/lib/get-api-key.ts b/examples/_template/src/lib/get-api-key.ts new file mode 100644 index 0000000..e7c7ca8 --- /dev/null +++ b/examples/_template/src/lib/get-api-key.ts @@ -0,0 +1,20 @@ +export function getApiKey() { + const url = new URL(location.href); + const apiKey = + url.searchParams.get('apiKey') || + (process.env.GOOGLE_MAPS_API_KEY as string); + + if (!apiKey) { + const key = prompt( + 'Please provide your Google Maps API key in the URL\n' + + '(using the parameter `?apiKey=YOUR_API_KEY_HERE`) or enter it here:' + ); + + if (key) { + url.searchParams.set('apiKey', key); + location.replace(url.toString()); + } + } + + return apiKey; +} diff --git a/examples/change-map-id/src/app.tsx b/examples/change-map-id/src/app.tsx index 85b2e70..7af7085 100644 --- a/examples/change-map-id/src/app.tsx +++ b/examples/change-map-id/src/app.tsx @@ -10,7 +10,9 @@ import { } from '@vis.gl/react-google-maps'; import ControlPanel from './control-panel'; -const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string; +import {getApiKey} from './lib/get-api-key'; + +const API_KEY = getApiKey(); const MapTypeId = { HYBRID: 'hybrid', diff --git a/examples/change-map-id/src/lib/get-api-key.ts b/examples/change-map-id/src/lib/get-api-key.ts new file mode 100644 index 0000000..e7c7ca8 --- /dev/null +++ b/examples/change-map-id/src/lib/get-api-key.ts @@ -0,0 +1,20 @@ +export function getApiKey() { + const url = new URL(location.href); + const apiKey = + url.searchParams.get('apiKey') || + (process.env.GOOGLE_MAPS_API_KEY as string); + + if (!apiKey) { + const key = prompt( + 'Please provide your Google Maps API key in the URL\n' + + '(using the parameter `?apiKey=YOUR_API_KEY_HERE`) or enter it here:' + ); + + if (key) { + url.searchParams.set('apiKey', key); + location.replace(url.toString()); + } + } + + return apiKey; +} diff --git a/examples/deckgl-overlay/src/app.tsx b/examples/deckgl-overlay/src/app.tsx index 12bcfc0..b763fe6 100644 --- a/examples/deckgl-overlay/src/app.tsx +++ b/examples/deckgl-overlay/src/app.tsx @@ -12,7 +12,9 @@ const DATA_URL = import type {Feature, GeoJSON} from 'geojson'; import ControlPanel from './control-panel'; -const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string; +import {getApiKey} from './lib/get-api-key'; + +const API_KEY = getApiKey(); const App = () => { const [data, setData] = useState(null); diff --git a/examples/deckgl-overlay/src/lib/get-api-key.ts b/examples/deckgl-overlay/src/lib/get-api-key.ts new file mode 100644 index 0000000..e7c7ca8 --- /dev/null +++ b/examples/deckgl-overlay/src/lib/get-api-key.ts @@ -0,0 +1,20 @@ +export function getApiKey() { + const url = new URL(location.href); + const apiKey = + url.searchParams.get('apiKey') || + (process.env.GOOGLE_MAPS_API_KEY as string); + + if (!apiKey) { + const key = prompt( + 'Please provide your Google Maps API key in the URL\n' + + '(using the parameter `?apiKey=YOUR_API_KEY_HERE`) or enter it here:' + ); + + if (key) { + url.searchParams.set('apiKey', key); + location.replace(url.toString()); + } + } + + return apiKey; +} diff --git a/examples/markers-and-infowindows/src/app.tsx b/examples/markers-and-infowindows/src/app.tsx index 01c4192..d7e40a0 100644 --- a/examples/markers-and-infowindows/src/app.tsx +++ b/examples/markers-and-infowindows/src/app.tsx @@ -14,7 +14,9 @@ import ControlPanel from './control-panel'; import {MovingMarker} from './moving-marker'; import {MarkerWithInfowindow} from './marker-with-infowindow'; -const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string; +import {getApiKey} from './lib/get-api-key'; + +const API_KEY = getApiKey(); const App = () => { return ( diff --git a/examples/markers-and-infowindows/src/lib/get-api-key.ts b/examples/markers-and-infowindows/src/lib/get-api-key.ts new file mode 100644 index 0000000..e7c7ca8 --- /dev/null +++ b/examples/markers-and-infowindows/src/lib/get-api-key.ts @@ -0,0 +1,20 @@ +export function getApiKey() { + const url = new URL(location.href); + const apiKey = + url.searchParams.get('apiKey') || + (process.env.GOOGLE_MAPS_API_KEY as string); + + if (!apiKey) { + const key = prompt( + 'Please provide your Google Maps API key in the URL\n' + + '(using the parameter `?apiKey=YOUR_API_KEY_HERE`) or enter it here:' + ); + + if (key) { + url.searchParams.set('apiKey', key); + location.replace(url.toString()); + } + } + + return apiKey; +} From 980eb17f32965c4f4a0672a902214b234729d4aa Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Thu, 2 Nov 2023 16:21:09 +0100 Subject: [PATCH 12/19] feat(examples): make website build work --- examples/basic-map/src/app.tsx | 4 +-- examples/basic-map/src/styles.css | 36 +++++++++---------- examples/change-map-id/src/app.tsx | 4 +-- examples/change-map-id/src/styles.css | 36 +++++++++---------- examples/deckgl-overlay/src/app.tsx | 4 +-- examples/deckgl-overlay/src/styles.css | 36 +++++++++---------- examples/markers-and-infowindows/src/app.tsx | 4 +-- .../markers-and-infowindows/src/styles.css | 36 +++++++++---------- website/src/examples/basic-map.mdx | 4 ++- website/src/examples/change-map-id.mdx | 4 ++- .../src/examples/markers-and-infowindows.mdx | 4 ++- 11 files changed, 85 insertions(+), 87 deletions(-) diff --git a/examples/basic-map/src/app.tsx b/examples/basic-map/src/app.tsx index 68bcebe..916c715 100644 --- a/examples/basic-map/src/app.tsx +++ b/examples/basic-map/src/app.tsx @@ -6,10 +6,8 @@ import ControlPanel from './control-panel'; import {getApiKey} from './lib/get-api-key'; -const API_KEY = getApiKey(); - const App = () => ( - + { const [markerRef, marker] = useMarkerRef(); return ( - + { const [data, setData] = useState(null); @@ -26,7 +24,7 @@ const App = () => { }, []); return ( - + { return ( - + +{() => } diff --git a/website/src/examples/change-map-id.mdx b/website/src/examples/change-map-id.mdx index 8e7bf08..2888ee5 100644 --- a/website/src/examples/change-map-id.mdx +++ b/website/src/examples/change-map-id.mdx @@ -1,5 +1,7 @@ # Change Map ID +import BrowserOnly from '@docusaurus/BrowserOnly'; + import App from 'website-examples/change-map-id/src/app'; - +{() => } diff --git a/website/src/examples/markers-and-infowindows.mdx b/website/src/examples/markers-and-infowindows.mdx index 0f5bc57..adf67bf 100644 --- a/website/src/examples/markers-and-infowindows.mdx +++ b/website/src/examples/markers-and-infowindows.mdx @@ -1,5 +1,7 @@ # Markers and Infowindows +import BrowserOnly from '@docusaurus/BrowserOnly'; + import App from 'website-examples/markers-and-infowindows/src/app'; - +{() => } From c406f07880fcff167fa53473998cd0d381bd3b95 Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Thu, 2 Nov 2023 16:27:08 +0100 Subject: [PATCH 13/19] docs(examples): use snake case --- examples/_template/README.md | 2 +- examples/basic-map/README.md | 2 +- examples/change-map-id/README.md | 2 +- examples/deckgl-overlay/README.md | 2 +- examples/markers-and-infowindows/README.md | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/_template/README.md b/examples/_template/README.md index 21bd60d..6b706c6 100644 --- a/examples/_template/README.md +++ b/examples/_template/README.md @@ -19,7 +19,7 @@ To start the example with the local library run npm run start-local ``` -The regular `npm start` task is only used for the standalone versions of the the example (codesandbox for example) +The regular `npm start` task is only used for the standalone versions of the the example (CodeSandbox for example) 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. diff --git a/examples/basic-map/README.md b/examples/basic-map/README.md index 21bd60d..6b706c6 100644 --- a/examples/basic-map/README.md +++ b/examples/basic-map/README.md @@ -19,7 +19,7 @@ To start the example with the local library run npm run start-local ``` -The regular `npm start` task is only used for the standalone versions of the the example (codesandbox for example) +The regular `npm start` task is only used for the standalone versions of the the example (CodeSandbox for example) 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. diff --git a/examples/change-map-id/README.md b/examples/change-map-id/README.md index 21bd60d..6b706c6 100644 --- a/examples/change-map-id/README.md +++ b/examples/change-map-id/README.md @@ -19,7 +19,7 @@ To start the example with the local library run npm run start-local ``` -The regular `npm start` task is only used for the standalone versions of the the example (codesandbox for example) +The regular `npm start` task is only used for the standalone versions of the the example (CodeSandbox for example) 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. diff --git a/examples/deckgl-overlay/README.md b/examples/deckgl-overlay/README.md index 00209e1..6ead578 100644 --- a/examples/deckgl-overlay/README.md +++ b/examples/deckgl-overlay/README.md @@ -19,7 +19,7 @@ To start the example with the local library run npm run start-local ``` -The regular `npm start` task is only used for the standalone versions of the the example (codesandbox for example) +The regular `npm start` task is only used for the standalone versions of the the example (CodeSandbox for example) 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. diff --git a/examples/markers-and-infowindows/README.md b/examples/markers-and-infowindows/README.md index 3b592d6..2491a7e 100644 --- a/examples/markers-and-infowindows/README.md +++ b/examples/markers-and-infowindows/README.md @@ -17,7 +17,7 @@ To start the example with the local library run npm run start-local ``` -The regular `npm start` task is only used for the standalone versions of the the example (codesandbox for example) +The regular `npm start` task is only used for the standalone versions of the the example (CodeSandbox for example) 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. From fc2ef7c7194cd08ec9f6311a5ab48df6f62e3c8b Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Mon, 6 Nov 2023 10:02:39 +0100 Subject: [PATCH 14/19] feat(examples): testing without key --- examples/basic-map/src/app.tsx | 4 +--- examples/basic-map/src/lib/get-api-key.ts | 20 -------------------- 2 files changed, 1 insertion(+), 23 deletions(-) delete mode 100644 examples/basic-map/src/lib/get-api-key.ts diff --git a/examples/basic-map/src/app.tsx b/examples/basic-map/src/app.tsx index 916c715..0e73603 100644 --- a/examples/basic-map/src/app.tsx +++ b/examples/basic-map/src/app.tsx @@ -4,10 +4,8 @@ import {createRoot} from 'react-dom/client'; import {APIProvider, Map} from '@vis.gl/react-google-maps'; import ControlPanel from './control-panel'; -import {getApiKey} from './lib/get-api-key'; - const App = () => ( - + Date: Mon, 6 Nov 2023 15:00:07 +0100 Subject: [PATCH 15/19] feat(examples): rework styles setup, remove api key --- examples/_template/README.md | 28 +++++---- examples/_template/index.html | 2 +- examples/_template/src/app.tsx | 6 +- examples/_template/src/lib/get-api-key.ts | 20 ------- examples/_template/src/styles.css | 37 ------------ examples/_template/vite.config.js | 6 ++ examples/basic-map/README.md | 28 +++++---- examples/basic-map/index.html | 2 +- examples/basic-map/src/app.tsx | 2 +- examples/basic-map/src/control-panel.tsx | 2 +- examples/basic-map/src/styles.css | 37 ------------ examples/basic-map/vite.config.js | 6 ++ examples/change-map-id/README.md | 30 +++++----- examples/change-map-id/index.html | 2 +- examples/change-map-id/src/app.tsx | 4 +- examples/change-map-id/src/control-panel.tsx | 2 +- examples/change-map-id/src/lib/get-api-key.ts | 20 ------- examples/change-map-id/src/styles.css | 37 ------------ examples/change-map-id/vite.config.js | 6 ++ examples/deckgl-overlay/README.md | 28 +++++---- examples/deckgl-overlay/index.html | 3 +- examples/deckgl-overlay/src/app.tsx | 4 +- examples/deckgl-overlay/src/control-panel.tsx | 2 +- .../deckgl-overlay/src/lib/get-api-key.ts | 20 ------- examples/deckgl-overlay/src/styles.css | 37 ------------ examples/deckgl-overlay/vite.config.js | 6 ++ examples/markers-and-infowindows/README.md | 28 +++++---- examples/markers-and-infowindows/index.html | 3 +- examples/markers-and-infowindows/src/app.tsx | 4 +- .../src/control-panel.tsx | 2 +- .../src/lib/get-api-key.ts | 20 ------- .../markers-and-infowindows/src/styles.css | 37 ------------ .../markers-and-infowindows/vite.config.js | 6 ++ examples/vite.config.local.js | 3 +- website/docusaurus.config.js | 8 +-- website/src/examples/basic-map.mdx | 4 +- website/src/examples/change-map-id.mdx | 4 +- .../src/examples/markers-and-infowindows.mdx | 4 +- .../styles.css => static/styles/examples.css} | 57 +++++++++++++++---- 39 files changed, 180 insertions(+), 377 deletions(-) delete mode 100644 examples/_template/src/lib/get-api-key.ts delete mode 100644 examples/_template/src/styles.css delete mode 100644 examples/basic-map/src/styles.css delete mode 100644 examples/change-map-id/src/lib/get-api-key.ts delete mode 100644 examples/change-map-id/src/styles.css delete mode 100644 examples/deckgl-overlay/src/lib/get-api-key.ts delete mode 100644 examples/deckgl-overlay/src/styles.css delete mode 100644 examples/markers-and-infowindows/src/lib/get-api-key.ts delete mode 100644 examples/markers-and-infowindows/src/styles.css rename website/{src/styles.css => static/styles/examples.css} (58%) diff --git a/examples/_template/README.md b/examples/_template/README.md index 6b706c6..8cee553 100644 --- a/examples/_template/README.md +++ b/examples/_template/README.md @@ -5,7 +5,21 @@ This is an example to show how to setup a simple Google Maps Map with the `` component of the Google Maps React library. -## Instructions +## 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 @@ -19,16 +33,6 @@ To start the example with the local library run npm run start-local ``` -The regular `npm start` task is only used for the standalone versions of the the example (CodeSandbox for example) - -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="" -``` +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/_template/index.html b/examples/_template/index.html index 1faa0d2..94ca5e4 100644 --- a/examples/_template/index.html +++ b/examples/_template/index.html @@ -21,7 +21,7 @@
diff --git a/examples/_template/src/app.tsx b/examples/_template/src/app.tsx index 410d943..9a96d47 100644 --- a/examples/_template/src/app.tsx +++ b/examples/_template/src/app.tsx @@ -3,11 +3,7 @@ import {createRoot} from 'react-dom/client'; import {APIProvider, Map} from '@vis.gl/react-google-maps'; -import {getApiKey} from './lib/get-api-key'; - -const API_KEY = getApiKey(); - -const App = () => ; +const App = () => ; export default App; diff --git a/examples/_template/src/lib/get-api-key.ts b/examples/_template/src/lib/get-api-key.ts deleted file mode 100644 index e7c7ca8..0000000 --- a/examples/_template/src/lib/get-api-key.ts +++ /dev/null @@ -1,20 +0,0 @@ -export function getApiKey() { - const url = new URL(location.href); - const apiKey = - url.searchParams.get('apiKey') || - (process.env.GOOGLE_MAPS_API_KEY as string); - - if (!apiKey) { - const key = prompt( - 'Please provide your Google Maps API key in the URL\n' + - '(using the parameter `?apiKey=YOUR_API_KEY_HERE`) or enter it here:' - ); - - if (key) { - url.searchParams.set('apiKey', key); - location.replace(url.toString()); - } - } - - return apiKey; -} diff --git a/examples/_template/src/styles.css b/examples/_template/src/styles.css deleted file mode 100644 index ab70efd..0000000 --- a/examples/_template/src/styles.css +++ /dev/null @@ -1,37 +0,0 @@ -.control-panel { - font-size: 14px; - line-height: 18px; - width: 284px; - background: #fff; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); - margin: 24px; - padding: 12px 24px; - position: absolute; - top: 0; - right: 0; - outline: none; - cursor: auto; - box-sizing: border-box; - - & h3 { - font-size: 1.2em; - font-weight: 500; - margin: 8px 0; - } - - & p { - margin-bottom: 16px; - } - - .links { - margin-top: 8px; - display: flex; - justify-content: space-between; - - & a { - font-weight: bold; - color: #486865; - font-size: 11px; - } - } -} diff --git a/examples/_template/vite.config.js b/examples/_template/vite.config.js index 1d6187b..db68df7 100644 --- a/examples/_template/vite.config.js +++ b/examples/_template/vite.config.js @@ -3,5 +3,11 @@ export default { 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify( process.env.GOOGLE_MAPS_API_KEY ) + }, + resolve: { + alias: { + '@examples-css': + 'https://visgl.github.io/react-google-maps/styles/examples.css' + } } }; diff --git a/examples/basic-map/README.md b/examples/basic-map/README.md index 6b706c6..8cee553 100644 --- a/examples/basic-map/README.md +++ b/examples/basic-map/README.md @@ -5,7 +5,21 @@ This is an example to show how to setup a simple Google Maps Map with the `` component of the Google Maps React library. -## Instructions +## 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 @@ -19,16 +33,6 @@ To start the example with the local library run npm run start-local ``` -The regular `npm start` task is only used for the standalone versions of the the example (CodeSandbox for example) - -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="" -``` +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/basic-map/index.html b/examples/basic-map/index.html index 1ff5113..f30ba99 100644 --- a/examples/basic-map/index.html +++ b/examples/basic-map/index.html @@ -23,7 +23,7 @@
diff --git a/examples/basic-map/src/app.tsx b/examples/basic-map/src/app.tsx index 0e73603..970c793 100644 --- a/examples/basic-map/src/app.tsx +++ b/examples/basic-map/src/app.tsx @@ -5,7 +5,7 @@ import {APIProvider, Map} from '@vis.gl/react-google-maps'; import ControlPanel from './control-panel'; const App = () => ( - + +

Basic Map

The simplest example possible, just rendering a google map with some diff --git a/examples/basic-map/src/styles.css b/examples/basic-map/src/styles.css deleted file mode 100644 index 9ae4624..0000000 --- a/examples/basic-map/src/styles.css +++ /dev/null @@ -1,37 +0,0 @@ -.control-panel-basic-map { - font-size: 14px; - line-height: 18px; - width: 284px; - background: #fff; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); - margin: 24px; - padding: 12px 24px; - position: absolute; - top: 0; - right: 0; - outline: none; - cursor: auto; - box-sizing: border-box; -} - -.control-panel-basic-map h3 { - font-size: 1.2em; - font-weight: 500; - margin: 8px 0; -} - -.control-panel-basic-map p { - margin-bottom: 16px; -} - -.control-panel-basic-map .links { - margin-top: 8px; - display: flex; - justify-content: space-between; -} - -.control-panel-basic-map .links a { - font-weight: bold; - color: #486865; - font-size: 11px; -} diff --git a/examples/basic-map/vite.config.js b/examples/basic-map/vite.config.js index 1d6187b..db68df7 100644 --- a/examples/basic-map/vite.config.js +++ b/examples/basic-map/vite.config.js @@ -3,5 +3,11 @@ export default { 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify( process.env.GOOGLE_MAPS_API_KEY ) + }, + resolve: { + alias: { + '@examples-css': + 'https://visgl.github.io/react-google-maps/styles/examples.css' + } } }; diff --git a/examples/change-map-id/README.md b/examples/change-map-id/README.md index 6b706c6..26bf98e 100644 --- a/examples/change-map-id/README.md +++ b/examples/change-map-id/README.md @@ -2,10 +2,24 @@ ![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 `` component of the Google Maps React +This is an example to show how to change the map id of a simple Google Maps Map with the `` component of the Google Maps React library. -## Instructions +## 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 @@ -19,16 +33,6 @@ To start the example with the local library run npm run start-local ``` -The regular `npm start` task is only used for the standalone versions of the the example (CodeSandbox for example) - -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="" -``` +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/change-map-id/index.html b/examples/change-map-id/index.html index 1aac72e..011ee9d 100644 --- a/examples/change-map-id/index.html +++ b/examples/change-map-id/index.html @@ -21,7 +21,7 @@

diff --git a/examples/deckgl-overlay/src/app.tsx b/examples/deckgl-overlay/src/app.tsx index d2df9c8..3b2b723 100644 --- a/examples/deckgl-overlay/src/app.tsx +++ b/examples/deckgl-overlay/src/app.tsx @@ -12,8 +12,6 @@ const DATA_URL = import type {Feature, GeoJSON} from 'geojson'; import ControlPanel from './control-panel'; -import {getApiKey} from './lib/get-api-key'; - const App = () => { const [data, setData] = useState(null); @@ -24,7 +22,7 @@ const App = () => { }, []); return ( - + +

deck.gl Interleaved Overlay Example

An example demonstrating how an interleaved deck.gl overlay can be added diff --git a/examples/deckgl-overlay/src/lib/get-api-key.ts b/examples/deckgl-overlay/src/lib/get-api-key.ts deleted file mode 100644 index e7c7ca8..0000000 --- a/examples/deckgl-overlay/src/lib/get-api-key.ts +++ /dev/null @@ -1,20 +0,0 @@ -export function getApiKey() { - const url = new URL(location.href); - const apiKey = - url.searchParams.get('apiKey') || - (process.env.GOOGLE_MAPS_API_KEY as string); - - if (!apiKey) { - const key = prompt( - 'Please provide your Google Maps API key in the URL\n' + - '(using the parameter `?apiKey=YOUR_API_KEY_HERE`) or enter it here:' - ); - - if (key) { - url.searchParams.set('apiKey', key); - location.replace(url.toString()); - } - } - - return apiKey; -} diff --git a/examples/deckgl-overlay/src/styles.css b/examples/deckgl-overlay/src/styles.css deleted file mode 100644 index 0a7ce85..0000000 --- a/examples/deckgl-overlay/src/styles.css +++ /dev/null @@ -1,37 +0,0 @@ -.control-panel-deckgl { - font-size: 14px; - line-height: 18px; - width: 284px; - background: #fff; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); - margin: 24px; - padding: 12px 24px; - position: absolute; - top: 0; - right: 0; - outline: none; - cursor: auto; - box-sizing: border-box; -} - -.control-panel-deckgl h3 { - font-size: 1.2em; - font-weight: 500; - margin: 8px 0; -} - -.control-panel-deckgl p { - margin-bottom: 16px; -} - -.control-panel-deckgl .links { - margin-top: 8px; - display: flex; - justify-content: space-between; -} - -.control-panel-deckgl .links a { - font-weight: bold; - color: #486865; - font-size: 11px; -} diff --git a/examples/deckgl-overlay/vite.config.js b/examples/deckgl-overlay/vite.config.js index 1d6187b..db68df7 100644 --- a/examples/deckgl-overlay/vite.config.js +++ b/examples/deckgl-overlay/vite.config.js @@ -3,5 +3,11 @@ export default { 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify( process.env.GOOGLE_MAPS_API_KEY ) + }, + resolve: { + alias: { + '@examples-css': + 'https://visgl.github.io/react-google-maps/styles/examples.css' + } } }; diff --git a/examples/markers-and-infowindows/README.md b/examples/markers-and-infowindows/README.md index 2491a7e..f8e61c2 100644 --- a/examples/markers-and-infowindows/README.md +++ b/examples/markers-and-infowindows/README.md @@ -3,7 +3,21 @@ Shows the different ways to use the ``, `` and `` components. -## Instructions +## 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 @@ -17,16 +31,6 @@ To start the example with the local library run npm run start-local ``` -The regular `npm start` task is only used for the standalone versions of the the example (CodeSandbox for example) - -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="" -``` +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/markers-and-infowindows/index.html b/examples/markers-and-infowindows/index.html index 58def60..53feaf8 100644 --- a/examples/markers-and-infowindows/index.html +++ b/examples/markers-and-infowindows/index.html @@ -21,8 +21,9 @@

diff --git a/examples/markers-and-infowindows/src/app.tsx b/examples/markers-and-infowindows/src/app.tsx index a780da0..ee03872 100644 --- a/examples/markers-and-infowindows/src/app.tsx +++ b/examples/markers-and-infowindows/src/app.tsx @@ -14,11 +14,9 @@ import ControlPanel from './control-panel'; import {MovingMarker} from './moving-marker'; import {MarkerWithInfowindow} from './marker-with-infowindow'; -import {getApiKey} from './lib/get-api-key'; - const App = () => { return ( - + +

Markers and InfoWindows

This example shows the different ways to add markers and infowindows to diff --git a/examples/markers-and-infowindows/src/lib/get-api-key.ts b/examples/markers-and-infowindows/src/lib/get-api-key.ts deleted file mode 100644 index e7c7ca8..0000000 --- a/examples/markers-and-infowindows/src/lib/get-api-key.ts +++ /dev/null @@ -1,20 +0,0 @@ -export function getApiKey() { - const url = new URL(location.href); - const apiKey = - url.searchParams.get('apiKey') || - (process.env.GOOGLE_MAPS_API_KEY as string); - - if (!apiKey) { - const key = prompt( - 'Please provide your Google Maps API key in the URL\n' + - '(using the parameter `?apiKey=YOUR_API_KEY_HERE`) or enter it here:' - ); - - if (key) { - url.searchParams.set('apiKey', key); - location.replace(url.toString()); - } - } - - return apiKey; -} diff --git a/examples/markers-and-infowindows/src/styles.css b/examples/markers-and-infowindows/src/styles.css deleted file mode 100644 index 22f4e4f..0000000 --- a/examples/markers-and-infowindows/src/styles.css +++ /dev/null @@ -1,37 +0,0 @@ -.control-panel-markers-and-infowindows { - font-size: 14px; - line-height: 18px; - width: 284px; - background: #fff; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); - margin: 24px; - padding: 12px 24px; - position: absolute; - top: 0; - right: 0; - outline: none; - cursor: auto; - box-sizing: border-box; -} - -.control-panel-markers-and-infowindows h3 { - font-size: 1.2em; - font-weight: 500; - margin: 8px 0; -} - -.control-panel-markers-and-infowindows p { - margin-bottom: 16px; -} - -.control-panel-markers-and-infowindows .links { - margin-top: 8px; - display: flex; - justify-content: space-between; -} - -.control-panel-markers-and-infowindows .links a { - font-weight: bold; - color: #486865; - font-size: 11px; -} diff --git a/examples/markers-and-infowindows/vite.config.js b/examples/markers-and-infowindows/vite.config.js index 1d6187b..db68df7 100644 --- a/examples/markers-and-infowindows/vite.config.js +++ b/examples/markers-and-infowindows/vite.config.js @@ -3,5 +3,11 @@ export default { 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify( process.env.GOOGLE_MAPS_API_KEY ) + }, + resolve: { + alias: { + '@examples-css': + 'https://visgl.github.io/react-google-maps/styles/examples.css' + } } }; diff --git a/examples/vite.config.local.js b/examples/vite.config.local.js index 17260d5..9f0d2a1 100644 --- a/examples/vite.config.local.js +++ b/examples/vite.config.local.js @@ -10,7 +10,8 @@ export default defineConfig(({mode}) => { }, resolve: { alias: { - '@vis.gl/react-google-maps': resolve('../../src/index.ts') + '@vis.gl/react-google-maps': resolve('../../src/index.ts'), + '@examples-css': resolve('../../website/static/styles/examples.css') } } }; diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index a0bbd6d..f975f0a 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -38,13 +38,7 @@ const config = { 'https://github.com/visgl/react-google-maps/tree/main/website' }, theme: { - customCss: [ - resolve('./src/styles.css'), - resolve('../examples/basic-map/src/styles.css'), - resolve('../examples/change-map-id/src/styles.css'), - resolve('../examples/deckgl-overlay/src/styles.css'), - resolve('../examples/markers-and-infowindows/src/styles.css') - ] + customCss: [resolve('./static/styles/examples.css')] } }) ] diff --git a/website/src/examples/basic-map.mdx b/website/src/examples/basic-map.mdx index 4f9d3a8..3b6cf3c 100644 --- a/website/src/examples/basic-map.mdx +++ b/website/src/examples/basic-map.mdx @@ -1,7 +1,5 @@ # Basic Map -import BrowserOnly from '@docusaurus/BrowserOnly'; - import App from 'website-examples/basic-map/src/app'; -{() => } + diff --git a/website/src/examples/change-map-id.mdx b/website/src/examples/change-map-id.mdx index 2888ee5..8e7bf08 100644 --- a/website/src/examples/change-map-id.mdx +++ b/website/src/examples/change-map-id.mdx @@ -1,7 +1,5 @@ # Change Map ID -import BrowserOnly from '@docusaurus/BrowserOnly'; - import App from 'website-examples/change-map-id/src/app'; -{() => } + diff --git a/website/src/examples/markers-and-infowindows.mdx b/website/src/examples/markers-and-infowindows.mdx index adf67bf..0f5bc57 100644 --- a/website/src/examples/markers-and-infowindows.mdx +++ b/website/src/examples/markers-and-infowindows.mdx @@ -1,7 +1,5 @@ # Markers and Infowindows -import BrowserOnly from '@docusaurus/BrowserOnly'; - import App from 'website-examples/markers-and-infowindows/src/app'; -{() => } + diff --git a/website/src/styles.css b/website/static/styles/examples.css similarity index 58% rename from website/src/styles.css rename to website/static/styles/examples.css index e96d317..e14cc41 100644 --- a/website/src/styles.css +++ b/website/static/styles/examples.css @@ -13,16 +13,16 @@ --ifm-color-primary-light: #00befd; --ifm-color-primary-lighter: #0ac2ff; --ifm-color-primary-lightest: #2ccbff; - --ifm-color-white: #FFFFFF; - --ifm-color-gray-200: #F7FAFC; - --ifm-color-gray-300: #ECF2F7; - --ifm-color-gray-400: #E1E8F0; - --ifm-color-gray-500: #CAD5E0; - --ifm-color-gray-600: #9EAEC0; - --ifm-color-gray-700: #6F8196; + --ifm-color-white: #ffffff; + --ifm-color-gray-200: #f7fafc; + --ifm-color-gray-300: #ecf2f7; + --ifm-color-gray-400: #e1e8f0; + --ifm-color-gray-500: #cad5e0; + --ifm-color-gray-600: #9eaec0; + --ifm-color-gray-700: #6f8196; --ifm-color-gray-800: #485668; - --ifm-color-gray-900: #2B3848; - --ifm-color-black: #19202C; + --ifm-color-gray-900: #2b3848; + --ifm-color-black: #19202c; --code-font-size: 95%; } main .container { @@ -50,7 +50,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { background-color: rgba(0, 0, 0, 0.3); } - .tooltip { position: absolute; padding: 4px; @@ -62,3 +61,41 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { z-index: 9; pointer-events: none; } + +.control-panel { + font-size: 14px; + line-height: 18px; + width: 284px; + background: #fff; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); + margin: 24px; + padding: 12px 24px; + position: absolute; + top: 0; + right: 0; + outline: none; + cursor: auto; + box-sizing: border-box; +} + +.control-panel h3 { + font-size: 1.2em; + font-weight: 500; + margin: 8px 0; +} + +.control-panel p { + margin-bottom: 16px; +} + +.control-panel .links { + margin-top: 8px; + display: flex; + justify-content: space-between; +} + +.control-panel .links a { + font-weight: bold; + color: #486865; + font-size: 11px; +} From bf2d58bb97640b3185c4528ed439a213f157b5f8 Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Mon, 6 Nov 2023 15:03:21 +0100 Subject: [PATCH 16/19] style(examples): restore variable format --- website/static/styles/examples.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/website/static/styles/examples.css b/website/static/styles/examples.css index e14cc41..e1dd38d 100644 --- a/website/static/styles/examples.css +++ b/website/static/styles/examples.css @@ -13,16 +13,16 @@ --ifm-color-primary-light: #00befd; --ifm-color-primary-lighter: #0ac2ff; --ifm-color-primary-lightest: #2ccbff; - --ifm-color-white: #ffffff; - --ifm-color-gray-200: #f7fafc; - --ifm-color-gray-300: #ecf2f7; - --ifm-color-gray-400: #e1e8f0; - --ifm-color-gray-500: #cad5e0; - --ifm-color-gray-600: #9eaec0; - --ifm-color-gray-700: #6f8196; + --ifm-color-white: #FFFFFF; + --ifm-color-gray-200: #F7FAFC; + --ifm-color-gray-300: #ECF2F7; + --ifm-color-gray-400: #E1E8F0; + --ifm-color-gray-500: #CAD5E0; + --ifm-color-gray-600: #9EAEC0; + --ifm-color-gray-700: #6F8196; --ifm-color-gray-800: #485668; - --ifm-color-gray-900: #2b3848; - --ifm-color-black: #19202c; + --ifm-color-gray-900: #2B3848; + --ifm-color-black: #19202C; --code-font-size: 95%; } main .container { From cfd1d55d650dc4fe17ecd348739c91dac3082243 Mon Sep 17 00:00:00 2001 From: Malte Modrow Date: Tue, 7 Nov 2023 10:57:41 +0100 Subject: [PATCH 17/19] feat(examples): deliver examples css with the library --- examples/_template/index.html | 3 +- examples/_template/vite.config.js | 6 -- examples/basic-map/index.html | 3 +- examples/basic-map/vite.config.js | 6 -- examples/change-map-id/index.html | 2 +- examples/change-map-id/vite.config.js | 6 -- examples/deckgl-overlay/index.html | 2 +- examples/deckgl-overlay/vite.config.js | 6 -- examples/examples.css | 37 ++++++++++++ examples/markers-and-infowindows/index.html | 2 +- .../markers-and-infowindows/vite.config.js | 6 -- examples/vite.config.local.js | 6 +- package.json | 6 +- website/docusaurus.config.js | 5 +- .../styles/examples.css => src/styles.css} | 56 +++---------------- 15 files changed, 66 insertions(+), 86 deletions(-) create mode 100644 examples/examples.css rename website/{static/styles/examples.css => src/styles.css} (58%) diff --git a/examples/_template/index.html b/examples/_template/index.html index 94ca5e4..840d980 100644 --- a/examples/_template/index.html +++ b/examples/_template/index.html @@ -21,8 +21,9 @@

diff --git a/examples/_template/vite.config.js b/examples/_template/vite.config.js index db68df7..1d6187b 100644 --- a/examples/_template/vite.config.js +++ b/examples/_template/vite.config.js @@ -3,11 +3,5 @@ export default { 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify( process.env.GOOGLE_MAPS_API_KEY ) - }, - resolve: { - alias: { - '@examples-css': - 'https://visgl.github.io/react-google-maps/styles/examples.css' - } } }; diff --git a/examples/basic-map/index.html b/examples/basic-map/index.html index f30ba99..8edcfc7 100644 --- a/examples/basic-map/index.html +++ b/examples/basic-map/index.html @@ -23,8 +23,9 @@
diff --git a/examples/basic-map/vite.config.js b/examples/basic-map/vite.config.js index db68df7..1d6187b 100644 --- a/examples/basic-map/vite.config.js +++ b/examples/basic-map/vite.config.js @@ -3,11 +3,5 @@ export default { 'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify( process.env.GOOGLE_MAPS_API_KEY ) - }, - resolve: { - alias: { - '@examples-css': - 'https://visgl.github.io/react-google-maps/styles/examples.css' - } } }; diff --git a/examples/change-map-id/index.html b/examples/change-map-id/index.html index 011ee9d..1c543df 100644 --- a/examples/change-map-id/index.html +++ b/examples/change-map-id/index.html @@ -21,7 +21,7 @@