@planet/layers - npm Package Compare versions

Comparing version 1.10.4 to 1.10.5-0

cjs/constants.js

@@ -6,2 +6,3 @@ 'use strict';
 });
-var GEO_PROJECTION = exports.GEO_PROJECTION = 'EPSG:4326';
+var GEO_PROJECTION = exports.GEO_PROJECTION = 'EPSG:4326';
+var WEB_PROJECTION = exports.WEB_PROJECTION = 'EPSG:3857';

cjs/ImageLayer.js

@@ -27,2 +27,4 @@ 'use strict';
 
+var _constants = require('./constants');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,10 +43,12 @@
 
+  // Reproject extent from LatLon to Web Mercator or Custom Projection
+  reprojectExtent: function reprojectExtent(extent, projection) {
+    return _proj2.default.transformExtent(extent, _constants.GEO_PROJECTION, projection || _constants.WEB_PROJECTION);
+  },
   componentWillMount: function componentWillMount() {
-    var extent = _proj2.default.transformExtent(this.props.extent, this.props.projection || 'EPSG:4326', 'EPSG:3857');
-
     var source = new _imagestatic2.default({
       url: this.props.url,
-      imageExtent: extent,
+      imageExtent: this.reprojectExtent(this.props.extent, this.props.projection),
       imageSize: this.props.size,
-      projection: this.props.projection || 'ESPG:3857',
+      projection: this.props.projection || _constants.WEB_PROJECTION,
       imageLoadFunction: this.props.loadFunction,
@@ -67,5 +71,5 @@ crossOrigin: this.props.crossOrigin
           url: nextProps.url,
-          imageExtent: _proj2.default.transformExtent(nextProps.extent, nextProps.projection || 'EPSG:4326', 'EPSG:3857'),
+          imageExtent: this.reprojectExtent(nextProps.extent, nextProps.projection),
           imageSize: nextProps.size,
-          projection: nextProps.projection || 'ESPG:3857',
+          projection: nextProps.projection || _constants.WEB_PROJECTION,
           imageLoadFunction: nextProps.loadFunction,
@@ -72,0 +76,0 @@ crossOrigin: nextProps.crossOrigin

cjs/Map.js

@@ -39,2 +39,6 @@ 'use strict';
 
+var _projection = require('ol/proj/projection');
+
+var _projection2 = _interopRequireDefault(_projection);
+
 var _createReactClass = require('create-react-class');
@@ -80,3 +84,4 @@
       zoom: _propTypes2.default.number,
-      extent: _propTypes2.default.arrayOf(_propTypes2.default.number)
+      extent: _propTypes2.default.arrayOf(_propTypes2.default.number),
+      projection: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.instanceOf(_projection2.default)])
     })
@@ -102,3 +107,5 @@ },
       controls: [],
-      view: new _view2.default()
+      view: new _view2.default({
+        projection: this.props.view && this.props.view.projection || _constants.WEB_PROJECTION
+      })
     }, this.props.constructorOptions);
@@ -145,2 +152,10 @@
     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 _view2.default({
+          projection: nextProps.view.projection || this.props.view.projection.getCode()
+        });
+        this.map.setView(newView);
+      }
+
       this.updateView(nextProps);
@@ -184,3 +199,4 @@ }
         zoom: view.getZoom(),
-        extent: _proj2.default.transformExtent(extent, projection, _constants.GEO_PROJECTION)
+        extent: _proj2.default.transformExtent(extent, projection, _constants.GEO_PROJECTION),
+        projection: projection
       };
@@ -225,3 +241,3 @@
     var view = this.map.getView();
-    var projection = view.getProjection();
+    var projection = props.view && props.view.projection || view.getProjection();
 
@@ -228,0 +244,0 @@ this.updateMinZoom(props);

cjs/VectorLayer.js

