react-map-gl - npm Package Compare versions

Comparing version 5.1.4 to 5.1.5

CHANGELOG.md

@@ -5,2 +5,7 @@ # CHANGELOG
 
+## 5.1.5 (Dec 18, 2019)
+- marker component perf (#949)
+- Allow customizing labels in NavigationControl and GeolocateControl (#959)
+- Remove marker when GeolocateControl is disabled (#960)
+
 ## 5.1.4 (Dec 16, 2019)
@@ -7,0 +12,0 @@ - Fix TransitionManager when used with deck.gl's interpolators (#956)

dist/es5/components/geolocate-control.js

@@ -53,2 +53,3 @@ "use strict";
   style: _propTypes["default"].object,
+  label: _propTypes["default"].string,
   positionOptions: _propTypes["default"].object,
@@ -64,2 +65,3 @@ fitBoundsOptions: _propTypes["default"].object,
   style: {},
+  label: 'Geolocate',
   positionOptions: null,
@@ -118,2 +120,4 @@ fitBoundsOptions: null,
         _this._mapboxGeolocateControl.on('geolocate', _this._updateMarker);
+
+        _this._mapboxGeolocateControl.on('trackuserlocationend', _this._updateMarker);
       }
@@ -227,3 +231,4 @@
           className = _this$props.className,
-          style = _this$props.style;
+          style = _this$props.style,
+          label = _this$props.label;
       return _react["default"].createElement("div", null, this._renderMarker(), _react["default"].createElement("div", {
@@ -237,3 +242,3 @@ key: "geolocate-control",
         }
-      }, this._renderButton('geolocate', 'Geolocate', this._onClickGeolocate)));
+      }, this._renderButton('geolocate', label, this._onClickGeolocate)));
     }
@@ -240,0 +245,0 @@ }]);

dist/es5/components/marker.js

@@ -18,4 +18,8 @@ "use strict";
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
@@ -44,4 +48,15 @@
   function Marker() {
+    var _getPrototypeOf2;
+
+    var _this;
+
     (0, _classCallCheck2["default"])(this, Marker);
-    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Marker).apply(this, arguments));
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(Marker)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_control", null);
+    return _this;
   }
@@ -77,7 +92,2 @@
     value: function _render() {
-      var _this$props2 = this.props,
-          className = _this$props2.className,
-          draggable = _this$props2.draggable;
-      var dragPos = this.state.dragPos;
-
       var _this$_getPosition = this._getPosition(),
@@ -88,14 +98,34 @@ _this$_getPosition2 = (0, _slicedToArray2["default"])(_this$_getPosition, 2),
 
-      var containerStyle = {
-        position: 'absolute',
-        left: x,
-        top: y,
-        cursor: draggable ? dragPos ? 'grabbing' : 'grab' : 'auto'
-      };
-      return _react["default"].createElement("div", {
-        className: "mapboxgl-marker ".concat(className),
-        ref: this._containerRef,
-        style: containerStyle
-      }, this.props.children);
+      var transform = "translate(".concat(x, "px, ").concat(y, "px)");
+      var div = this._containerRef.current;
+
+      if (this._control && div) {
+        div.style.transform = transform;
+      } else {
+        var _this$props2 = this.props,
+            className = _this$props2.className,
+            draggable = _this$props2.draggable;
+        var dragPos = this.state.dragPos;
+        var containerStyle = {
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          transform: transform,
+          cursor: draggable ? dragPos ? 'grabbing' : 'grab' : 'auto'
+        };
+        this._control = _react["default"].createElement("div", {
+          className: "mapboxgl-marker ".concat(className),
+          ref: this._containerRef,
+          style: containerStyle
+        }, this.props.children);
+      }
+
+      return this._control;
     }
+  }, {
+    key: "render",
+    value: function render() {
+      this._control = null;
+      return (0, _get2["default"])((0, _getPrototypeOf3["default"])(Marker.prototype), "render", this).call(this);
+    }
   }]);
@@ -102,0 +132,0 @@ return Marker;

dist/es5/components/navigation-control.js

