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

Comparing version 0.5.4 to 0.6.0

dist/components/map/index.d.ts

 /// <reference types="google.maps" />
 import React, { CSSProperties, PropsWithChildren } from 'react';
 import { MapEventProps } from './use-map-events';
+import { DeckGlCompatProps } from './use-deckgl-camera-update';
 export interface GoogleMapsContextValue {
@@ -9,37 +10,38 @@ map: google.maps.Map | null;
 export type { MapCameraChangedEvent, MapEvent, MapEventProps, MapMouseEvent } from './use-map-events';
+export type MapCameraProps = {
+    center: google.maps.LatLngLiteral;
+    zoom: number;
+    heading?: number;
+    tilt?: number;
+};
 /**
  * Props for the Google Maps Map Component
  */
-export type MapProps = google.maps.MapOptions & MapEventProps & {
-    style?: CSSProperties;
+export type MapProps = google.maps.MapOptions & MapEventProps & DeckGlCompatProps & {
     /**
-     * Adds custom style to the map by passing a css class.
+     * An id for the map, this is required when multiple maps are present
+     * in the same APIProvider context.
      */
-    className?: string;
+    id?: string;
     /**
-     * Adds initial bounds to the map as an alternative to specifying the center/zoom of the map.
-     * Calls the fitBounds method internally https://developers.google.com/maps/documentation/javascript/reference/map?hl=en#Map-Methods
+     * Additional style rules to apply to the map dom-element.
      */
-    initialBounds?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral;
+    style?: CSSProperties;
     /**
-     * An id that is added to the map. Needed when using more than one Map component.
-     * This is also needed to reference the map inside the useMap hook.
+     * Additional css class-name to apply to the element containing the map.
      */
-    id?: string;
+    className?: string;
     /**
-     * Viewport from deck.gl
+     * Indicates that the map will be controlled externally. Disables all controls provided by the map itself.
      */
-    viewport?: unknown;
+    controlled?: boolean;
+    defaultCenter?: google.maps.LatLngLiteral;
+    defaultZoom?: number;
+    defaultHeading?: number;
+    defaultTilt?: number;
     /**
-     * View state from deck.gl
+     * Alternative way to specify the default camera props as a geographic region that should be fully visible
      */
-    viewState?: Record<string, unknown>;
-    /**
-     * Initial View State from deck.gl
-     */
-    initialViewState?: Record<string, unknown>;
+    defaultBounds?: google.maps.LatLngBoundsLiteral;
 };
-/**
- * Component to render a Google Maps map
- */
 export declare const Map: {
@@ -46,0 +48,0 @@ (props: PropsWithChildren<MapProps>): React.JSX.Element;

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

 /// <reference types="google.maps" />
+export type DeckGlCompatProps = {
+    /**
+     * Viewport from deck.gl
+     */
+    viewport?: unknown;
+    /**
+     * View state from deck.gl
+     */
+    viewState?: Record<string, unknown>;
+    /**
+     * Initial View State from deck.gl
+     */
+    initialViewState?: Record<string, unknown>;
+};
 /**
@@ -6,2 +20,2 @@ * Internal hook that updates the camera when deck.gl viewState changes.
  */
-export declare function useDeckGLCameraUpdate(map: google.maps.Map | null, viewState: Record<string, unknown> | undefined): void;
+export declare function useDeckGLCameraUpdate(map: google.maps.Map | null, props: DeckGlCompatProps): boolean;

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

 /// <reference types="google.maps" />
-import { InternalCameraStateRef } from './use-internal-camera-state';
 /**
@@ -13,2 +12,3 @@ * Handlers for all events that could be emitted by map-instances.
     onProjectionChanged: (event: MapCameraChangedEvent) => void;
+    onCameraChanged: (event: MapCameraChangedEvent) => void;
     onClick: (event: MapMouseEvent) => void;
@@ -34,3 +34,3 @@ onDblclick: (event: MapMouseEvent) => void;
  */
-export declare function useMapEvents(map: google.maps.Map | null, cameraStateRef: InternalCameraStateRef, props: MapEventProps): void;
+export declare function useMapEvents(map: google.maps.Map | null, props: MapEventProps): void;
 export type MapEvent<T = unknown> = {
@@ -37,0 +37,0 @@ type: string;

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

 /// <reference types="google.maps" />
-import { MapProps } from '@vis.gl/react-google-maps';
-import { InternalCameraStateRef } from './use-internal-camera-state';
+import { MapProps } from '../map';
 /**
- * Internal hook to update the map-options and camera parameters when
- * props are changed.
+ * Internal hook to update the map-options when props are changed.
  *
  * @param map the map instance
- * @param cameraStateRef stores the last values seen during dispatch into the
- * react-application in useMapEvents(). We can safely assume that we
- * don't need to feed these values back into the map.
  * @param mapProps the props to update the map-instance with
  * @internal
  */
-export declare function useMapOptions(map: google.maps.Map | null, cameraStateRef: InternalCameraStateRef, mapProps: MapProps): void;
+export declare function useMapOptions(map: google.maps.Map | null, mapProps: MapProps): void;

dist/index.d.ts

@@ -12,3 +12,2 @@ export * from './components/advanced-marker';
 export * from './hooks/use-map';
-export * from './hooks/autocomplete';
 export * from './hooks/directions-service';
@@ -15,0 +14,0 @@ export * from './hooks/street-view-panorama';

package.json

 {
   "name": "@vis.gl/react-google-maps",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "React components and hooks for Google Maps.",
@@ -53,3 +53,4 @@ "source": "src/index.ts",
   "dependencies": {
-    "@types/google.maps": "^3.54.10"
+    "@types/google.maps": "^3.54.10",
+    "fast-deep-equal": "^3.1.3"
   },
@@ -56,0 +57,0 @@ "peerDependencies": {

src/components/map/use-deckgl-camera-update.ts

 import {useLayoutEffect} from 'react';
 
+export type DeckGlCompatProps = {
+  /**
+   * Viewport from deck.gl
+   */
+  viewport?: unknown;
+  /**
+   * View state from deck.gl
+   */
+  viewState?: Record<string, unknown>;
+  /**
+   * Initial View State from deck.gl
+   */
+  initialViewState?: Record<string, unknown>;
+};
+
 /**
@@ -9,18 +24,10 @@ * Internal hook that updates the camera when deck.gl viewState changes.
   map: google.maps.Map | null,
-  viewState: Record<string, unknown> | undefined
+  props: DeckGlCompatProps
 ) {
+  const {viewport, viewState} = props;
+  const isDeckGlControlled = !!viewport;
+
   useLayoutEffect(() => {
-    if (!map || !viewState) {
-      return;
-    }
+    if (!map || !viewState) return;
 
-    // FIXME: this should probably be extracted into a seperate hook that only
-    //  runs once when first seeing a deck.gl viewState update and resets
-    //  again. Maybe even use a seperate prop (`<Map controlled />`) instead.
-    map.setOptions({
-      gestureHandling: 'none',
-      keyboardShortcuts: false,
-      disableDefaultUI: true
-    });
-
     const {
@@ -41,2 +48,4 @@ latitude,
   }, [map, viewState]);
+
+  return isDeckGlControlled;
 }

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

 import {useEffect} from 'react';
-import {
-  InternalCameraStateRef,
-  trackDispatchedEvent
-} from './use-internal-camera-state';
 
@@ -18,2 +14,3 @@ /**
   onProjectionChanged: (event: MapCameraChangedEvent) => void;
+  onCameraChanged: (event: MapCameraChangedEvent) => void;
 
@@ -48,3 +45,2 @@ // mouse / touch / pointer events
   map: google.maps.Map | null,
-  cameraStateRef: InternalCameraStateRef,
   props: MapEventProps
@@ -72,6 +68,3 @@ ) {
         (ev?: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
-          const mapEvent = createMapEvent(eventType, map, ev);
-
-          trackDispatchedEvent(mapEvent, cameraStateRef);
-          handler(mapEvent);
+          handler(createMapEvent(eventType, map, ev));
         }
@@ -81,3 +74,3 @@ );
       return () => listener.remove();
-    }, [map, cameraStateRef, eventType, handler]);
+    }, [map, eventType, handler]);
   }
@@ -124,3 +117,3 @@ }
       center: center?.toJSON() || {lat: 0, lng: 0},
-      zoom: zoom as number,
+      zoom: (zoom as number) || 0,
       heading: heading as number,
@@ -182,3 +175,8 @@ tilt: tilt as number,
   onTiltChanged: 'tilt_changed',
-  onZoomChanged: 'zoom_changed'
+  onZoomChanged: 'zoom_changed',
+
+  // note: onCameraChanged is an alias for the bounds_changed event,
+  // since that is going to be fired in every situation where the camera is
+  // updated.
+  onCameraChanged: 'bounds_changed'
 } as const;
@@ -185,0 +183,0 @@

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

@@ -1,31 +0,48 @@
-import {useEffect, useLayoutEffect} from 'react';
-import {MapProps} from '@vis.gl/react-google-maps';
-import {InternalCameraStateRef} from './use-internal-camera-state';
-import {isLatLngLiteral} from '../../libraries/lat-lng-utils';
+import {MapProps} from '../map';
+import {useDeepCompareEffect} from '../../libraries/use-deep-compare-effect';
 
+const mapOptionKeys = new Set([
+  'backgroundColor',
+  'clickableIcons',
+  'controlSize',
+  'disableDefaultUI',
+  'disableDoubleClickZoom',
+  'draggable',
+  'draggableCursor',
+  'draggingCursor',
+  'fullscreenControl',
+  'fullscreenControlOptions',
+  'gestureHandling',
+  'isFractionalZoomEnabled',
+  'keyboardShortcuts',
+  'mapTypeControl',
+  'mapTypeControlOptions',
+  'mapTypeId',
+  'maxZoom',
+  'minZoom',
+  'noClear',
+  'panControl',
+  'panControlOptions',
+  'restriction',
+  'rotateControl',
+  'rotateControlOptions',
+  'scaleControl',
+  'scaleControlOptions',
+  'scrollwheel',
+  'streetView',
+  'streetViewControl',
+  'streetViewControlOptions',
+  'styles',
+  'zoomControl',
+  'zoomControlOptions'
+]);
+
 /**
- * Internal hook to update the map-options and camera parameters when
- * props are changed.
+ * Internal hook to update the map-options when props are changed.
  *
  * @param map the map instance
- * @param cameraStateRef stores the last values seen during dispatch into the
- * react-application in useMapEvents(). We can safely assume that we
- * don't need to feed these values back into the map.
  * @param mapProps the props to update the map-instance with
  * @internal
  */
-export function useMapOptions(
-  map: google.maps.Map | null,
-  cameraStateRef: InternalCameraStateRef,
-  mapProps: MapProps
-) {
-  const {center: rawCenter, zoom, heading, tilt, ...mapOptions} = mapProps;
-  const center = rawCenter
-    ? isLatLngLiteral(rawCenter)
-      ? rawCenter
-      : rawCenter.toJSON()
-    : null;
-  const lat = center && center.lat;
-  const lng = center && center.lng;
-
+export function useMapOptions(map: google.maps.Map | null, mapProps: MapProps) {
   /* eslint-disable react-hooks/exhaustive-deps --
@@ -35,52 +52,23 @@ *
    * In that case, the values will be or have been passed to the map
-   * constructor as mapOptions.
+   * constructor via mapOptions.
    */
 
+  const mapOptions: google.maps.MapOptions = {};
+  const keys = Object.keys(mapProps) as (keyof google.maps.MapOptions)[];
+  for (const key of keys) {
+    if (!mapOptionKeys.has(key)) continue;
+
+    mapOptions[key] = mapProps[key] as never;
+  }
+
   // update the map options when mapOptions is changed
   // Note: due to the destructuring above, mapOptions will be seen as changed
-  //   with every re-render, so we're boldly assuming the maps-api will properly
+  //   with every re-render, so we're assuming the maps-api will properly
   //   deal with unchanged option-values passed into setOptions.
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     if (!map) return;
 
-    // Changing the mapId via setOptions will trigger an error-message.
-    // We will re-create the map-instance in that case anyway, so we
-    // remove it here to avoid this error-message.
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const {mapId, ...opts} = mapOptions;
-    map.setOptions(opts);
+    map.setOptions(mapOptions);
   }, [mapOptions]);
-
-  useLayoutEffect(() => {
-    if (!map || !Number.isFinite(lat) || !Number.isFinite(lng)) return;
-    if (
-      cameraStateRef.current.center.lat === lat &&
-      cameraStateRef.current.center.lng === lng
-    )
-      return;
-
-    map.moveCamera({center: {lat: lat as number, lng: lng as number}});
-  }, [lat, lng]);
-
-  useLayoutEffect(() => {
-    if (!map || !Number.isFinite(zoom)) return;
-    if (cameraStateRef.current.zoom === zoom) return;
-
-    map.moveCamera({zoom: zoom as number});
-  }, [zoom]);
-
-  useLayoutEffect(() => {
-    if (!map || !Number.isFinite(heading)) return;
-    if (cameraStateRef.current.heading === heading) return;
-
-    map.moveCamera({heading: heading as number});
-  }, [heading]);
-
-  useLayoutEffect(() => {
-    if (!map || !Number.isFinite(tilt)) return;
-    if (cameraStateRef.current.tilt === tilt) return;
-
-    map.moveCamera({tilt: tilt as number});
-  }, [tilt]);
   /* eslint-enable react-hooks/exhaustive-deps */
 }

src/index.ts

@@ -12,3 +12,2 @@ export * from './components/advanced-marker';
 export * from './hooks/use-map';
-export * from './hooks/autocomplete';
 export * from './hooks/directions-service';
@@ -15,0 +14,0 @@ export * from './hooks/street-view-panorama';

src/libraries/google-maps-api-loader.ts

@@ -53,3 +53,2 @@ import {APILoadingStatus} from './api-loading-status';
     //   changed in between calls.
-
     if (!window.google?.maps?.importLibrary) {
@@ -56,0 +55,0 @@ this.serializedApiParams = serializedParams;

src/libraries/lat-lng-utils.ts

@@ -24,6 +24,5 @@ export function isLatLngLiteral(
 ): google.maps.LatLngLiteral {
-  return {
-    lat: typeof obj.lat === 'function' ? obj.lat() : obj.lat,
-    lng: typeof obj.lng === 'function' ? obj.lng() : obj.lng
-  };
+  if (isLatLngLiteral(obj)) return obj;
+
+  return obj.toJSON();
 }

No alert changes

Improved metrics

Total package byte prevSize

479391

increased by4.44%

Number of package files

89

increased by7.23%

Lines of code

6486

increased by3.08%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedfast-deep-equal@^3.1.3

• + Addedfast-deep-equal@3.1.3(transitive)