@planet/layers - npm Package Compare versions

Comparing version 3.0.0-beta.4 to 3.0.0-beta.5

lib/createLayer.js

@@ -41,5 +41,5 @@ "use strict";
     },
-    componentWillMount: function componentWillMount() {
-      if (config.componentWillMount) {
-        config.componentWillMount.apply(this, arguments);
+    componentDidMount: function componentDidMount() {
+      if (config.componentDidMount) {
+        config.componentDidMount.apply(this, arguments);
       }
@@ -52,7 +52,7 @@
       if (this.props.onPreRender) {
-        this.layer.on('prerender', this.props.onPreRender, this);
+        this.layer.on('prerender', this.props.onPreRender);
       }
 
       if (this.props.onPostRender) {
-        this.layer.on('postrender', this.props.onPostRender, this);
+        this.layer.on('postrender', this.props.onPostRender);
       }
@@ -69,7 +69,2 @@
       this.context.map.addLayer(this.layer);
-    },
-    componentDidMount: function componentDidMount() {
-      if (config.componentDidMount) {
-        config.componentDidMount.apply(this, arguments);
-      }
 
@@ -80,8 +75,8 @@ if (this.props.innerRef) {
     },
-    componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-      if (config.componentWillReceiveProps) {
-        config.componentWillReceiveProps.apply(this, arguments);
+    componentDidUpdate: function componentDidUpdate(prevProps) {
+      if (config.componentDidUpdate) {
+        config.componentDidUpdate.apply(this, arguments);
       }
 
-      if (nextProps.version !== this.props.version) {
+      if (this.props.version !== prevProps.version) {
         var source = this.layer.getSource();
@@ -94,46 +89,41 @@
 
-      if (nextProps.opacity !== this.props.opacity) {
-        this.layer.setOpacity(nextProps.opacity);
+      if (this.props.opacity !== prevProps.opacity) {
+        this.layer.setOpacity(this.props.opacity);
       }
 
-      if (nextProps.visible !== this.props.visible) {
-        this.layer.setVisible(nextProps.visible);
+      if (this.props.visible !== prevProps.visible) {
+        this.layer.setVisible(this.props.visible);
       }
 
-      if (nextProps.zIndex !== this.props.zIndex) {
-        this.layer.setZIndex(nextProps.zIndex);
+      if (this.props.zIndex !== prevProps.zIndex) {
+        this.layer.setZIndex(this.props.zIndex);
       }
 
-      if (nextProps.minZoom !== this.props.minZoom) {
-        this.layer.setMinZoom(nextProps.minZoom);
+      if (this.props.minZoom !== prevProps.minZoom) {
+        this.layer.setMinZoom(this.props.minZoom);
       }
 
-      if (nextProps.maxZoom !== this.props.maxZoom) {
-        this.layer.setMaxZoom(nextProps.maxZoom);
+      if (this.props.maxZoom !== prevProps.maxZoom) {
+        this.layer.setMaxZoom(this.props.maxZoom);
       }
 
-      if (nextProps.onPreRender !== this.props.onPreRender) {
-        if (this.props.onPreRender) {
-          this.layer.un('prerender', this.props.onPreRender, this);
+      if (this.props.onPreRender !== prevProps.onPreRender) {
+        if (prevProps.onPreRender) {
+          this.layer.un('prerender', prevProps.onPreRender);
         }
 
-        if (nextProps.onPreRender) {
-          this.layer.on('prerender', this.props.onPreRender, this);
+        if (this.props.onPreRender) {
+          this.layer.on('prerender', prevProps.onPreRender);
         }
       }
 
-      if (nextProps.onPostRender !== this.props.onPostRender) {
-        if (this.props.onPostRender) {
-          this.layer.un('postrender', this.props.onPostRender, this);
+      if (this.props.onPostRender !== prevProps.onPostRender) {
+        if (prevProps.onPostRender) {
+          this.layer.un('postrender', prevProps.onPostRender);
         }
 
-        if (nextProps.onPostRender) {
-          this.layer.on('postrender', this.props.onPostRender, this);
+        if (this.props.onPostRender) {
+          this.layer.on('postrender', prevProps.onPostRender);
         }
       }
-    },
-    componentDidUpdate: function componentDidUpdate() {
-      if (config.componentDidUpdate) {
-        config.componentDidUpdate.apply(this, arguments);
-      }
 
@@ -140,0 +130,0 @@ if (this.props.innerRef) {

lib/ImageLayer.js

@@ -58,3 +58,3 @@ "use strict";
   },
-  componentWillMount: function componentWillMount() {
+  componentDidMount: function componentDidMount() {
     // Create the image source
@@ -75,15 +75,15 @@ var source = new _ImageStatic["default"]({
   },
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (nextProps.url !== this.props.url) {
+  componentDidUpdate: function componentDidUpdate(prevProps) {
+    if (this.props.url !== prevProps.url) {
       var source = this.layer.getSource();
       source.clear();
 
-      if (nextProps.url) {
+      if (this.props.url) {
         var newSource = new _ImageStatic["default"]({
-          url: nextProps.url,
-          imageExtent: this.getExtentFromBounds(nextProps.bounds, nextProps.projection),
-          imageSize: nextProps.size,
-          projection: nextProps.projection || _constants.WEB_PROJECTION,
-          imageLoadFunction: nextProps.loadFunction,
-          crossOrigin: nextProps.crossOrigin
+          url: this.props.url,
+          imageExtent: this.getExtentFromBounds(this.props.bounds, this.props.projection),
+          imageSize: this.props.size,
+          projection: this.props.projection || _constants.WEB_PROJECTION,
+          imageLoadFunction: this.props.loadFunction,
+          crossOrigin: this.props.crossOrigin
         });
@@ -90,0 +90,0 @@ this.layer.setSource = newSource;

lib/JSONLayer.js

@@ -37,3 +37,3 @@ "use strict";
   },
-  componentWillMount: function componentWillMount() {
+  componentDidMount: function componentDidMount() {
     var renderTile = this.props.renderTile;
@@ -110,5 +110,5 @@ var loadFunc = this.props.getTileData;
   },
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (nextProps.url !== this.props.url) {
-      this.layer.getSource().setUrl(nextProps.url);
+  componentDidUpdate: function componentDidUpdate(prevProps) {
+    if (this.props.url !== prevProps.url) {
+      this.layer.getSource().setUrl(this.props.url);
     }
@@ -115,0 +115,0 @@ }

lib/Map.js

@@ -12,2 +12,12 @@ "use strict";
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _GeoJSON = _interopRequireDefault(require("ol/format/GeoJSON"));
@@ -23,4 +33,2 @@
 
-var _createReactClass = _interopRequireDefault(require("create-react-class"));
-
 var _lodash = _interopRequireDefault(require("lodash.isequal"));
@@ -46,32 +54,13 @@
 var format = new _GeoJSON["default"]();
-var Map = (0, _createReactClass["default"])({
-  displayName: 'Map',
-  propTypes: {
-    animation: _propTypes.object,
-    children: _propTypes.any,
-    constructorOptions: _propTypes.object,
-    innerRef: _propTypes.func,
-    multiWorld: _propTypes.bool,
-    onClick: _propTypes.func,
-    onViewChange: _propTypes.func,
-    view: (0, _propTypes.shape)({
-      center: (0, _propTypes.arrayOf)(_propTypes.number),
-      zoom: _propTypes.number,
-      extent: (0, _propTypes.arrayOf)(_propTypes.number),
-      projection: (0, _propTypes.oneOfType)([_propTypes.string, (0, _propTypes.instanceOf)(_Projection["default"])])
-    })
-  },
-  childContextTypes: {
-    map: _propTypes.object.isRequired
-  },
-  getDefaultProps: function getDefaultProps() {
-    return {
-      animation: {
-        duration: 1500
-      },
-      constructorOptions: {},
-      multiWorld: false
-    };
-  },
-  componentWillMount: function componentWillMount() {
+
+var Map =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Map, _Component);
+
+  function Map(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Map);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Map).call(this, props));
     var options = Object.assign({
@@ -81,209 +70,267 @@ logo: false,
       view: new _View["default"]({
-        multiWorld: this.props.multiWorld,
-        projection: this.props.view && this.props.view.projection || _constants.WEB_PROJECTION
+        multiWorld: _this.props.multiWorld,
+        projection: _this.props.view && _this.props.view.projection || _constants.WEB_PROJECTION
       })
-    }, this.props.constructorOptions);
-    this.map = new _Map["default"](options);
-    this.map.on('click', this.onMapClick);
-    this.map.on('moveend', this.onMapMoveEnd);
-    this.map.getInteractions().forEach(function (interaction) {
-      interaction.set(ID, true);
-    });
-    this.updateInteractions();
-  },
-  getChildContext: function getChildContext() {
-    return {
-      map: this.map
-    };
-  },
-  componentDidMount: function componentDidMount() {
-    this.map.setTarget(this.viewport);
-    window.addEventListener('resize', this.onWindowResize);
-    this.updateView(this.props);
+    }, _this.props.constructorOptions);
+    _this.map = new _Map["default"](options);
+    return _this;
+  }
 
-    if (this.props.innerRef) {
-      this.props.innerRef(this.map);
+  (0, _createClass2["default"])(Map, [{
+    key: "getChildContext",
+    value: function getChildContext() {
+      return {
+        map: this.map
+      };
     }
-  },
-  componentDidUpdate: function componentDidUpdate() {
-    if (this.props.innerRef) {
-      this.props.innerRef(this.map);
-    }
-  },
-  componentWillUnmount: function componentWillUnmount() {
-    this.map.setTarget(null);
-    window.removeEventListener('resize', this.onWindowResize);
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.map.setTarget(this.viewport);
+      this.map.on('click', this.onMapClick.bind(this));
+      this.map.on('moveend', this.onMapMoveEnd.bind(this));
+      this.map.on('pointermove', this.onMapPointerMove.bind(this));
+      this.map.getInteractions().forEach(function (interaction) {
+        interaction.set(ID, true);
+      });
+      this.updateInteractions();
+      this.updateView(this.props);
 
-    if (this.props.innerRef) {
-      this.props.innerRef(null);
+      if (this.props.innerRef) {
+        this.props.innerRef(this.map);
+      }
     }
-  },
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (!isSame(nextProps.animation, this.props.animation) || !isSame(nextProps.view, this.props.view)) {
-      // Create a new view if the projection has changed
-      if (nextProps.view && nextProps.view.projection && !isSame(nextProps.view.projection, this.props.view.projection)) {
-        var newView = new _View["default"]({
-          multiWorld: nextProps.multiWorld,
-          projection: nextProps.view.projection || this.props.view.projection.getCode()
-        });
-        this.map.setView(newView);
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.innerRef) {
+        this.props.innerRef(this.map);
       }
 
-      this.updateView(nextProps);
+      if (!isSame(this.props.animation, prevProps.animation) || !isSame(this.props.view, prevProps.view)) {
+        // Create a new view if the projection has changed
+        if (this.props.view && this.props.view.projection && !isSame(this.props.view.projection, prevProps.view.projection)) {
+          var newView = new _View["default"]({
+            multiWorld: this.props.multiWorld,
+            projection: this.props.view.projection || prevProps.view.projection.getCode()
+          });
+          this.map.setView(newView);
+        }
+
+        this.updateView(this.props);
+      }
+
+      if (!!this.props.onViewChange !== !!prevProps.onViewChange) {
+        this.updateInteractions();
+      }
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.map.setTarget(null);
 
-    if (!!nextProps.onViewChange !== !!this.props.onViewChange) {
-      this.updateInteractions();
+      if (this.props.innerRef) {
+        this.props.innerRef(null);
+      }
     }
-  },
-  onMapClick: function onMapClick(event) {
-    var _this = this;
+  }, {
+    key: "onMapPointerMove",
+    value: function onMapPointerMove(event) {
+      if (this.props.onMapPointerMove) {
+        this.props.onMapPointerMove(event);
+      }
+    }
+  }, {
+    key: "onMapClick",
+    value: function onMapClick(event) {
+      var _this2 = this;
 
-    if (this.props.onClick) {
-      var view = this.map.getView();
-      var projection = view.getProjection();
-      this.props.onClick({
-        coordinate: (0, _proj.toLonLat)(event.coordinate, projection),
-        pixel: event.pixel,
-        getFeatures: function getFeatures() {
-          var features = _this.map.getFeaturesAtPixel(event.pixel);
+      if (this.props.onMapClick) {
+        var view = this.map.getView();
+        var projection = view.getProjection();
+        this.props.onMapClick({
+          coordinate: (0, _proj.toLonLat)(event.coordinate, projection),
+          pixel: event.pixel,
+          getFeatures: function getFeatures() {
+            var features = _this2.map.getFeaturesAtPixel(event.pixel);
 
-          if (!features) {
-            return [];
+            if (!features) {
+              return [];
+            }
+
+            var featureCollection = format.writeFeaturesObject(features, {
+              featureProjection: projection
+            });
+            return featureCollection.features;
           }
+        });
+      }
+    }
+  }, {
+    key: "onMapMoveEnd",
+    value: function onMapMoveEnd() {
+      if (this.props.onViewChange) {
+        var view = this.map.getView();
+        var projection = view.getProjection();
+        var extent = view.calculateExtent(this.map.getSize());
+        var viewProps = {
+          center: (0, _proj.toLonLat)(view.getCenter(), projection),
+          zoom: view.getZoom(),
+          extent: (0, _proj.transformExtent)(extent, projection, _constants.GEO_PROJECTION),
+          projection: projection
+        };
 
-          var featureCollection = format.writeFeaturesObject(features, {
-            featureProjection: projection
-          });
-          return featureCollection.features;
+        if (!isSame(this.props.view, viewProps)) {
+          this.props.onViewChange(viewProps);
         }
-      });
+      }
     }
-  },
-  onMapMoveEnd: function onMapMoveEnd() {
-    if (this.props.onViewChange) {
-      var view = this.map.getView();
-      var projection = view.getProjection();
-      var extent = view.calculateExtent(this.map.getSize());
-      var viewProps = {
-        center: (0, _proj.toLonLat)(view.getCenter(), projection),
-        zoom: view.getZoom(),
-        extent: (0, _proj.transformExtent)(extent, projection, _constants.GEO_PROJECTION),
-        projection: projection
-      };
+  }, {
+    key: "updateMinZoom",
+    value: function updateMinZoom(props) {
+      var view = props.view;
+      var currentView = this.map.getView();
+      var minZoom = view && 'minZoom' in view ? view.minZoom : 0;
 
-      if (!isSame(this.props.view, viewProps)) {
-        this.props.onViewChange(viewProps);
+      if (currentView.getMinZoom() !== minZoom) {
+        currentView.setMinZoom(minZoom);
       }
     }
-  },
-  updateMinZoom: function updateMinZoom(props) {
-    var view = props.view;
-    var currentView = this.map.getView();
-    var minZoom = view && 'minZoom' in view ? view.minZoom : 0;
+  }, {
+    key: "updateMaxZoom",
+    value: function updateMaxZoom(props) {
+      var _ref = props || this.props,
+          view = _ref.view;
 
-    if (currentView.getMinZoom() !== minZoom) {
-      currentView.setMinZoom(minZoom);
-    }
-  },
-  updateMaxZoom: function updateMaxZoom(props) {
-    var _ref = props || this.props,
-        view = _ref.view;
+      var currentView = this.map.getView();
 
-    var currentView = this.map.getView();
+      if (view && 'maxZoom' in view) {
+        var maxZoom = view.maxZoom;
 
-    if (view && 'maxZoom' in view) {
-      var maxZoom = view.maxZoom;
-
-      if (currentView.getMaxZoom() !== maxZoom) {
-        currentView.setMaxZoom(maxZoom);
+        if (currentView.getMaxZoom() !== maxZoom) {
+          currentView.setMaxZoom(maxZoom);
+        }
       }
     }
-  },
-  updateView: function updateView(props) {
-    var view = this.map.getView();
-    var projection = props.view && props.view.projection || view.getProjection();
-    this.updateMinZoom(props);
-    this.updateMaxZoom(props);
+  }, {
+    key: "updateView",
+    value: function updateView(props) {
+      var view = this.map.getView();
+      var projection = props.view && props.view.projection || view.getProjection();
+      this.updateMinZoom(props);
+      this.updateMaxZoom(props);
 
-    if (!props.view || props.view.center || props.view.zoom) {
-      var center, zoom;
+      if (!props.view || props.view.center || props.view.zoom) {
+        var center, zoom;
 
-      if (props.view && props.view.center) {
-        center = (0, _proj.fromLonLat)(props.view.center, projection);
-      } else {
-        center = [0, 0];
-      }
+        if (props.view && props.view.center) {
+          center = (0, _proj.fromLonLat)(props.view.center, projection);
+        } else {
+          center = [0, 0];
+        }
 
-      if (props.view && 'zoom' in props.view) {
-        zoom = props.view.zoom;
-      } else {
-        zoom = 0;
-      }
+        if (props.view && 'zoom' in props.view) {
+          zoom = props.view.zoom;
+        } else {
+          zoom = 0;
+        }
 
-      if (props.animation && view.isDef()) {
-        view.animate(Object.assign({
-          center: center,
-          zoom: zoom
-        }, props.animation));
-      } else {
-        view.setCenter(center);
-        view.setZoom(zoom);
+        if (props.animation && view.isDef()) {
+          view.animate(Object.assign({
+            center: center,
+            zoom: zoom
+          }, props.animation));
+        } else {
+          view.setCenter(center);
+          view.setZoom(zoom);
+        }
+      } else if (props.view.extent) {
+        var extent = (0, _proj.transformExtent)(props.view.extent, _constants.GEO_PROJECTION, projection);
+        view.fit(extent, view.isDef() ? props.animation : null);
       }
-    } else if (props.view.extent) {
-      var extent = (0, _proj.transformExtent)(props.view.extent, _constants.GEO_PROJECTION, projection);
-      view.fit(extent, view.isDef() ? props.animation : null);
     }
-  },
-  updateInteractions: function updateInteractions() {
-    var interactive = !this.props.view || this.props.onViewChange;
-    this.map.getInteractions().forEach(function (interaction) {
-      if (interaction.get(ID)) {
-        interaction.setActive(interactive);
+  }, {
+    key: "updateInteractions",
+    value: function updateInteractions() {
+      var interactive = !this.props.view || this.props.onViewChange;
+      this.map.getInteractions().forEach(function (interaction) {
+        if (interaction.get(ID)) {
+          interaction.setActive(interactive);
+        }
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      var rest = Object.assign({}, this.props);
+
+      for (var known in Map.propTypes) {
+        delete rest[known];
       }
-    });
-  },
-  render: function render() {
-    var _this2 = this;
 
-    var rest = Object.assign({}, this.props);
+      return _react["default"].createElement("div", rest, _react["default"].createElement("div", {
+        style: {
+          position: 'relative',
+          height: '100%'
+        }
+      }, _react["default"].createElement("div", {
+        ref: function ref(element) {
+          return _this3.viewport = element;
+        },
+        style: {
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          top: 0,
+          left: 0
+        }
+      }), _react.Children.map(this.props.children, function (child, index) {
+        if (!child) {
+          return child;
+        }
 
-    for (var known in Map.propTypes) {
-      delete rest[known];
-    }
+        var props;
 
-    return _react["default"].createElement("div", rest, _react["default"].createElement("div", {
-      style: {
-        position: 'relative',
-        height: '100%'
-      }
-    }, _react["default"].createElement("div", {
-      ref: function ref(element) {
-        return _this2.viewport = element;
-      },
-      style: {
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        top: 0,
-        left: 0
-      }
-    }), _react.Children.map(this.props.children, function (child, index) {
-      if (!child) {
-        return child;
-      }
+        if (!('zIndex' in child.props)) {
+          props = {
+            zIndex: index
+          };
+        }
 
-      var props;
+        return _react["default"].cloneElement(child, props);
+      })));
+    }
+  }]);
+  return Map;
+}(_react.Component);
 
-      if (!('zIndex' in child.props)) {
-        props = {
-          zIndex: index
-        };
-      }
-
-      return _react["default"].cloneElement(child, props);
-    })));
-  }
-});
+Map.defaultProps = {
+  animation: {
+    duration: 250
+  },
+  constructorOptions: {},
+  multiWorld: false
+};
+Map.propTypes = {
+  animation: _propTypes.object,
+  children: _propTypes.any,
+  constructorOptions: _propTypes.object,
+  innerRef: _propTypes.func,
+  multiWorld: _propTypes.bool,
+  onMapClick: _propTypes.func,
+  onViewChange: _propTypes.func,
+  onMapPointerMove: _propTypes.func,
+  view: (0, _propTypes.shape)({
+    center: (0, _propTypes.arrayOf)(_propTypes.number),
+    zoom: _propTypes.number,
+    extent: (0, _propTypes.arrayOf)(_propTypes.number),
+    projection: (0, _propTypes.oneOfType)([_propTypes.string, (0, _propTypes.instanceOf)(_Projection["default"])])
+  })
+};
+Map.childContextTypes = {
+  map: _propTypes.object.isRequired
+};
 var _default = Map;
 exports["default"] = _default;

lib/RasterLayer.js

@@ -30,3 +30,3 @@ "use strict";
   },
-  componentWillMount: function componentWillMount() {
+  componentDidMount: function componentDidMount() {
     this.layer = new _Image["default"]({
@@ -36,5 +36,5 @@ source: this.createRasterSource(this.props)
   },
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (nextProps.operation !== this.props.operation) {
-      this.layer.getSource().setOperation(nextProps.operation);
+  componentDidUpdate: function componentDidUpdate(prevProps) {
+    if (this.props.operation !== prevProps.operation) {
+      this.layer.getSource().setOperation(this.props.operation);
     }
@@ -41,0 +41,0 @@ },

lib/TileLayer.js

@@ -33,3 +33,3 @@ "use strict";
   },
-  componentWillMount: function componentWillMount() {
+  componentDidMount: function componentDidMount() {
     var source = this.props.source instanceof _Source["default"] ? this.props.source : new _XYZ["default"](this.props.source);
@@ -46,13 +46,13 @@
   },
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (!(0, _lodash["default"])(nextProps.source, this.props.source)) {
-      this.layer.setSource(nextProps.source instanceof _Source["default"] ? nextProps.source : new _XYZ["default"](nextProps.source));
+  componentDidUpdate: function componentDidUpdate(prevProps) {
+    if (!(0, _lodash["default"])(this.props.source, prevProps.source)) {
+      this.layer.setSource(this.props.source instanceof _Source["default"] ? this.props.source : new _XYZ["default"](this.props.source));
     }
 
-    if (nextProps.url !== this.props.url) {
-      this.layer.getSource().setUrl(nextProps.url);
+    if (this.props.url !== prevProps.url) {
+      this.layer.getSource().setUrl(this.props.url);
     }
 
-    if (nextProps.extent !== this.props.extent) {
-      this.layer.setExtent(this.getTransformedExtent(nextProps.extent));
+    if (this.props.extent !== prevProps.extent) {
+      this.layer.setExtent(this.getTransformedExtent(this.props.extent));
     }
@@ -59,0 +59,0 @@ },

lib/VectorLayer.js

@@ -27,3 +27,3 @@ "use strict";
   },
-  componentWillMount: function componentWillMount() {
+  componentDidMount: function componentDidMount() {
     this.createFormat();
@@ -50,3 +50,3 @@ var source = new _Vector2["default"]();
   },
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+  componentDidUpdate: function componentDidUpdate(prevProps) {
     // Check the projection
@@ -60,8 +60,8 @@ var projChanged = this.checkProjections(); // Create a new format if projection changed
 
-    if (nextProps.data !== this.props.data || nextProps.data && projChanged) {
+    if (this.props.data !== prevProps.data || this.props.data && projChanged) {
       var source = this.layer.getSource();
       source.clear();
 
-      if (nextProps.data) {
-        source.addFeatures(this.format.readFeatures(nextProps.data));
+      if (this.props.data) {
+        source.addFeatures(this.format.readFeatures(this.props.data));
       }
@@ -71,6 +71,6 @@ } // If url or projection changed
 
-    if (nextProps.url !== this.props.url || nextProps.url && projChanged) {
-      if (nextProps.url) {
+    if (this.props.url !== prevProps.url || this.props.url && projChanged) {
+      if (this.props.url) {
         this.layer.setSource(new _Vector2["default"]({
-          url: nextProps.url,
+          url: this.props.url,
           format: this.format
@@ -84,4 +84,4 @@ }));
 
-    if (nextProps.layerStyle !== this.props.layerStyle) {
-      this.layer.setStyle(nextProps.layerStyle);
+    if (this.props.layerStyle !== prevProps.layerStyle) {
+      this.layer.setStyle(this.props.layerStyle);
     }
@@ -88,0 +88,0 @@ },

lib/VectorTileLayer.js

@@ -29,3 +29,3 @@ "use strict";
   },
-  componentWillMount: function componentWillMount() {
+  componentDidMount: function componentDidMount() {
     this.format = new _MVT["default"]();
@@ -40,14 +40,14 @@ this.layer = new _VectorTile["default"]({
   },
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (!(0, _lodash["default"])(nextProps.source, this.props.source)) {
+  componentDidUpdate: function componentDidUpdate(prevProps) {
+    if (!(0, _lodash["default"])(this.props.source, prevProps.source)) {
       this.layer.setSource(new _VectorTile2["default"](Object.assign({
-        url: nextProps.url,
+        url: this.props.url,
         format: this.format
-      }, nextProps.source)));
-    } else if (nextProps.url !== this.props.url) {
-      this.layer.getSource().setUrl(nextProps.url);
+      }, this.props.source)));
+    } else if (this.props.url !== prevProps.url) {
+      this.layer.getSource().setUrl(this.props.url);
     }
 
-    if (nextProps.layerStyle !== this.props.layerStyle) {
-      this.layer.setStyle(nextProps.layerStyle);
+    if (this.props.layerStyle !== prevProps.layerStyle) {
+      this.layer.setStyle(this.props.layerStyle);
     }
@@ -54,0 +54,0 @@ }

package.json

 {
   "name": "@planet/layers",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.5",
   "description": "React components for OpenLayers",
@@ -24,3 +24,3 @@ "main": "lib/index.js",
   "peerDependencies": {
-    "ol": ">=6.0.0-beta.12",
+    "ol": ">=6.0.1",
     "react": ">=16.0.0",
@@ -36,2 +36,3 @@ "react-dom": ">=16.0.0"
     "@planet/css": "^1.1.1",
+    "babel-eslint": "^10.0.3",
     "babel-jest": "^24.8.0",
@@ -46,3 +47,3 @@ "babel-loader": "^8.0.6",
     "mini-css-extract-plugin": "^0.8.0",
-    "ol": "^6.0.0-dev.1569520952344",
+    "ol": "^6.0.1",
     "proj4": "^2.5.0",
@@ -67,3 +68,4 @@ "raw-loader": "^0.5.1",
       "import/resolver": "webpack"
-    }
+    },
+    "parser": "babel-eslint"
   },
@@ -70,0 +72,0 @@ "jest": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37328

increased by2.48%

Lines of code

972

increased by2.86%

Worsened metrics

Dev dependency count

29

increased by3.57%

No dependency changes