diff --git a/packages/blocks/README.md b/packages/blocks/README.md index 40797346..20596969 100644 --- a/packages/blocks/README.md +++ b/packages/blocks/README.md @@ -32,6 +32,11 @@ You can now use the components in your app: [sveltekit]: https://kit.svelte.dev/ +## Environment Variables + +Google maps requires an API key `VITE_GOOGLE_MAPS_API_KEY` to be defined in .env +We support Google Maps for rendering maps. If no API key is provided, we fall back to OpenStreet even if Google Maps is selected + ## Playground The playground can be used during development but is not used outside of the package. diff --git a/packages/blocks/src/lib/maplibre/style.ts b/packages/blocks/src/lib/maplibre/style.ts index c5eb8fb4..641c9177 100644 --- a/packages/blocks/src/lib/maplibre/style.ts +++ b/packages/blocks/src/lib/maplibre/style.ts @@ -13,6 +13,7 @@ const getGoogleMapsStyle = ( [MapProviders.googleMaps]: { type: 'raster', tiles: [ + // The apiKey is not actually needed here for some reason. TODO: Update to use the google maps tile api ASAP. `https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${apiKey}`, ], tileSize, @@ -22,6 +23,7 @@ const getGoogleMapsStyle = ( satellite: { type: 'raster', tiles: [ + // The apiKey is not actually needed here for some reason. TODO: Update to use the google maps tile api ASAP. `https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&key=${apiKey}`, ], tileSize: 256, diff --git a/packages/blocks/src/routes/+page.svelte b/packages/blocks/src/routes/+page.svelte index 08125fd2..03fcf0d1 100644 --- a/packages/blocks/src/routes/+page.svelte +++ b/packages/blocks/src/routes/+page.svelte @@ -64,11 +64,12 @@ const path = () => mapProvider="google-maps" mapProviderKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY} > - - +
+ + +
-