@@ -43,3 +43,6 @@ "use strict";
   showCompass: _propTypes["default"].bool,
-  showZoom: _propTypes["default"].bool
+  showZoom: _propTypes["default"].bool,
+  zoomInLabel: _propTypes["default"].string,
+  zoomOutLabel: _propTypes["default"].string,
+  compassLabel: _propTypes["default"].string
 });
@@ -49,3 +52,6 @@ var defaultProps = Object.assign({}, _baseControl["default"].defaultProps, {
   showCompass: true,
-  showZoom: true
+  showZoom: true,
+  zoomInLabel: 'Zoom In',
+  zoomOutLabel: 'Zoom Out',
+  compassLabel: 'Reset North'
 });
@@ -122,7 +128,10 @@
           showCompass = _this$props.showCompass,
-          showZoom = _this$props.showZoom;
+          showZoom = _this$props.showZoom,
+          zoomInLabel = _this$props.zoomInLabel,
+          zoomOutLabel = _this$props.zoomOutLabel,
+          compassLabel = _this$props.compassLabel;
       return _react["default"].createElement("div", {
         className: "mapboxgl-ctrl mapboxgl-ctrl-group ".concat(className),
         ref: this._containerRef
-      }, showZoom && this._renderButton('zoom-in', 'Zoom In', this._onZoomIn), showZoom && this._renderButton('zoom-out', 'Zoom Out', this._onZoomOut), showCompass && this._renderButton('compass', 'Reset North', this._onResetNorth, this._renderCompass()));
+      }, showZoom && this._renderButton('zoom-in', zoomInLabel, this._onZoomIn), showZoom && this._renderButton('zoom-out', zoomOutLabel, this._onZoomOut), showCompass && this._renderButton('compass', compassLabel, this._onResetNorth, this._renderCompass()));
     }
@@ -129,0 +138,0 @@ }]);

dist/es6/components/geolocate-control.js

@@ -20,2 +20,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
   style: PropTypes.object,
+  label: PropTypes.string,
   positionOptions: PropTypes.object,
@@ -31,2 +32,3 @@ fitBoundsOptions: PropTypes.object,
   style: {},
+  label: 'Geolocate',
   positionOptions: null,
@@ -77,2 +79,4 @@ fitBoundsOptions: null,
         this._mapboxGeolocateControl.on('geolocate', this._updateMarker);
+
+        this._mapboxGeolocateControl.on('trackuserlocationend', this._updateMarker);
       }
@@ -188,3 +192,4 @@
       className,
-      style
+      style,
+      label
     } = this.props;
@@ -197,3 +202,3 @@ return React.createElement("div", null, this._renderMarker(), React.createElement("div", {
       onContextMenu: e => e.preventDefault()
-    }, this._renderButton('geolocate', 'Geolocate', this._onClickGeolocate)));
+    }, this._renderButton('geolocate', label, this._onClickGeolocate)));
   }
@@ -200,0 +205,0 @@

dist/es6/components/marker.js

@@ -14,2 +14,8 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 export default class Marker extends DraggableControl {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "_control", null);
+  }
+
   _getPosition() {
@@ -39,25 +45,39 @@ const {
   _render() {
-    const {
-      className,
-      draggable
-    } = this.props;
-    const {
-      dragPos
-    } = this.state;
-
     const [x, y] = this._getPosition();
 
-    const containerStyle = {
-      position: 'absolute',
-      left: x,
-      top: y,
-      cursor: draggable ? dragPos ? 'grabbing' : 'grab' : 'auto'
-    };
-    return React.createElement("div", {
-      className: "mapboxgl-marker ".concat(className),
-      ref: this._containerRef,
-      style: containerStyle
-    }, this.props.children);
+    const transform = "translate(".concat(x, "px, ").concat(y, "px)");
+    const div = this._containerRef.current;
+
+    if (this._control && div) {
+      div.style.transform = transform;
+    } else {
+      const {
+        className,
+        draggable
+      } = this.props;
+      const {
+        dragPos
+      } = this.state;
+      const containerStyle = {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        transform,
+        cursor: draggable ? dragPos ? 'grabbing' : 'grab' : 'auto'
+      };
+      this._control = React.createElement("div", {
+        className: "mapboxgl-marker ".concat(className),
+        ref: this._containerRef,
+        style: containerStyle
+      }, this.props.children);
+    }
+
+    return this._control;
   }
 
+  render() {
+    this._control = null;
+    return super.render();
+  }
+
 }
@@ -64,0 +84,0 @@

dist/es6/components/navigation-control.js

@@ -16,3 +16,6 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
   showCompass: PropTypes.bool,
-  showZoom: PropTypes.bool
+  showZoom: PropTypes.bool,
+  zoomInLabel: PropTypes.string,
+  zoomOutLabel: PropTypes.string,
+  compassLabel: PropTypes.string
 });
