"
+```
+
+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
@@ -13,20 +27,12 @@ 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
```
-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 1faa0d24..840d9806 100644
--- a/examples/_template/index.html
+++ b/examples/_template/index.html
@@ -21,8 +21,9 @@
diff --git a/examples/_template/package.json b/examples/_template/package.json
index e3493f56..b1de7319 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/control-panel.tsx b/examples/_template/src/control-panel.tsx
index 6319573f..734fd9cd 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/vite.config.js b/examples/_template/vite.config.js
index 17260d55..187e629c 100644
--- a/examples/_template/vite.config.js
+++ b/examples/_template/vite.config.js
@@ -1,17 +1,11 @@
import {defineConfig, loadEnv} from 'vite';
-import {resolve} from 'node:path';
export default defineConfig(({mode}) => {
- const {GOOGLE_MAPS_API_KEY} = loadEnv(mode, process.cwd(), '');
+ 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/examples/basic-map/README.md b/examples/basic-map/README.md
index 40a3e640..8cee5537 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
@@ -13,20 +27,12 @@ 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
```
-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 cdb709ce..8edcfc78 100644
--- a/examples/basic-map/index.html
+++ b/examples/basic-map/index.html
@@ -21,10 +21,11 @@
-
+
diff --git a/examples/basic-map/package.json b/examples/basic-map/package.json
index e3493f56..b1de7319 100644
--- a/examples/basic-map/package.json
+++ b/examples/basic-map/package.json
@@ -7,6 +7,7 @@
},
"scripts": {
"start": "vite",
+ "start-local": "vite --config ../vite.config.local.js",
"build": "vite build"
}
}
diff --git a/examples/basic-map/src/control-panel.tsx b/examples/basic-map/src/control-panel.tsx
index d623b6d1..28777373 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/basic-map/vite.config.js b/examples/basic-map/vite.config.js
index 17260d55..187e629c 100644
--- a/examples/basic-map/vite.config.js
+++ b/examples/basic-map/vite.config.js
@@ -1,17 +1,11 @@
import {defineConfig, loadEnv} from 'vite';
-import {resolve} from 'node:path';
export default defineConfig(({mode}) => {
- const {GOOGLE_MAPS_API_KEY} = loadEnv(mode, process.cwd(), '');
+ 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/examples/change-map-id/README.md b/examples/change-map-id/README.md
index 40a3e640..26bf98e6 100644
--- a/examples/change-map-id/README.md
+++ b/examples/change-map-id/README.md
@@ -2,10 +2,24 @@
-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
@@ -13,20 +27,12 @@ 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
```
-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 d7aee192..1c543dfc 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 80229c05..d4a36f29 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 00800e59..12bcfc01 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 92aeef8f..0244747c 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/vite.config.js b/examples/deckgl-overlay/vite.config.js
index 17260d55..187e629c 100644
--- a/examples/deckgl-overlay/vite.config.js
+++ b/examples/deckgl-overlay/vite.config.js
@@ -1,17 +1,11 @@
import {defineConfig, loadEnv} from 'vite';
-import {resolve} from 'node:path';
export default defineConfig(({mode}) => {
- const {GOOGLE_MAPS_API_KEY} = loadEnv(mode, process.cwd(), '');
+ 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/examples/examples.css b/examples/examples.css
new file mode 100644
index 00000000..6cff2f60
--- /dev/null
+++ b/examples/examples.css
@@ -0,0 +1,37 @@
+.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;
+}
diff --git a/examples/markers-and-infowindows/README.md b/examples/markers-and-infowindows/README.md
index 93077a1b..f8e61c26 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
@@ -11,20 +25,12 @@ 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
```
-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 1faa0d24..840d9806 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/package.json b/examples/markers-and-infowindows/package.json
index e3493f56..b1de7319 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 24ac3805..a4d900fa 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/vite.config.js b/examples/markers-and-infowindows/vite.config.js
index 17260d55..187e629c 100644
--- a/examples/markers-and-infowindows/vite.config.js
+++ b/examples/markers-and-infowindows/vite.config.js
@@ -1,17 +1,11 @@
import {defineConfig, loadEnv} from 'vite';
-import {resolve} from 'node:path';
export default defineConfig(({mode}) => {
- const {GOOGLE_MAPS_API_KEY} = loadEnv(mode, process.cwd(), '');
+ 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/examples/vite.config.local.js b/examples/vite.config.local.js
new file mode 100644
index 00000000..97bdf340
--- /dev/null
+++ b/examples/vite.config.local.js
@@ -0,0 +1,20 @@
+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/examples.css': resolve(
+ '../../examples/examples.css'
+ ),
+ '@vis.gl/react-google-maps': resolve('../../src/index.ts')
+ }
+ }
+ };
+});
diff --git a/package-lock.json b/package-lock.json
index 14c164aa..d3d0da6b 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 1865f1bf..261745a0 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,13 @@
"source": "src/index.ts",
"main": "dist/index.umd.js",
"module": "dist/index.modern.mjs",
+ "exports": {
+ ".": {
+ "import": "./dist/index.modern.mjs",
+ "require": "./dist/index.umd.js"
+ },
+ "./examples.css": "./dist/examples.css"
+ },
"types": "dist/index.d.ts",
"repository": {
"type": "git",
@@ -16,9 +23,10 @@
"homepage": "https://github.com/visgl/react-google-maps#readme",
"license": "MIT",
"scripts": {
- "clean": "rm -rf ./dist",
+ "clean": "rm -rf ./dist && mkdir ./dist",
"build": "npm-run-all clean -p build:*",
"start": "run-p start:*",
+ "build:examples": "cp ./examples/examples.css dist",
"build:microbundle": "microbundle -o dist/index.js -f modern,umd --globals react=React,react-dom=ReactDOM --jsx React.createElement --jsxFragment React.Fragment --no-compress --tsconfig tsconfig.build.json",
"start:microbundle": "microbundle watch -o dist/index.js -f modern,umd --globals react=React,react-dom=ReactDOM --jsx React.createElement --jsxFragment React.Fragment --no-compress --tsconfig tsconfig.build.json",
"test:linter": "eslint 'src/**/*.{ts,tsx}'",
@@ -66,6 +74,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 f58127ad..80a64cf8 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/examples.css')
+ ]
}
})
]
diff --git a/website/src/styles.css b/website/src/styles.css
index 6c63d33f..9abdd488 100644
--- a/website/src/styles.css
+++ b/website/src/styles.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,100 +61,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;
-}