react-map-gl - npm Package Compare versions

Comparing version 6.1.4 to 6.1.5

CHANGELOG.md

@@ -5,2 +5,8 @@ # CHANGELOG
 
+## 6.1.5 (Feb 7, 2021)
+
+- Fix stale Marker children (#1332)
+- Consistent onViewportChange events on map resize (#1335)
+- Fix usage with function refs (#1339)
+
 ## 6.1.4 (Feb 3, 2021)
@@ -7,0 +13,0 @@

dist/es5/components/interactive-map.js

@@ -248,2 +248,9 @@ "use strict";
 
+function getRefHandles(staticMapRef) {
+  return {
+    getMap: staticMapRef.current && staticMapRef.current.getMap,
+    queryRenderedFeatures: staticMapRef.current && staticMapRef.current.queryRenderedFeatures
+  };
+}
+
 var InteractiveMap = (0, React.forwardRef)(function (props, ref) {
@@ -261,3 +268,3 @@ var parentContext = (0, React.useContext)(_mapContext["default"]);
   var eventCanvasRef = (0, React.useRef)(null);
-  var staticMapRef = ref || (0, React.useRef)(null);
+  var staticMapRef = (0, React.useRef)(null);
 
@@ -309,2 +316,5 @@ var _thisRef = (0, React.useRef)({
 
+  (0, React.useImperativeHandle)(ref, function () {
+    return getRefHandles(staticMapRef);
+  }, []);
   var context = (0, React.useMemo)(function () {
@@ -341,11 +351,12 @@ return _objectSpread(_objectSpread({}, parentContext), {}, {
   var updateControllerOpts = function updateControllerOpts() {
-    var opts = Object.assign({}, thisRef.props, thisRef.props.viewState, {
-      isInteractive: Boolean(thisRef.props.onViewStateChange || thisRef.props.onViewportChange),
-      onViewportChange: handleViewportChange,
-      onStateChange: handleInteractionStateChange,
-      eventManager: eventManager,
-      width: thisRef.width,
-      height: thisRef.height
-    });
-    controller.setOptions(opts);
+    if (thisRef.width && thisRef.height) {
+      controller.setOptions(_objectSpread(_objectSpread(_objectSpread({}, thisRef.props), thisRef.props.viewState), {}, {
+        isInteractive: Boolean(thisRef.props.onViewStateChange || thisRef.props.onViewportChange),
+        onViewportChange: handleViewportChange,
+        onStateChange: handleInteractionStateChange,
+        eventManager: eventManager,
+        width: thisRef.width,
+        height: thisRef.height
+      }));
+    }
   };
@@ -352,0 +363,0 @@

dist/es5/components/marker.js

@@ -60,3 +60,5 @@ "use strict";
       containerRef = thisRef.containerRef;
-  var draggable = props.draggable;
+  var children = props.children,
+      className = props.className,
+      draggable = props.draggable;
   var dragPos = state.dragPos;
@@ -80,7 +82,7 @@
     return React.createElement("div", {
-      className: "mapboxgl-marker ".concat(props.className),
+      className: "mapboxgl-marker ".concat(className),
       ref: thisRef.containerRef,
       style: containerStyle
-    }, props.children);
-  }, [props.className]);
+    }, children);
+  }, [children, className]);
   var container = containerRef.current;
@@ -87,0 +89,0 @@

dist/es5/components/static-map.js

@@ -92,13 +92,11 @@ "use strict";
 function getRefHandles(mapboxRef) {
-  return function () {
-    return {
-      getMap: function getMap() {
-        return mapboxRef.current && mapboxRef.current.getMap();
-      },
-      queryRenderedFeatures: function queryRenderedFeatures(geometry) {
-        var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        var map = mapboxRef.current && mapboxRef.current.getMap();
-        return map && map.queryRenderedFeatures(geometry, options);
-      }
-    };
+  return {
+    getMap: function getMap() {
+      return mapboxRef.current && mapboxRef.current.getMap();
+    },
+    queryRenderedFeatures: function queryRenderedFeatures(geometry) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var map = mapboxRef.current && mapboxRef.current.getMap();
+      return map && map.queryRenderedFeatures(geometry, options);
+    }
   };
@@ -181,5 +179,5 @@ }
   var map = mapboxRef.current && mapboxRef.current.getMap();
-  (0, React.useImperativeHandle)(ref, (0, React.useMemo)(function () {
+  (0, React.useImperativeHandle)(ref, function () {
     return getRefHandles(mapboxRef);
-  }, []));
+  }, []);
   var overlays = map && React.createElement(_mapContext.MapContextProvider, {
@@ -186,0 +184,0 @@ value: _objectSpread(_objectSpread({}, context), {}, {

dist/es5/utils/map-controller.js

@@ -165,3 +165,3 @@ "use strict";
     value: function updateViewport(newMapState, extraProps, interactionState) {
-      var oldViewport = this.mapState ? this.mapState.getViewportProps() : {};
+      var oldViewport = this.mapState instanceof _mapState["default"] ? this.mapState.getViewportProps() : this.mapState;
 
@@ -216,6 +216,8 @@ var newViewport = _objectSpread(_objectSpread({}, newMapState.getViewportProps()), extraProps);
       this.onStateChange = onStateChange;
-      var dimensionChanged = !this.mapStateProps || this.mapStateProps.height !== options.height;
+      var prevOptions = this.mapStateProps || {};
+      var dimensionChanged = prevOptions.height !== options.height || prevOptions.width !== options.width;
       this.mapStateProps = options;
 
-      if (dimensionChanged && options.height) {
+      if (dimensionChanged) {
+        this.mapState = prevOptions;
         this.updateViewport(new _mapState["default"](options));
@@ -222,0 +224,0 @@ }

dist/es6/components/interactive-map.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useContext, useRef, useMemo, useEffect, forwardRef } from 'react';
+import { useContext, useRef, useMemo, useEffect, useImperativeHandle, forwardRef } from 'react';
 import * as PropTypes from 'prop-types';
@@ -221,2 +221,9 @@ import StaticMap from './static-map';
 
+function getRefHandles(staticMapRef) {
+  return {
+    getMap: staticMapRef.current && staticMapRef.current.getMap,
+    queryRenderedFeatures: staticMapRef.current && staticMapRef.current.queryRenderedFeatures
+  };
+}
+
 const InteractiveMap = forwardRef((props, ref) => {
@@ -230,3 +237,3 @@ const parentContext = useContext(MapContext);
   const eventCanvasRef = useRef(null);
-  const staticMapRef = ref || useRef(null);
+  const staticMapRef = useRef(null);
 
@@ -281,2 +288,3 @@ const _thisRef = useRef({
 
+  useImperativeHandle(ref, () => getRefHandles(staticMapRef), []);
   const context = useMemo(() => ({ ...parentContext,
@@ -314,11 +322,13 @@ eventManager,
   const updateControllerOpts = () => {
-    const opts = Object.assign({}, thisRef.props, thisRef.props.viewState, {
-      isInteractive: Boolean(thisRef.props.onViewStateChange || thisRef.props.onViewportChange),
-      onViewportChange: handleViewportChange,
-      onStateChange: handleInteractionStateChange,
-      eventManager,
-      width: thisRef.width,
-      height: thisRef.height
-    });
-    controller.setOptions(opts);
+    if (thisRef.width && thisRef.height) {
+      controller.setOptions({ ...thisRef.props,
+        ...thisRef.props.viewState,
+        isInteractive: Boolean(thisRef.props.onViewStateChange || thisRef.props.onViewportChange),
+        onViewportChange: handleViewportChange,
+        onStateChange: handleInteractionStateChange,
+        eventManager,
+        width: thisRef.width,
+        height: thisRef.height
+      });
+    }
   };
@@ -325,0 +335,0 @@

dist/es6/components/marker.js

@@ -48,2 +48,4 @@ import * as React from 'react';
   const {
+    children,
+    className,
     draggable
@@ -66,7 +68,7 @@ } = props;
     return React.createElement("div", {
-      className: "mapboxgl-marker ".concat(props.className),
+      className: "mapboxgl-marker ".concat(className),
       ref: thisRef.containerRef,
       style: containerStyle
-    }, props.children);
-  }, [props.className]);
+    }, children);
+  }, [children, className]);
   const container = containerRef.current;
@@ -73,0 +75,0 @@

dist/es6/components/static-map.js

 import * as React from 'react';
-import { useState, useRef, useContext, useMemo, useImperativeHandle, forwardRef } from 'react';
+import { useState, useRef, useContext, useImperativeHandle, forwardRef } from 'react';
 import * as PropTypes from 'prop-types';
@@ -64,3 +64,3 @@ import WebMercatorViewport from 'viewport-mercator-project';
 function getRefHandles(mapboxRef) {
-  return () => ({
+  return {
     getMap: () => mapboxRef.current && mapboxRef.current.getMap(),
@@ -71,3 +71,3 @@ queryRenderedFeatures: (geometry, options = {}) => {
     }
-  });
+  };
 }
@@ -142,3 +142,3 @@
   const map = mapboxRef.current && mapboxRef.current.getMap();
-  useImperativeHandle(ref, useMemo(() => getRefHandles(mapboxRef), []));
+  useImperativeHandle(ref, () => getRefHandles(mapboxRef), []);
   const overlays = map && React.createElement(MapContextProvider, {
@@ -145,0 +145,0 @@ value: { ...context,

dist/es6/utils/map-controller.js

@@ -142,3 +142,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
   updateViewport(newMapState, extraProps, interactionState) {
-    const oldViewport = this.mapState ? this.mapState.getViewportProps() : {};
+    const oldViewport = this.mapState instanceof MapState ? this.mapState.getViewportProps() : this.mapState;
     const newViewport = { ...newMapState.getViewportProps(),
@@ -184,6 +184,8 @@ ...extraProps
     this.onStateChange = onStateChange;
-    const dimensionChanged = !this.mapStateProps || this.mapStateProps.height !== options.height;
+    const prevOptions = this.mapStateProps || {};
+    const dimensionChanged = prevOptions.height !== options.height || prevOptions.width !== options.width;
     this.mapStateProps = options;
 
-    if (dimensionChanged && options.height) {
+    if (dimensionChanged) {
+      this.mapState = prevOptions;
       this.updateViewport(new MapState(options));
@@ -190,0 +192,0 @@ }

dist/esm/components/interactive-map.js

@@ -10,3 +10,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useContext, useRef, useMemo, useEffect, forwardRef } from 'react';
+import { useContext, useRef, useMemo, useEffect, useImperativeHandle, forwardRef } from 'react';
 import * as PropTypes from 'prop-types';
@@ -227,2 +227,9 @@ import StaticMap from './static-map';
 
+function getRefHandles(staticMapRef) {
+  return {
+    getMap: staticMapRef.current && staticMapRef.current.getMap,
+    queryRenderedFeatures: staticMapRef.current && staticMapRef.current.queryRenderedFeatures
+  };
+}
+
 var InteractiveMap = forwardRef(function (props, ref) {
@@ -240,3 +247,3 @@ var parentContext = useContext(MapContext);
   var eventCanvasRef = useRef(null);
-  var staticMapRef = ref || useRef(null);
+  var staticMapRef = useRef(null);
 
@@ -288,2 +295,5 @@ var _thisRef = useRef({
 
+  useImperativeHandle(ref, function () {
+    return getRefHandles(staticMapRef);
+  }, []);
   var context = useMemo(function () {
@@ -320,11 +330,12 @@ return _objectSpread(_objectSpread({}, parentContext), {}, {
   var updateControllerOpts = function updateControllerOpts() {
-    var opts = Object.assign({}, thisRef.props, thisRef.props.viewState, {
-      isInteractive: Boolean(thisRef.props.onViewStateChange || thisRef.props.onViewportChange),
-      onViewportChange: handleViewportChange,
-      onStateChange: handleInteractionStateChange,
-      eventManager: eventManager,
-      width: thisRef.width,
-      height: thisRef.height
-    });
-    controller.setOptions(opts);
+    if (thisRef.width && thisRef.height) {
+      controller.setOptions(_objectSpread(_objectSpread(_objectSpread({}, thisRef.props), thisRef.props.viewState), {}, {
+        isInteractive: Boolean(thisRef.props.onViewStateChange || thisRef.props.onViewportChange),
+        onViewportChange: handleViewportChange,
+        onStateChange: handleInteractionStateChange,
+        eventManager: eventManager,
+        width: thisRef.width,
+        height: thisRef.height
+      }));
+    }
   };
@@ -331,0 +342,0 @@

dist/esm/components/marker.js

@@ -45,3 +45,5 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
       containerRef = thisRef.containerRef;
-  var draggable = props.draggable;
+  var children = props.children,
+      className = props.className,
+      draggable = props.draggable;
   var dragPos = state.dragPos;
@@ -65,7 +67,7 @@
     return React.createElement("div", {
-      className: "mapboxgl-marker ".concat(props.className),
+      className: "mapboxgl-marker ".concat(className),
       ref: thisRef.containerRef,
       style: containerStyle
-    }, props.children);
-  }, [props.className]);
+    }, children);
+  }, [children, className]);
   var container = containerRef.current;
@@ -72,0 +74,0 @@

dist/esm/components/static-map.js

@@ -9,3 +9,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
-import { useState, useRef, useContext, useMemo, useImperativeHandle, forwardRef } from 'react';
+import { useState, useRef, useContext, useImperativeHandle, forwardRef } from 'react';
 import * as PropTypes from 'prop-types';
@@ -72,13 +72,11 @@ import WebMercatorViewport from 'viewport-mercator-project';
 function getRefHandles(mapboxRef) {
-  return function () {
-    return {
-      getMap: function getMap() {
-        return mapboxRef.current && mapboxRef.current.getMap();
-      },
-      queryRenderedFeatures: function queryRenderedFeatures(geometry) {
-        var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        var map = mapboxRef.current && mapboxRef.current.getMap();
-        return map && map.queryRenderedFeatures(geometry, options);
-      }
-    };
+  return {
+    getMap: function getMap() {
+      return mapboxRef.current && mapboxRef.current.getMap();
+    },
+    queryRenderedFeatures: function queryRenderedFeatures(geometry) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var map = mapboxRef.current && mapboxRef.current.getMap();
+      return map && map.queryRenderedFeatures(geometry, options);
+    }
   };
@@ -161,5 +159,5 @@ }
   var map = mapboxRef.current && mapboxRef.current.getMap();
-  useImperativeHandle(ref, useMemo(function () {
+  useImperativeHandle(ref, function () {
     return getRefHandles(mapboxRef);
-  }, []));
+  }, []);
   var overlays = map && React.createElement(MapContextProvider, {
@@ -166,0 +164,0 @@ value: _objectSpread(_objectSpread({}, context), {}, {

dist/esm/utils/map-controller.js

@@ -161,3 +161,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
     value: function updateViewport(newMapState, extraProps, interactionState) {
-      var oldViewport = this.mapState ? this.mapState.getViewportProps() : {};
+      var oldViewport = this.mapState instanceof MapState ? this.mapState.getViewportProps() : this.mapState;
 
@@ -212,6 +212,8 @@ var newViewport = _objectSpread(_objectSpread({}, newMapState.getViewportProps()), extraProps);
       this.onStateChange = onStateChange;
-      var dimensionChanged = !this.mapStateProps || this.mapStateProps.height !== options.height;
+      var prevOptions = this.mapStateProps || {};
+      var dimensionChanged = prevOptions.height !== options.height || prevOptions.width !== options.width;
       this.mapStateProps = options;
 
-      if (dimensionChanged && options.height) {
+      if (dimensionChanged) {
+        this.mapState = prevOptions;
         this.updateViewport(new MapState(options));
@@ -218,0 +220,0 @@ }

package.json

 {
   "name": "react-map-gl",
   "description": "React components for Mapbox GL JS-compatible libraries",
-  "version": "6.1.4",
+  "version": "6.1.5",
   "keywords": [
@@ -6,0 +6,0 @@ "mapbox",

src/components/interactive-map.js

 import * as React from 'react';
-import {useContext, useRef, useMemo, useEffect, forwardRef} from 'react';
+import {useContext, useRef, useMemo, useEffect, useImperativeHandle, forwardRef} from 'react';
 import * as PropTypes from 'prop-types';
@@ -273,2 +273,9 @@
 
+function getRefHandles(staticMapRef) {
+  return {
+    getMap: staticMapRef.current && staticMapRef.current.getMap,
+    queryRenderedFeatures: staticMapRef.current && staticMapRef.current.queryRenderedFeatures
+  };
+}
+
 /* eslint-disable max-statements */
@@ -287,3 +294,3 @@ const InteractiveMap = forwardRef((props, ref) => {
   const eventCanvasRef = useRef(null);
-  const staticMapRef = ref || useRef(null);
+  const staticMapRef = useRef(null);
 
@@ -329,2 +336,4 @@ // Event handlers are registered once but need access to the latest props
 
+  useImperativeHandle(ref, () => getRefHandles(staticMapRef), []);
+
   const context = useMemo(
@@ -360,12 +369,14 @@ () => ({
   const updateControllerOpts = () => {
-    const opts = Object.assign({}, thisRef.props, thisRef.props.viewState, {
-      isInteractive: Boolean(thisRef.props.onViewStateChange || thisRef.props.onViewportChange),
-      onViewportChange: handleViewportChange,
-      onStateChange: handleInteractionStateChange,
-      eventManager,
-      width: thisRef.width,
-      height: thisRef.height
-    });
-
-    controller.setOptions(opts);
+    if (thisRef.width && thisRef.height) {
+      controller.setOptions({
+        ...thisRef.props,
+        ...thisRef.props.viewState,
+        isInteractive: Boolean(thisRef.props.onViewStateChange || thisRef.props.onViewportChange),
+        onViewportChange: handleViewportChange,
+        onStateChange: handleInteractionStateChange,
+        eventManager,
+        width: thisRef.width,
+        height: thisRef.height
+      });
+    }
   };
@@ -372,0 +383,0 @@

src/components/marker.js

@@ -69,3 +69,3 @@ // Copyright (c) 2015 Uber Technologies, Inc.
 
-  const {draggable} = props;
+  const {children, className, draggable} = props;
   const {dragPos} = state;
@@ -77,2 +77,3 @@
 
+  // Perf: avoid rerendering if only the viewport changed
   const control = useMemo(() => {
@@ -89,3 +90,3 @@ const containerStyle = {
       <div
-        className={`mapboxgl-marker ${props.className}`}
+        className={`mapboxgl-marker ${className}`}
         ref={thisRef.containerRef}
@@ -95,6 +96,6 @@ // @ts-ignore
       >
-        {props.children}
+        {children}
       </div>
     );
-  }, [props.className]);
+  }, [children, className]);
 
@@ -101,0 +102,0 @@ const container = containerRef.current;

src/components/static-map.js

@@ -21,3 +21,3 @@ // Copyright (c) 2015 Uber Technologies, Inc.
 import * as React from 'react';
-import {useState, useRef, useContext, useMemo, useImperativeHandle, forwardRef} from 'react';
+import {useState, useRef, useContext, useImperativeHandle, forwardRef} from 'react';
 import * as PropTypes from 'prop-types';
@@ -105,3 +105,3 @@
 function getRefHandles(mapboxRef) {
-  return () => ({
+  return {
     getMap: () => mapboxRef.current && mapboxRef.current.getMap(),
@@ -112,3 +112,3 @@ queryRenderedFeatures: (geometry, options = {}) => {
     }
-  });
+  };
 }
@@ -188,6 +188,3 @@
   // Note: this is not a recommended pattern in React FC - Keeping for backward compatibility
-  useImperativeHandle(
-    ref,
-    useMemo(() => getRefHandles(mapboxRef), [])
-  );
+  useImperativeHandle(ref, () => getRefHandles(mapboxRef), []);
 
@@ -194,0 +191,0 @@ const overlays = map && (

src/utils/map-controller.js

@@ -21,3 +21,3 @@ // Copyright (c) 2015 Uber Technologies, Inc.
 
-/* eslint-disable complexity */
+/* eslint-disable complexity, max-statements */
 import MapState from './map-state';
@@ -146,3 +146,4 @@ import {LinearInterpolator} from './transition';
     // Always trigger callback on initial update (resize)
-    const oldViewport = this.mapState ? this.mapState.getViewportProps() : {};
+    const oldViewport =
+      this.mapState instanceof MapState ? this.mapState.getViewportProps() : this.mapState;
     const newViewport = {...newMapState.getViewportProps(), ...extraProps};
@@ -204,8 +205,11 @@
 
-    const dimensionChanged = !this.mapStateProps || this.mapStateProps.height !== options.height;
+    const prevOptions = this.mapStateProps || {};
+    const dimensionChanged =
+      prevOptions.height !== options.height || prevOptions.width !== options.width;
 
     this.mapStateProps = options;
 
-    if (dimensionChanged && options.height) {
-      // Dimensions changed, normalize the props
+    if (dimensionChanged) {
+      // Dimensions changed, normalize the props and fire change event
+      this.mapState = prevOptions;
       this.updateViewport(new MapState(options));
@@ -212,0 +216,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

1766741

increased by0.29%

Lines of code

19514

increased by0.25%

No dependency changes