react-map-gl - npm Package Compare versions

Comparing version 5.2.8 to 5.2.9

CHANGELOG.md

@@ -5,2 +5,10 @@ # CHANGELOG
 
+## 5.2.9 (Oct 7, 2020)
+
+- Fix for layout and paint diffing logic (#1194)
+- Add types for layer type and source-layer (#1192)
+- Support updating vector source (#1196)
+- Fix IE compatibility (#1195)
+- Add label prop to FullscreenControl (#1197)
+
 ## 5.2.8 (Sep 1, 2020)
@@ -7,0 +15,0 @@

dist/es5/components/fullscreen-control.js

@@ -42,7 +42,9 @@ "use strict";
   className: _propTypes["default"].string,
-  container: _propTypes["default"].object
+  container: _propTypes["default"].object,
+  label: _propTypes["default"].string
 });
 var defaultProps = Object.assign({}, _baseControl["default"].defaultProps, {
   className: '',
-  container: null
+  container: null,
+  label: 'Toggle fullscreen'
 });
@@ -123,3 +125,5 @@
 
-      var className = this.props.className;
+      var _this$props = this.props,
+          className = _this$props.className,
+          label = _this$props.label;
       var isFullscreen = this.state.isFullscreen;
@@ -130,3 +134,3 @@ var type = isFullscreen ? 'shrink' : 'fullscreen';
         ref: this._containerRef
-      }, this._renderButton(type, 'Toggle fullscreen', this._onClickFullscreen));
+      }, this._renderButton(type, label, this._onClickFullscreen));
     }
@@ -133,0 +137,0 @@ }]);

dist/es5/components/layer.js

@@ -42,4 +42,15 @@ "use strict";
 
+var LAYER_TYPES = {
+  fill: 'fill',
+  line: 'line',
+  symbol: 'symbol',
+  circle: 'circle',
+  fillExtrusion: 'fill-extrusion',
+  raster: 'raster',
+  background: 'background',
+  heatmap: 'heatmap',
+  hillshade: 'hillshade'
+};
 var propTypes = {
-  type: _propTypes["default"].string.isRequired,
+  type: _propTypes["default"].oneOf(Object.keys(LAYER_TYPES)).isRequired,
   id: _propTypes["default"].string,
@@ -71,10 +82,22 @@ source: _propTypes["default"].string,
     }
+
+    for (var _key in prevProps.layout) {
+      if (!layout.hasOwnProperty(_key)) {
+        map.setLayoutProperty(id, _key, undefined);
+      }
+    }
   }
 
   if (paint !== prevProps.paint) {
-    for (var _key in paint) {
-      if (!(0, _deepEqual["default"])(paint[_key], prevProps.paint[_key])) {
-        map.setPaintProperty(id, _key, paint[_key]);
+    for (var _key2 in paint) {
+      if (!(0, _deepEqual["default"])(paint[_key2], prevProps.paint[_key2])) {
+        map.setPaintProperty(id, _key2, paint[_key2]);
       }
     }
+
+    for (var _key3 in prevProps.paint) {
+      if (!paint.hasOwnProperty(_key3)) {
+        map.setPaintProperty(id, _key3, undefined);
+      }
+    }
   }
@@ -90,5 +113,5 @@
 
-  for (var _key2 in otherProps) {
-    if (!(0, _deepEqual["default"])(otherProps[_key2], prevProps[_key2])) {
-      map.setLayerProperty(id, _key2, otherProps[_key2]);
+  for (var _key4 in otherProps) {
+    if (!(0, _deepEqual["default"])(otherProps[_key4], prevProps[_key4])) {
+      map.setLayerProperty(id, _key4, otherProps[_key4]);
     }
@@ -95,0 +118,0 @@ }

dist/es5/components/source.js

@@ -107,2 +107,14 @@ "use strict";
         source.setCoordinates(sourceOptions.coordinates);
+      } else if (type === 'vector' && source.setUrl) {
+        switch (changedKey) {
+          case 'url':
+            source.setUrl(sourceOptions.url);
+            break;
+
+          case 'tiles':
+            source.setTiles(sourceOptions.tiles);
+            break;
+
+          default:
+        }
       } else {
@@ -109,0 +121,0 @@ console.warn("Unable to update <Source> prop: ".concat(changedKey));

dist/es5/mapbox/mapbox.js

@@ -402,3 +402,3 @@ "use strict";
 
-        _globals.document.body.append(testElement);
+        _globals.document.body.appendChild(testElement);
 
@@ -414,3 +414,3 @@ var isCssLoaded = window.getComputedStyle(testElement).position !== 'static';
 
-          _globals.document.head.append(link);
+          _globals.document.head.appendChild(link);
         }
@@ -417,0 +417,0 @@ } catch (error) {}

dist/es6/components/fullscreen-control.js

@@ -9,7 +9,9 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
   className: PropTypes.string,
-  container: PropTypes.object
+  container: PropTypes.object,
+  label: PropTypes.string
 });
 const defaultProps = Object.assign({}, BaseControl.defaultProps, {
   className: '',
-  container: null
+  container: null,
+  label: 'Toggle fullscreen'
 });