@@ -22,3 +25,6 @@ const defaultProps = Object.assign({}, BaseControl.defaultProps, {
   showCompass: true,
-  showZoom: true
+  showZoom: true,
+  zoomInLabel: 'Zoom In',
+  zoomOutLabel: 'Zoom Out',
+  compassLabel: 'Reset North'
 });
@@ -91,3 +97,6 @@ export default class NavigationControl extends BaseControl {
       showCompass,
-      showZoom
+      showZoom,
+      zoomInLabel,
+      zoomOutLabel,
+      compassLabel
     } = this.props;
@@ -97,3 +106,3 @@ return React.createElement("div", {
       ref: this._containerRef
-    }, showZoom && this._renderButton('zoom-in', 'Zoom In', this._onZoomIn), showZoom && this._renderButton('zoom-out', 'Zoom Out', this._onZoomOut), showCompass && this._renderButton('compass', 'Reset North', this._onResetNorth, this._renderCompass()));
+    }, showZoom && this._renderButton('zoom-in', zoomInLabel, this._onZoomIn), showZoom && this._renderButton('zoom-out', zoomOutLabel, this._onZoomOut), showCompass && this._renderButton('compass', compassLabel, this._onResetNorth, this._renderCompass()));
   }
@@ -100,0 +109,0 @@

dist/esm/components/geolocate-control.js

@@ -26,2 +26,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
   style: PropTypes.object,
+  label: PropTypes.string,
   positionOptions: PropTypes.object,
@@ -37,2 +38,3 @@ fitBoundsOptions: PropTypes.object,
   style: {},
+  label: 'Geolocate',
   positionOptions: null,
@@ -96,2 +98,4 @@ fitBoundsOptions: null,
         _this._mapboxGeolocateControl.on('geolocate', _this._updateMarker);
+
+        _this._mapboxGeolocateControl.on('trackuserlocationend', _this._updateMarker);
       }
@@ -211,3 +215,4 @@
           className = _this$props.className,
-          style = _this$props.style;
+          style = _this$props.style,
+          label = _this$props.label;
       return React.createElement("div", null, this._renderMarker(), React.createElement("div", {
@@ -221,3 +226,3 @@ key: "geolocate-control",
         }
-      }, this._renderButton('geolocate', 'Geolocate', this._onClickGeolocate)));
+      }, this._renderButton('geolocate', label, this._onClickGeolocate)));
     }
@@ -224,0 +229,0 @@ }]);

dist/esm/components/marker.js

@@ -5,3 +5,5 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _get from "@babel/runtime/helpers/esm/get";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -25,5 +27,17 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
   function Marker() {
+    var _getPrototypeOf2;
+
+    var _this;
+
     _classCallCheck(this, Marker);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Marker).apply(this, arguments));
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Marker)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _defineProperty(_assertThisInitialized(_this), "_control", null);
+
+    return _this;
   }
