@vis.gl/react-google-maps - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/components/advanced-marker.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="google.maps" />
 import React, { CSSProperties } from 'react';
@@ -40,5 +39,5 @@ import type { PropsWithChildren } from 'react';
 export declare const AdvancedMarker: React.ForwardRefExoticComponent<Omit<google.maps.marker.AdvancedMarkerElementOptions, "gmpDraggable" | "gmpClickable" | "content" | "map" | "collisionBehavior"> & AdvancedMarkerEventProps & {
-    draggable?: boolean | undefined;
-    clickable?: boolean | undefined;
-    collisionBehavior?: CollisionBehavior | undefined;
+    draggable?: boolean;
+    clickable?: boolean;
+    collisionBehavior?: CollisionBehavior;
     /**
@@ -48,11 +47,11 @@ * A className for the content element.
      */
-    className?: string | undefined;
+    className?: string;
     /**
      * Additional styles to apply to the content element.
      */
-    style?: React.CSSProperties | undefined;
+    style?: CSSProperties;
 } & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<google.maps.marker.AdvancedMarkerElement>>;
 export declare function useAdvancedMarkerRef(): readonly [(m: AdvancedMarkerRef | null) => void, google.maps.marker.AdvancedMarkerElement | null];
 export {};

dist/components/api-provider.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="google.maps" />
 import React, { PropsWithChildren, ReactElement } from 'react';
@@ -3,0 +2,0 @@ import { APILoadingStatus } from '../libraries/api-loading-status';

dist/components/info-window.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="google.maps" />
 import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react';
@@ -3,0 +2,0 @@ export type InfoWindowProps = Omit<google.maps.InfoWindowOptions, 'headerContent' | 'content' | 'pixelOffset'> & {

dist/components/map/index.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="google.maps" />
 import React, { CSSProperties, PropsWithChildren } from 'react';
@@ -16,6 +15,18 @@ import { MapEventProps } from './use-map-events';
 };
+export declare const ColorScheme: {
+    DARK: string;
+    LIGHT: string;
+    FOLLOW_SYSTEM: string;
+};
+export type ColorScheme = (typeof ColorScheme)[keyof typeof ColorScheme];
+export declare const RenderingType: {
+    VECTOR: string;
+    RASTER: string;
+    UNINITIALIZED: string;
+};
+export type RenderingType = (typeof RenderingType)[keyof typeof RenderingType];
 /**
  * Props for the Map Component
  */