@@ -74,3 +76,4 @@ export default class FullscreenControl extends BaseControl {
     const {
-      className
+      className,
+      label
     } = this.props;
@@ -84,3 +87,3 @@ const {
       ref: this._containerRef
-    }, this._renderButton(type, 'Toggle fullscreen', this._onClickFullscreen));
+    }, this._renderButton(type, label, this._onClickFullscreen));
   }
@@ -87,0 +90,0 @@

dist/es6/components/layer.js

@@ -9,4 +9,15 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import deepEqual from '../utils/deep-equal';
+const LAYER_TYPES = {
+  fill: 'fill',
+  line: 'line',
+  symbol: 'symbol',
+  circle: 'circle',
+  fillExtrusion: 'fill-extrusion',
+  raster: 'raster',
+  background: 'background',
+  heatmap: 'heatmap',
+  hillshade: 'hillshade'
+};
 const propTypes = {
-  type: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(Object.keys(LAYER_TYPES)).isRequired,
   id: PropTypes.string,
@@ -38,2 +49,8 @@ source: PropTypes.string,
     }
+
+    for (const key in prevProps.layout) {
+      if (!layout.hasOwnProperty(key)) {
+        map.setLayoutProperty(id, key, undefined);
+      }
+    }
   }
@@ -47,2 +64,8 @@
     }
+
+    for (const key in prevProps.paint) {
+      if (!paint.hasOwnProperty(key)) {
+        map.setPaintProperty(id, key, undefined);
+      }
+    }
   }
@@ -49,0 +72,0 @@

dist/es6/components/source.js

@@ -73,2 +73,14 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
         source.setCoordinates(sourceOptions.coordinates);
+      } else if (type === 'vector' && source.setUrl) {
+        switch (changedKey) {
+          case 'url':
+            source.setUrl(sourceOptions.url);
+            break;
+
+          case 'tiles':
+            source.setTiles(sourceOptions.tiles);
+            break;
+
+          default:
+        }
       } else {
@@ -75,0 +87,0 @@ console.warn("Unable to update <Source> prop: ".concat(changedKey));

dist/es6/mapbox/mapbox.js

@@ -354,3 +354,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
       testElement.style.display = 'none';
-      document.body.append(testElement);
+      document.body.appendChild(testElement);
       const isCssLoaded = window.getComputedStyle(testElement).position !== 'static';
@@ -363,3 +363,3 @@
         link.setAttribute('href', "https://api.tiles.mapbox.com/mapbox-gl-js/v".concat(mapboxVersion, "/mapbox-gl.css"));
-        document.head.append(link);
+        document.head.appendChild(link);
       }
@@ -366,0 +366,0 @@ } catch (error) {}

