feat(static-map): make example layout nicer

visgl · Dec 16, 2024 · fa6a2b5 · fa6a2b5
1 parent 95df99c
commit fa6a2b5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 11 deletions.
diff --git a/docs/api-reference/components/map.md b/docs/api-reference/components/map.md
@@ -86,10 +86,10 @@ Maps JavaScript API is based on map-views (effectively calls to the
 `google.maps.Map` constructor), this can quickly cause a problem.
 
 The `Map` component can be configured to re-use already created maps with
-the [`reuseMaps`](#reusemaps-boolean) prop. 
-When enabled, all `Map` components created with the same [`mapId`](#mapid-string), 
-[`colorScheme`](#colorscheme-googlemapscolorschemegmp-color-scheme-type) and 
-[`renderingType`](#renderingtype-googlemapsrenderingtypegmp-rendering-type) will reuse 
+the [`reuseMaps`](#reusemaps-boolean) prop.
+When enabled, all `Map` components created with the same [`mapId`](#mapid-string),
+[`colorScheme`](#colorscheme-googlemapscolorscheme) and
+[`renderingType`](#renderingtype-googlemapsrenderingtype) will reuse
 previously created instances instead of creating new ones.
 
 :::warning
@@ -162,7 +162,7 @@ of the [Cloud-based maps styling][gmp-map-styling].
 
 The [color-scheme][gmp-color-scheme] to be used by the map. Can be
 `'LIGHT'`, `'DARK'`, `'FOLLOW_SYSTEM'` or one of the
-`ColorScheme` constants 
+`ColorScheme` constants
 (`import {ColorScheme} from '@vis.gl/react-google-maps';`).
 
 :::note
@@ -174,7 +174,7 @@ Custom styles that use Map IDs only apply to the light color scheme for roadmap
 #### `renderingType`: [google.maps.RenderingType][gmp-rendering-type]
 
 The desired rendering type the renderer should use. Can be `'RASTER'` or
-`'VECTOR'` or one of the `RenderingType` constants 
+`'VECTOR'` or one of the `RenderingType` constants
 (`import {RenderingType} from '@vis.gl/react-google-maps';`).
 
 If not set, the cloud configuration for the map ID will determine the
@@ -196,7 +196,7 @@ style-prop is no longer applied.
 #### `reuseMaps`: boolean
 
 Enable map-instance caching for this component. When caching is enabled,
-this component will reuse map instances created with the same `mapId`, 
+this component will reuse map instances created with the same `mapId`,
 `colorScheme` and `renderingType`.
 
 See also the section [Map Instance Caching](#map-instance-caching) above.

diff --git a/examples/examples.css b/examples/examples.css
@@ -144,12 +144,26 @@ html[data-theme='dark'] .gm-style {
 }
 
 .static-map-grid .map-container {
+  display: flex;
   position: relative;
 }
 
+.static-map-grid .map-container:nth-child(1) {
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.static-map-grid .map-container:nth-child(2) {
+  align-items: flex-end;
+}
+.static-map-grid .map-container:nth-child(3) {
+  justify-content: flex-end;
+}
+
 .static-map-grid .map {
   object-fit: contain;
   position: absolute;
-  height: 100%;
-  width: 100%;
+  max-height: 100%;
+  width: auto;
+  max-width: 100%;
 }
diff --git a/src/libraries/create-static-maps-url/index.ts b/src/libraries/create-static-maps-url/index.ts
@@ -91,8 +91,12 @@ export function createStaticMapsUrl({
   visible = [],
   style = []
 }: StaticMapsApiOptions) {
-  if (!apiKey) throw new Error('API key is required');
-  if (!width || !height) throw new Error('Width and height are required');
+  if (!apiKey) {
+    console.warn('API key is required');
+  }
+  if (!width || !height) {
+    console.warn('Width and height are required');
+  }
 
   const params: Record<string, string | number | null> = {
     key: apiKey,