@@ -39,7 +39,5 @@ 'use strict';
   componentWillMount: function componentWillMount() {
-    this.format = new _geojson2.default({
-      featureProjection: this.context.map.getView().getProjection()
-    });
+    this.createFormat();
+    var source = new _vector4.default();
 
-    var source = new _vector4.default();
     if (this.props.data) {
@@ -59,3 +57,12 @@ var features = this.format.readFeatures(this.props.data);
   componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
+    // Check the projection
+    var projChanged = this.checkProjections();
+
+    // Create a new format if projection changed
+    if (projChanged) {
+      this.createFormat();
+    }
+
+    // If data or projection changed
+    if (nextProps.data !== this.props.data || nextProps.data && projChanged) {
       var source = this.layer.getSource();
@@ -67,5 +74,7 @@ source.clear();
     }
-    if (nextProps.url !== this.props.url) {
+
+    // If url or projection changed
+    if (nextProps.url !== this.props.url || nextProps.url && projChanged) {
       if (nextProps.url) {
-        this.layer.setSource(new _vector4.default({ url: this.props.url, format: this.format }));
+        this.layer.setSource(new _vector4.default({ url: nextProps.url, format: this.format }));
       } else {
@@ -76,5 +85,20 @@ this.layer.getSource().clear();
 
+    // If the style changed
     if (nextProps.layerStyle !== this.props.layerStyle) {
       this.layer.setStyle(nextProps.layerStyle);
     }
+  },
+
+
+  // Check current format feature projection vs current map projection
+  checkProjections: function checkProjections() {
+    return this.format.defaultFeatureProjection.getCode() !== this.context.map.getView().getProjection().getCode();
+  },
+
+
+  // Create a GeoJSON format using the map's projection
+  createFormat: function createFormat() {
+    this.format = new _geojson2.default({
+      featureProjection: this.context.map.getView().getProjection()
+    });
   }
@@ -81,0 +105,0 @@ });

cjs/VectorTileLayer.js

@@ -47,2 +47,3 @@ 'use strict';
   componentWillMount: function componentWillMount() {
+    // TODO: projection is not affecting this?
     this.format = new _mvt2.default();
@@ -53,3 +54,4 @@ this.layer = new _vectortile2.default({
         format: this.format,
-        url: this.props.url
+        url: this.props.url,
+        projection: this.context.map.getView().getProjection()
       }, this.props.source))
@@ -62,3 +64,4 @@ });
         url: nextProps.url,
-        format: this.format
+        format: this.format,
+        projection: this.context.map.getView().getProjection()
       }, nextProps.source)));
@@ -65,0 +68,0 @@ } else if (nextProps.url !== this.props.url) {

lib/constants.js

@@ -1,1 +0,2 @@
-export var GEO_PROJECTION = 'EPSG:4326';
+export var GEO_PROJECTION = 'EPSG:4326';
+export var WEB_PROJECTION = 'EPSG:3857';

lib/ImageLayer.js

@@ -6,2 +6,3 @@ import PropTypes from 'prop-types';
 import createLayer from './createLayer';
+import { WEB_PROJECTION, GEO_PROJECTION } from './constants';
 
@@ -19,10 +20,12 @@ var ImageLayer = createLayer({
 
+  // Reproject extent from LatLon to Web Mercator or Custom Projection
+  reprojectExtent: function reprojectExtent(extent, projection) {
+    return Proj.transformExtent(extent, GEO_PROJECTION, projection || WEB_PROJECTION);
+  },
   componentWillMount: function componentWillMount() {
-    var extent = Proj.transformExtent(this.props.extent, this.props.projection || 'EPSG:4326', 'EPSG:3857');
-
     var source = new ImageStatic({
       url: this.props.url,
-      imageExtent: extent,
+      imageExtent: this.reprojectExtent(this.props.extent, this.props.projection),
       imageSize: this.props.size,
-      projection: this.props.projection || 'ESPG:3857',
+      projection: this.props.projection || WEB_PROJECTION,
       imageLoadFunction: this.props.loadFunction,
@@ -45,5 +48,5 @@ crossOrigin: this.props.crossOrigin
           url: nextProps.url,
-          imageExtent: Proj.transformExtent(nextProps.extent, nextProps.projection || 'EPSG:4326', 'EPSG:3857'),
+          imageExtent: this.reprojectExtent(nextProps.extent, nextProps.projection),
           imageSize: nextProps.size,
-          projection: nextProps.projection || 'ESPG:3857',
+          projection: nextProps.projection || WEB_PROJECTION,
           imageLoadFunction: nextProps.loadFunction,
@@ -50,0 +53,0 @@ crossOrigin: nextProps.crossOrigin

lib/Map.js

@@ -9,4 +9,5 @@ import _Object$assign from 'babel-runtime/core-js/object/assign';
 import proj from 'ol/proj';
+import Projection from 'ol/proj/projection';
 import createReactClass from 'create-react-class';
-import { GEO_PROJECTION } from './constants';
+import { GEO_PROJECTION, WEB_PROJECTION } from './constants';
 
@@ -45,3 +46,4 @@ function getMinZoom(viewport) {
       zoom: PropTypes.number,
-      extent: PropTypes.arrayOf(PropTypes.number)
+      extent: PropTypes.arrayOf(PropTypes.number),
+      projection: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Projection)])
     })
@@ -67,3 +69,5 @@ },
       controls: [],
-      view: new View()
+      view: new View({
+        projection: this.props.view && this.props.view.projection || WEB_PROJECTION
+      })
     }, this.props.constructorOptions);