dist/esm/components/fullscreen-control.js

@@ -20,7 +20,9 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
   className: PropTypes.string,
-  container: PropTypes.object
+  container: PropTypes.object,
+  label: PropTypes.string
 });
 var defaultProps = Object.assign({}, BaseControl.defaultProps, {
   className: '',
-  container: null
+  container: null,
+  label: 'Toggle fullscreen'
 });
@@ -105,3 +107,5 @@
 
-      var className = this.props.className;
+      var _this$props = this.props,
+          className = _this$props.className,
+          label = _this$props.label;
       var isFullscreen = this.state.isFullscreen;
@@ -112,3 +116,3 @@ var type = isFullscreen ? 'shrink' : 'fullscreen';
         ref: this._containerRef
-      }, this._renderButton(type, 'Toggle fullscreen', this._onClickFullscreen));
+      }, this._renderButton(type, label, this._onClickFullscreen));
     }
@@ -115,0 +119,0 @@ }]);

dist/esm/components/layer.js

@@ -20,4 +20,15 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import deepEqual from '../utils/deep-equal';
+var LAYER_TYPES = {
+  fill: 'fill',
+  line: 'line',
+  symbol: 'symbol',
+  circle: 'circle',
+  fillExtrusion: 'fill-extrusion',
+  raster: 'raster',
+  background: 'background',
+  heatmap: 'heatmap',
+  hillshade: 'hillshade'
+};
 var propTypes = {
-  type: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(Object.keys(LAYER_TYPES)).isRequired,
   id: PropTypes.string,
@@ -49,10 +60,22 @@ source: PropTypes.string,
     }
+
+    for (var _key in prevProps.layout) {
+      if (!layout.hasOwnProperty(_key)) {
+        map.setLayoutProperty(id, _key, undefined);
+      }
+    }
   }
 
   if (paint !== prevProps.paint) {
-    for (var _key in paint) {
-      if (!deepEqual(paint[_key], prevProps.paint[_key])) {
-        map.setPaintProperty(id, _key, paint[_key]);
+    for (var _key2 in paint) {
+      if (!deepEqual(paint[_key2], prevProps.paint[_key2])) {
+        map.setPaintProperty(id, _key2, paint[_key2]);
       }
     }
+
+    for (var _key3 in prevProps.paint) {
+      if (!paint.hasOwnProperty(_key3)) {
+        map.setPaintProperty(id, _key3, undefined);
+      }
+    }
   }
@@ -68,5 +91,5 @@
 
-  for (var _key2 in otherProps) {
-    if (!deepEqual(otherProps[_key2], prevProps[_key2])) {
-      map.setLayerProperty(id, _key2, otherProps[_key2]);
+  for (var _key4 in otherProps) {
+    if (!deepEqual(otherProps[_key4], prevProps[_key4])) {
+      map.setLayerProperty(id, _key4, otherProps[_key4]);
     }
@@ -73,0 +96,0 @@ }

dist/esm/components/source.js

@@ -92,2 +92,14 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
         source.setCoordinates(sourceOptions.coordinates);
+      } else if (type === 'vector' && source.setUrl) {
+        switch (changedKey) {
+          case 'url':
+            source.setUrl(sourceOptions.url);
+            break;
+
+          case 'tiles':
+            source.setTiles(sourceOptions.tiles);
+            break;
+
+          default:
+        }
       } else {
@@ -94,0 +106,0 @@ console.warn("Unable to update <Source> prop: ".concat(changedKey));

dist/esm/mapbox/mapbox.js

@@ -391,3 +391,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
         testElement.style.display = 'none';
-        document.body.append(testElement);
+        document.body.appendChild(testElement);
         var isCssLoaded = window.getComputedStyle(testElement).position !== 'static';
@@ -400,3 +400,3 @@
           link.setAttribute('href', "https://api.tiles.mapbox.com/mapbox-gl-js/v".concat(mapboxVersion, "/mapbox-gl.css"));
-          document.head.append(link);
+          document.head.appendChild(link);
         }
@@ -403,0 +403,0 @@ } catch (error) {}

package.json

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

src/components/fullscreen-control.js

@@ -38,3 +38,4 @@ // @flow
   /* eslint-enable max-len */
-  container: PropTypes.object
+  container: PropTypes.object,
+  label: PropTypes.string
 });