@@ -59,7 +73,2 @@
     value: function _render() {
-      var _this$props2 = this.props,
-          className = _this$props2.className,
-          draggable = _this$props2.draggable;
-      var dragPos = this.state.dragPos;
-
       var _this$_getPosition = this._getPosition(),
@@ -70,14 +79,34 @@ _this$_getPosition2 = _slicedToArray(_this$_getPosition, 2),
 
-      var containerStyle = {
-        position: 'absolute',
-        left: x,
-        top: y,
-        cursor: draggable ? dragPos ? 'grabbing' : 'grab' : 'auto'
-      };
-      return React.createElement("div", {
-        className: "mapboxgl-marker ".concat(className),
-        ref: this._containerRef,
-        style: containerStyle
-      }, this.props.children);
+      var transform = "translate(".concat(x, "px, ").concat(y, "px)");
+      var div = this._containerRef.current;
+
+      if (this._control && div) {
+        div.style.transform = transform;
+      } else {
+        var _this$props2 = this.props,
+            className = _this$props2.className,
+            draggable = _this$props2.draggable;
+        var dragPos = this.state.dragPos;
+        var containerStyle = {
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          transform: transform,
+          cursor: draggable ? dragPos ? 'grabbing' : 'grab' : 'auto'
+        };
+        this._control = React.createElement("div", {
+          className: "mapboxgl-marker ".concat(className),
+          ref: this._containerRef,
+          style: containerStyle
+        }, this.props.children);
+      }
+
+      return this._control;
     }
+  }, {
+    key: "render",
+    value: function render() {
+      this._control = null;
+      return _get(_getPrototypeOf(Marker.prototype), "render", this).call(this);
+    }
   }]);
@@ -84,0 +113,0 @@

dist/esm/components/navigation-control.js

@@ -22,3 +22,6 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
   showCompass: PropTypes.bool,
-  showZoom: PropTypes.bool
+  showZoom: PropTypes.bool,
+  zoomInLabel: PropTypes.string,
+  zoomOutLabel: PropTypes.string,
+  compassLabel: PropTypes.string
 });
@@ -28,3 +31,6 @@ var defaultProps = Object.assign({}, BaseControl.defaultProps, {
   showCompass: true,
-  showZoom: true
+  showZoom: true,
+  zoomInLabel: 'Zoom In',
+  zoomOutLabel: 'Zoom Out',
+  compassLabel: 'Reset North'
 });
@@ -106,7 +112,10 @@
           showCompass = _this$props.showCompass,
-          showZoom = _this$props.showZoom;
+          showZoom = _this$props.showZoom,
+          zoomInLabel = _this$props.zoomInLabel,
+          zoomOutLabel = _this$props.zoomOutLabel,
+          compassLabel = _this$props.compassLabel;
       return React.createElement("div", {
         className: "mapboxgl-ctrl mapboxgl-ctrl-group ".concat(className),
         ref: this._containerRef
-      }, showZoom && this._renderButton('zoom-in', 'Zoom In', this._onZoomIn), showZoom && this._renderButton('zoom-out', 'Zoom Out', this._onZoomOut), showCompass && this._renderButton('compass', 'Reset North', this._onResetNorth, this._renderCompass()));
+      }, showZoom && this._renderButton('zoom-in', zoomInLabel, this._onZoomIn), showZoom && this._renderButton('zoom-out', zoomOutLabel, this._onZoomOut), showCompass && this._renderButton('compass', compassLabel, this._onResetNorth, this._renderCompass()));
     }
@@ -113,0 +122,0 @@ }]);

