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

Comparing version 0.3.2 to 0.3.3

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

 /// <reference types="google.maps" />
+import { InternalCameraStateRef } from './use-internal-camera-state';
 /**
@@ -32,4 +33,4 @@ * Handlers for all events that could be emitted by map-instances.
  */
-export declare function useMapEvents(map: google.maps.Map | null, props: MapEventProps): void;
-type MapEvent<T = unknown> = {
+export declare function useMapEvents(map: google.maps.Map | null, cameraStateRef: InternalCameraStateRef, props: MapEventProps): void;
+export type MapEvent<T = unknown> = {
     type: string;
@@ -53,2 +54,1 @@ map: google.maps.Map;
 }>;
-export {};

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';
 /**
- * Internal hook to update the map-options and view-parameters when
+ * Internal hook to update the map-options and camera parameters 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, mapProps: MapProps): void;
+export declare function useMapOptions(map: google.maps.Map | null, cameraStateRef: InternalCameraStateRef, mapProps: MapProps): void;

dist/index.umd.js

@@ -420,3 +420,3 @@ (function (global, factory) {
   var _excluded$4 = ["onLoad", "apiKey", "libraries"],
-    _excluded2 = ["children"];
+    _excluded2$1 = ["children"];
   function _forOf(target, body, check) {
@@ -630,3 +630,3 @@ if (typeof target[_iteratorSymbol] === "function") {
     var children = props.children,
-      loaderProps = _objectWithoutPropertiesLoose(props, _excluded2);
+      loaderProps = _objectWithoutPropertiesLoose(props, _excluded2$1);
     var _useMapInstances = useMapInstances(),
@@ -689,6 +689,43 @@ mapInstances = _useMapInstances.mapInstances,
   /**
+   * Creates a mutable ref object to track the last known state of the map camera.
+   * This is updated by `trackDispatchedEvent` and used in `useMapOptions`.
+   */
+  function useInternalCameraState() {
+    return React.useRef({
+      center: {
+        lat: 0,
+        lng: 0
+      },
+      heading: 0,
+      tilt: 0,
+      zoom: 0
+    });
+  }
+  /**
+   * Records camera data from the last event dispatched to the React application
+   * in a mutable `IternalCameraStateRef`.
+   * This data can then be used to prevent feeding these values back to the
+   * map-instance when a typical "controlled component" setup (state variable is
+   * fed into and updated by the map).
+   */
+  function trackDispatchedEvent(ev, cameraStateRef) {
+    var cameraEvent = ev;
+    // we're only interested in the camera-events here
+    if (!cameraEvent.detail.center) return;
+    var _cameraEvent$detail = cameraEvent.detail,
+      center = _cameraEvent$detail.center,
+      zoom = _cameraEvent$detail.zoom,
+      heading = _cameraEvent$detail.heading,
+      tilt = _cameraEvent$detail.tilt;
+    cameraStateRef.current.center = center;
+    cameraStateRef.current.heading = heading;
+    cameraStateRef.current.tilt = tilt;
+    cameraStateRef.current.zoom = zoom;
+  }
+
+  /**
    * Sets up effects to bind event-handlers for all event-props in MapEventProps.
    * @internal
    */
-  function useMapEvents(map, props) {
+  function useMapEvents(map, cameraStateRef, props) {
     var _loop = function _loop() {
@@ -705,3 +742,5 @@ var propName = _step.value;
         var listener = map.addListener(eventType, function (ev) {
-          handler(createMapEvent(eventType, map, ev));
+          var mapEvent = createMapEvent(eventType, map, ev);
+          trackDispatchedEvent(mapEvent, cameraStateRef);
+          handler(mapEvent);
         });
@@ -711,3 +750,3 @@ return function () {
         };
-      }, [map, eventType, handler]);
+      }, [map, cameraStateRef, eventType, handler]);
     };
@@ -810,10 +849,23 @@ // note: calling a useEffect hook from within a loop is prohibited by the
 
-  var _excluded$3 = ["center", "zoom", "heading", "tilt"];
+  function isLatLngLiteral(obj) {
+    if (!obj || typeof obj !== 'object') return false;
+    if (!('lat' in obj && 'lng' in obj)) return false;
+    return Number.isFinite(obj.lat) && Number.isFinite(obj.lng);
+  }
+
+  var _excluded$3 = ["center", "zoom", "heading", "tilt"],
+    _excluded2 = ["mapId"];
   /**
-   * Internal hook to update the map-options and view-parameters when
+   * Internal hook to update the map-options and camera parameters 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
    */