@@ -110,2 +114,10 @@
     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({
+          projection: nextProps.view.projection || this.props.view.projection.getCode()
+        });
+        this.map.setView(newView);
+      }
+
       this.updateView(nextProps);
@@ -149,3 +161,4 @@ }
         zoom: view.getZoom(),
-        extent: proj.transformExtent(extent, projection, GEO_PROJECTION)
+        extent: proj.transformExtent(extent, projection, GEO_PROJECTION),
+        projection: projection
       };
@@ -190,3 +203,3 @@
     var view = this.map.getView();
-    var projection = view.getProjection();
+    var projection = props.view && props.view.projection || view.getProjection();
 
@@ -193,0 +206,0 @@ this.updateMinZoom(props);

lib/VectorLayer.js

@@ -17,7 +17,5 @@ import GeoJSON from 'ol/format/geojson';
   componentWillMount: function componentWillMount() {
-    this.format = new GeoJSON({
-      featureProjection: this.context.map.getView().getProjection()
-    });
+    this.createFormat();
+    var source = new VectorSource();
 
-    var source = new VectorSource();
     if (this.props.data) {
@@ -37,3 +35,12 @@ var features = this.format.readFeatures(this.props.data);
   componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
+    // Check the projection
+    var projChanged = this.checkProjections();
+
+    // Create a new format if projection changed
+    if (projChanged) {
+      this.createFormat();
+    }
+
+    // If data or projection changed
+    if (nextProps.data !== this.props.data || nextProps.data && projChanged) {
       var source = this.layer.getSource();
@@ -45,5 +52,7 @@ source.clear();
     }
-    if (nextProps.url !== this.props.url) {
+
+    // If url or projection changed
+    if (nextProps.url !== this.props.url || nextProps.url && projChanged) {
       if (nextProps.url) {
-        this.layer.setSource(new VectorSource({ url: this.props.url, format: this.format }));
+        this.layer.setSource(new VectorSource({ url: nextProps.url, format: this.format }));
       } else {
@@ -54,5 +63,20 @@ this.layer.getSource().clear();
 
+    // If the style changed
     if (nextProps.layerStyle !== this.props.layerStyle) {
       this.layer.setStyle(nextProps.layerStyle);
     }
+  },
+
+
+  // Check current format feature projection vs current map projection
+  checkProjections: function checkProjections() {
+    return this.format.defaultFeatureProjection.getCode() !== this.context.map.getView().getProjection().getCode();
+  },
+
+
+  // Create a GeoJSON format using the map's projection
+  createFormat: function createFormat() {
+    this.format = new GeoJSON({
+      featureProjection: this.context.map.getView().getProjection()
+    });
   }
@@ -59,0 +83,0 @@ });

lib/VectorTileLayer.js

@@ -19,2 +19,3 @@ import _Object$assign from 'babel-runtime/core-js/object/assign';
   componentWillMount: function componentWillMount() {
+    // TODO: projection is not affecting this?
     this.format = new MVT();
@@ -25,3 +26,4 @@ this.layer = new OLVectorTileLayer({
         format: this.format,
-        url: this.props.url
+        url: this.props.url,
+        projection: this.context.map.getView().getProjection()
       }, this.props.source))
@@ -34,3 +36,4 @@ });
         url: nextProps.url,
-        format: this.format
+        format: this.format,
+        projection: this.context.map.getView().getProjection()
       }, nextProps.source)));
@@ -37,0 +40,0 @@ } else if (nextProps.url !== this.props.url) {

package.json

 {
   "name": "@planet/layers",
-  "version": "1.10.4",
+  "version": "1.10.5-0",
   "description": "React components for OpenLayers",
@@ -48,2 +48,3 @@ "module": "lib/index.js",
     "ol": "^4.5.0-beta.1",
+    "proj4": "^2.4.4",
     "raw-loader": "^0.5.1",
@@ -50,0 +51,0 @@ "react": "^16.0.0",

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

433644

increased by0.89%

Lines of code

12411

increased by0.61%

Number of medium supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Dev dependency count

29

increased by3.57%

Number of low quality alerts

2

increased by100%

No dependency changes