package.json

 {
   "name": "react-map-gl",
   "description": "A React wrapper for MapboxGL-js and overlay API.",
-  "version": "5.1.4",
+  "version": "5.1.5",
   "keywords": [
@@ -6,0 +6,0 @@ "mapbox",

src/components/geolocate-control.js

@@ -28,2 +28,4 @@ // @flow
   style: PropTypes.object,
+  // Custom label assigned to the control
+  label: PropTypes.string,
 
@@ -46,2 +48,3 @@ // mapbox geolocate options
   style: {},
+  label: 'Geolocate',
 
@@ -58,2 +61,3 @@ // mapbox geolocate options
   style: Object,
+  label: string,
   positionOptions: any,
@@ -164,2 +168,3 @@ fitBoundsOptions: any,
       this._mapboxGeolocateControl.on('geolocate', this._updateMarker);
+      this._mapboxGeolocateControl.on('trackuserlocationend', this._updateMarker);
     }
@@ -248,3 +253,3 @@
 
-    const {className, style} = this.props;
+    const {className, style, label} = this.props;
     return (
@@ -260,3 +265,3 @@ <div>
         >
-          {this._renderButton('geolocate', 'Geolocate', this._onClickGeolocate)}
+          {this._renderButton('geolocate', label, this._onClickGeolocate)}
         </div>
@@ -263,0 +268,0 @@ </div>

src/components/marker.js

@@ -57,2 +57,4 @@ // @flow
 
+  _control: any = null;
+
   _getPosition(): [number, number] {
@@ -75,24 +77,39 @@ const {longitude, latitude, offsetLeft, offsetTop} = this.props;
   _render() {
-    const {className, draggable} = this.props;
-    const {dragPos} = this.state;
-
     const [x, y] = this._getPosition();
+    const transform = `translate(${x}px, ${y}px)`;
+    const div = this._containerRef.current;
 
-    const containerStyle = {
-      position: 'absolute',
-      left: x,
-      top: y,
-      cursor: draggable ? (dragPos ? 'grabbing' : 'grab') : 'auto'
-    };
+    if (this._control && div) {
+      // Perf: avoid rerendering if only the viewport changed
+      div.style.transform = transform;
+    } else {
+      const {className, draggable} = this.props;
+      const {dragPos} = this.state;
 
-    return (
-      <div
-        className={`mapboxgl-marker ${className}`}
-        ref={this._containerRef}
-        style={containerStyle}
-      >
-        {this.props.children}
-      </div>
-    );
+      const containerStyle = {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        transform,
+        cursor: draggable ? (dragPos ? 'grabbing' : 'grab') : 'auto'
+      };
+
+      this._control = (
+        <div
+          className={`mapboxgl-marker ${className}`}
+          ref={this._containerRef}
+          style={containerStyle}
+        >
+          {this.props.children}
+        </div>
+      );
+    }
+    return this._control;
   }
+
+  render() {
+    // invalidate cached element
+    this._control = null;
+    return super.render();
+  }
 }

src/components/navigation-control.js

@@ -25,3 +25,7 @@ // @flow
   // Show/hide zoom buttons
-  showZoom: PropTypes.bool
+  showZoom: PropTypes.bool,
+  // Custom labels assigned to the controls
+  zoomInLabel: PropTypes.string,
+  zoomOutLabel: PropTypes.string,
+  compassLabel: PropTypes.string
 });
@@ -32,3 +36,6 @@
   showCompass: true,
-  showZoom: true
+  showZoom: true,
+  zoomInLabel: 'Zoom In',
+  zoomOutLabel: 'Zoom Out',
+  compassLabel: 'Reset North'
 });
@@ -41,3 +48,6 @@
   showCompass: boolean,
-  showZoom: boolean
+  showZoom: boolean,
+  zoomInLabel: string,
+  zoomOutLabel: string,
+  compassLabel: string
 };
@@ -121,10 +131,10 @@
   _render() {
-    const {className, showCompass, showZoom} = this.props;
+    const {className, showCompass, showZoom, zoomInLabel, zoomOutLabel, compassLabel} = this.props;
 
     return (
       <div className={`mapboxgl-ctrl mapboxgl-ctrl-group ${className}`} ref={this._containerRef}>
-        {showZoom && this._renderButton('zoom-in', 'Zoom In', this._onZoomIn)}
-        {showZoom && this._renderButton('zoom-out', 'Zoom Out', this._onZoomOut)}
+        {showZoom && this._renderButton('zoom-in', zoomInLabel, this._onZoomIn)}
+        {showZoom && this._renderButton('zoom-out', zoomOutLabel, this._onZoomOut)}
         {showCompass &&
-          this._renderButton('compass', 'Reset North', this._onResetNorth, this._renderCompass())}
+          this._renderButton('compass', compassLabel, this._onResetNorth, this._renderCompass())}
       </div>
@@ -131,0 +141,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

1466697

increased by0.75%

Lines of code

16354

increased by0.81%

No dependency changes