-  function useMapOptions(map, mapProps) {
-    var center = mapProps.center,
+  function useMapOptions(map, cameraStateRef, mapProps) {
+    var rawCenter = mapProps.center,
       zoom = mapProps.zoom,
@@ -823,2 +875,5 @@ heading = mapProps.heading,
       mapOptions = _objectWithoutPropertiesLoose(mapProps, _excluded$3);
+    var center = rawCenter ? isLatLngLiteral(rawCenter) ? rawCenter : rawCenter.toJSON() : null;
+    var lat = center && center.lat;
+    var lng = center && center.lng;
     /* eslint-disable react-hooks/exhaustive-deps --
@@ -831,14 +886,27 @@ *
     // 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
+    //   deal with unchanged option-values passed into setOptions.
     React.useEffect(function () {
       if (!map) return;
-      map.setOptions(mapOptions);
+      // 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
+      var opts = _objectWithoutPropertiesLoose(mapOptions, _excluded2);
+      map.setOptions(opts);
     }, [mapOptions]);
     React.useLayoutEffect(function () {
-      if (!map || !center) return;
+      if (!map || !Number.isFinite(lat) || !Number.isFinite(lng)) return;
+      if (cameraStateRef.current.center.lat === lat && cameraStateRef.current.center.lng === lng) return;
       map.moveCamera({
-        center: center
+        center: {
+          lat: lat,
+          lng: lng
+        }
       });
-    }, [center]);
+    }, [lat, lng]);
     React.useLayoutEffect(function () {
       if (!map || !Number.isFinite(zoom)) return;
+      if (cameraStateRef.current.zoom === zoom) return;
       map.moveCamera({
@@ -850,2 +918,3 @@ zoom: zoom
       if (!map || !Number.isFinite(heading)) return;
+      if (cameraStateRef.current.heading === heading) return;
       map.moveCamera({
@@ -857,2 +926,3 @@ heading: heading
       if (!map || !Number.isFinite(tilt)) return;
+      if (cameraStateRef.current.tilt === tilt) return;
       map.moveCamera({
@@ -918,4 +988,5 @@ tilt: tilt
       mapRef = _useMapInstance[1];
-    useMapOptions(map, props);
-    useMapEvents(map, props);
+    var cameraStateRef = useInternalCameraState();
+    useMapOptions(map, cameraStateRef, props);
+    useMapEvents(map, cameraStateRef, props);
     useDeckGLCameraUpdate(map, viewState);
@@ -922,0 +993,0 @@ var isViewportSet = React.useMemo(function () {

package.json

 {
   "name": "@vis.gl/react-google-maps",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "React components and hooks for Google Maps.",
@@ -5,0 +5,0 @@ "source": "src/index.ts",

README.md

@@ -0,1 +1,22 @@
+> [!IMPORTANT]
+> This project is still in it's alpha phase.
+> 
+> When using it be aware that things may not yet work as expected and can
+> break at any point. Releases happen often, so when you experience problems,
+> make sure you are using the latest version (check with `npm outdated` in
+> your project) before opening an issue.
+> 
+> We are still in a phase where we can easily make bigger changes, so we ask
+> you to please [provide feedback](https://github.com/visgl/react-google-maps/issues/new)
+> on everything you notice - including, but not limited to
+>  - developer experience (installation, typings, sourcemaps, framework integration, ...)
+>  - hard to understand concepts and APIs
+>  - wrong, missing, outdated or inaccurate documentation
+>  - use-cases not covered by the API
+>  - missing features
+>  - and of course any bugs you encounter
+> 
+> Also, feel free to use [GitHub discussions](https://github.com/visgl/react-google-maps/discussions) to ask questions or start a new
+> discussion.
+
 # React Components for the Google Maps JavaScript API
@@ -2,0 +23,0 @@

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

 import {useEffect} from 'react';
+import {
+  InternalCameraStateRef,
+  trackDispatchedEvent
+} from './use-internal-camera-state';
 
@@ -43,2 +47,3 @@ /**
   map: google.maps.Map | null,
+  cameraStateRef: InternalCameraStateRef,
   props: MapEventProps
@@ -65,3 +70,6 @@ ) {
         (ev?: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
-          handler(createMapEvent(eventType, map, ev));
+          const mapEvent = createMapEvent(eventType, map, ev);
+
+          trackDispatchedEvent(mapEvent, cameraStateRef);
+          handler(mapEvent);
         }
@@ -71,3 +79,3 @@ );
       return () => listener.remove();
-    }, [map, eventType, handler]);
+    }, [map, cameraStateRef, eventType, handler]);
   }
@@ -195,3 +203,3 @@ }
 
-type MapEvent<T = unknown> = {
+export type MapEvent<T = unknown> = {
   type: string;
@@ -198,0 +206,0 @@ map: google.maps.Map;

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

 import {useEffect, useLayoutEffect} from 'react';
 import {MapProps} from '@vis.gl/react-google-maps';
+import {InternalCameraStateRef} from './use-internal-camera-state';
+import {isLatLngLiteral} from '../../libraries/is-lat-lng-literal';
 
 /**
- * Internal hook to update the map-options and view-parameters when
+ * Internal hook to update the map-options and camera parameters 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, mapProps: MapProps) {
-  const {center, zoom, heading, tilt, ...mapOptions} = mapProps;
+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;
 
@@ -20,16 +39,30 @@ /* eslint-disable react-hooks/exhaustive-deps --
   // 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
+  //   deal with unchanged option-values passed into setOptions.
   useEffect(() => {
     if (!map) return;
 
-    map.setOptions(mapOptions);
+    // 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);
   }, [mapOptions]);
 
   useLayoutEffect(() => {
-    if (!map || !center) return;
+    if (!map || !Number.isFinite(lat) || !Number.isFinite(lng)) return;
+    if (
+      cameraStateRef.current.center.lat === lat &&
+      cameraStateRef.current.center.lng === lng
+    )
+      return;
 
-    map.moveCamera({center});
-  }, [center]);
+    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;
 
@@ -41,2 +74,3 @@ map.moveCamera({zoom: zoom as number});
     if (!map || !Number.isFinite(heading)) return;
+    if (cameraStateRef.current.heading === heading) return;
 
@@ -48,2 +82,3 @@ map.moveCamera({heading: heading as number});
     if (!map || !Number.isFinite(tilt)) return;
+    if (cameraStateRef.current.tilt === tilt) return;
 
@@ -50,0 +85,0 @@ map.moveCamera({tilt: tilt as number});

No alert changes

Improved metrics

Total package byte prevSize

411282

increased by6.53%

Number of package files

80

increased by5.26%

Lines of code

5794

increased by4.96%

Number of lines in readme file

130

increased by19.27%

No dependency changes