@@ -44,3 +45,4 @@
   className: '',
-  container: null
+  container: null,
+  label: 'Toggle fullscreen'
 });
@@ -50,3 +52,4 @@
   className: string,
-  container: ?HTMLElement
+  container: ?HTMLElement,
+  label: string
 };
@@ -130,3 +133,3 @@
 
-    const {className} = this.props;
+    const {className, label} = this.props;
     const {isFullscreen} = this.state;
@@ -138,3 +141,3 @@
       <div className={`mapboxgl-ctrl mapboxgl-ctrl-group ${className}`} ref={this._containerRef}>
-        {this._renderButton(type, 'Toggle fullscreen', this._onClickFullscreen)}
+        {this._renderButton(type, label, this._onClickFullscreen)}
       </div>
@@ -141,0 +144,0 @@ );

src/components/layer.js

@@ -30,4 +30,16 @@ // @flow
 
+const LAYER_TYPES = {
+  fill: 'fill',
+  line: 'line',
+  symbol: 'symbol',
+  circle: 'circle',
+  fillExtrusion: 'fill-extrusion',
+  raster: 'raster',
+  background: 'background',
+  heatmap: 'heatmap',
+  hillshade: 'hillshade'
+};
+
 const propTypes = {
-  type: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(Object.keys(LAYER_TYPES)).isRequired,
   id: PropTypes.string,
@@ -38,6 +50,9 @@ source: PropTypes.string,
 
+export type LayerTypes = $Keys<typeof LAYER_TYPES>;
+
 type LayerProps = {
   id?: string,
-  type: string,
+  type: LayerTypes,
   source?: string,
+  'source-layer'?: string,
   beforeId?: string,
@@ -64,2 +79,7 @@ layout: any,
     }
+    for (const key in prevProps.layout) {
+      if (!layout.hasOwnProperty(key)) {
+        map.setLayoutProperty(id, key, undefined);
+      }
+    }
   }
@@ -72,2 +92,7 @@ if (paint !== prevProps.paint) {
     }
+    for (const key in prevProps.paint) {
+      if (!paint.hasOwnProperty(key)) {
+        map.setPaintProperty(id, key, undefined);
+      }
+    }
   }
@@ -74,0 +99,0 @@ if (!deepEqual(filter, prevProps.filter)) {

src/components/source.js

@@ -126,2 +126,15 @@ // @flow
       source.setCoordinates(sourceOptions.coordinates);
+    } else if (type === 'vector' && source.setUrl) {
+      // Added in 1.12.0:
+      // vectorTileSource.setTiles
+      // vectorTileSource.setUrl
+      switch (changedKey) {
+        case 'url':
+          source.setUrl(sourceOptions.url);
+          break;
+        case 'tiles':
+          source.setTiles(sourceOptions.tiles);
+          break;
+        default:
+      }
     } else {
@@ -128,0 +141,0 @@ // eslint-disable-next-line

src/mapbox/mapbox.js

@@ -460,3 +460,3 @@ // @flow
       testElement.style.display = 'none';
-      document.body.append(testElement);
+      document.body.appendChild(testElement);
       const isCssLoaded = window.getComputedStyle(testElement).position !== 'static';
@@ -473,3 +473,3 @@
         );
-        document.head.append(link);
+        document.head.appendChild(link);
       }
@@ -476,0 +476,0 @@ } catch (error) {

No alert changes

Improved metrics

Total package byte prevSize

1564410

increased by0.72%

Lines of code

17229

increased by0.84%

No dependency changes