-export type MapProps = google.maps.MapOptions & MapEventProps & DeckGlCompatProps & {
+export type MapProps = Omit<google.maps.MapOptions, 'renderingType' | 'colorScheme'> & MapEventProps & DeckGlCompatProps & {
     /**
@@ -35,2 +46,10 @@ * An id for the map, this is required when multiple maps are present
     /**
+     * The color-scheme to use for the map.
+     */
+    colorScheme?: ColorScheme;
+    /**
+     * The rendering-type to be used.
+     */
+    renderingType?: RenderingType;
+    /**
      * Indicates that the map will be controlled externally. Disables all controls provided by the map itself.
@@ -37,0 +56,0 @@ */

dist/components/map/use-deckgl-camera-update.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="google.maps" />
 export type DeckGlCompatProps = {
@@ -3,0 +2,0 @@ /**

dist/components/map/use-map-camera-params.d.ts

@@ -1,4 +0,3 @@
-/// <reference types="google.maps" />
 import { CameraStateRef } from './use-tracked-camera-state-ref';
 import { MapProps } from '../map';
 export declare function useMapCameraParams(map: google.maps.Map | null, cameraStateRef: CameraStateRef, mapProps: MapProps): void;

dist/components/map/use-map-events.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="google.maps" />
 /**
@@ -3,0 +2,0 @@ * Handlers for all events that could be emitted by map-instances.

dist/components/map/use-map-instance.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="google.maps" />
 import { Ref } from 'react';
@@ -3,0 +2,0 @@ import { MapProps } from '../map';

dist/components/map/use-map-options.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="google.maps" />
 import { MapProps } from '../map';
@@ -3,0 +2,0 @@ /**

dist/components/map/use-tracked-camera-state-ref.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="google.maps" />
 import { MutableRefObject } from 'react';
@@ -3,0 +2,0 @@ export type CameraState = {

dist/components/marker.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="google.maps" />
 import React from 'react';
@@ -3,0 +2,0 @@ import type { Ref } from 'react';

dist/components/pin.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="google.maps" />
 import { PropsWithChildren } from 'react';
@@ -3,0 +2,0 @@ /**

dist/hooks/use-map.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="google.maps" />
 /**
@@ -3,0 +2,0 @@ * Retrieves a map-instance from the context. This is either an instance

dist/hooks/use-maps-library.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="google.maps" />
 interface ApiLibraries {
@@ -3,0 +2,0 @@ core: google.maps.CoreLibrary;

dist/libraries/lat-lng-utils.d.ts

@@ -1,4 +0,3 @@
-/// <reference types="google.maps" />
 export declare function isLatLngLiteral(obj: unknown): obj is google.maps.LatLngLiteral;
 export declare function latLngEquals(a: google.maps.LatLngLiteral | google.maps.LatLng | undefined | null, b: google.maps.LatLngLiteral | google.maps.LatLng | undefined | null): boolean;
 export declare function toLatLngLiteral(obj: google.maps.LatLngLiteral | google.maps.LatLng): google.maps.LatLngLiteral;

package.json

 {
   "name": "@vis.gl/react-google-maps",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "React components and hooks for the Google Maps JavaScript API",
@@ -67,4 +67,6 @@ "source": "src/index.ts",
     "@types/jest": "^29.4.0",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
     "eslint": "^8.25.0",
@@ -71,0 +73,0 @@ "eslint-config-prettier": "^9.0.0",

README.md

@@ -44,3 +44,3 @@ # React Components for the Google Maps JavaScript API
 ```tsx
-import {APIProvider, Map, Marker} from '@vis.gl/react-google-maps';
+import {AdvancedMarker, APIProvider, Map} from '@vis.gl/react-google-maps';
 
@@ -52,4 +52,4 @@ function App() {
     <APIProvider apiKey={'YOUR API KEY HERE'}>
-      <Map defaultCenter={position} defaultZoom={10}>
-        <Marker position={position} />
+      <Map defaultCenter={position} defaultZoom={10} mapId='DEMO_MAP_ID'>
+        <AdvancedMarker position={position} />
       </Map>
@@ -56,0 +56,0 @@ </APIProvider>

src/components/map/use-map-instance.ts

@@ -75,2 +75,4 @@ import {Ref, useEffect, useRef, useState} from 'react';
     reuseMaps,
+    renderingType,
+    colorScheme,
 
@@ -118,4 +120,6 @@ ...mapOptions
 
-      const mapId = props.mapId;
-      const cacheKey = mapId || 'default';
+      // note: colorScheme (upcoming feature) isn't yet in the typings, remove once that is fixed:
+      const {mapId} = props;
+      const cacheKey = `${mapId || 'default'}:${renderingType || 'default'}:${colorScheme || 'LIGHT'}`;
+
       let mapDiv: HTMLElement;
@@ -138,3 +142,7 @@ let map: google.maps.Map;
         container.appendChild(mapDiv);
-        map = new google.maps.Map(mapDiv, mapOptions);
+        map = new google.maps.Map(mapDiv, {
+          ...mapOptions,
+          renderingType: renderingType as google.maps.RenderingType,
+          colorScheme: colorScheme as google.maps.ColorScheme
+        });
       }
@@ -192,3 +200,13 @@
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [container, apiIsLoaded, id, props.mapId]
+    [
+      container,
+      apiIsLoaded,
+      id,
+
+      // these props can't be changed after initialization and require a new
+      // instance to be created
+      props.mapId,
+      props.renderingType,
+      props.colorScheme
+    ]
   );
@@ -195,0 +213,0 @@

src/components/map/use-map-options.ts

 import {MapProps} from '../map';
 import {useDeepCompareEffect} from '../../libraries/use-deep-compare-effect';
 
-const mapOptionKeys = new Set([
+const mapOptionKeys: Set<keyof google.maps.MapOptions> = new Set([
   'backgroundColor',
@@ -16,2 +16,3 @@ 'clickableIcons',
   'gestureHandling',
+  'headingInteractionEnabled',
   'isFractionalZoomEnabled',
@@ -37,2 +38,3 @@ 'keyboardShortcuts',
   'styles',
+  'tiltInteractionEnabled',
   'zoomControl',
@@ -39,0 +41,0 @@ 'zoomControlOptions'

No alert changes

Improved metrics

Total package byte prevSize

567608

increased by1.44%

Lines of code

7642

increased by1.55%

Worsened metrics

Dev dependency count

24

increased by9.09%

No dependency changes