Crsselector plugin #3191

package.json

@@ -82,6 +82,9 @@
     "@turf/bbox": "4.1.0",
     "@turf/great-circle": "5.1.5",
     "@turf/inside": "4.1.0",
+    "@turf/bbox-polygon": "5.1.5",
+    "@turf/boolean-overlap": "5.1.5",
+    "@turf/boolean-contains": "5.1.5",
     "@turf/line-intersect": "4.1.0",
     "@turf/polygon-to-linestring": "4.1.0",
     "ag-grid": "3.3.3",

web/client/actions/__tests__/crsselector-test.js

@@ -0,0 +1,12 @@
+var expect = require('expect');
+var { CHANGE_CRS_INPUT_VALUE, setInputValue} = require('../crsselector');
+
+describe('Test crsselector actions', () => {
+    it('test input value action', () => {
+        let value = 'ESPG:4326';
+        const retVal = setInputValue(value);
+        expect(retVal).toExist();
+        expect(retVal.type).toBe(CHANGE_CRS_INPUT_VALUE);
+        expect(retVal.value).toBe('ESPG:4326');
+    });
+});

web/client/actions/crsselector.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2017, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+const CHANGE_CRS_INPUT_VALUE = 'CHANGE_CRS_INPUT_VALUE';
+
+function setInputValue(value) {
+    return {
+        type: CHANGE_CRS_INPUT_VALUE,
+        value
+    };
+}
+
+module.exports = {
+    CHANGE_CRS_INPUT_VALUE,
+    setInputValue
+};

web/client/components/background/BackgroundSelector.jsx

@@ -31,7 +31,8 @@ class BackgroundSelector extends React.Component {
         onPropertiesChange: PropTypes.func,
         onToggle: PropTypes.func,
         onLayerChange: PropTypes.func,
-        onStartChange: PropTypes.func
+        onStartChange: PropTypes.func,
+        projection: PropTypes.string
     };
 
     static defaultProps = {
@@ -65,7 +66,7 @@ class BackgroundSelector extends React.Component {
     getIcons = (side, frame, margin, vertical) => {
         return this.props.enabled ? this.props.layers.map((layer, idx) => {
             let thumb = this.getThumb(layer);
-            return <PreviewIcon vertical={vertical} key={idx} src={thumb} currentLayer={this.props.currentLayer} margin={margin} side={side} frame={frame} layer={layer} onToggle={this.props.onToggle} onPropertiesChange={this.props.onPropertiesChange} onLayerChange={this.props.onLayerChange}/>;
+            return <PreviewIcon projection={this.props.projection} vertical={vertical} key={idx} src={thumb} currentLayer={this.props.currentLayer} margin={margin} side={side} frame={frame} layer={layer} onToggle={this.props.onToggle} onPropertiesChange={this.props.onPropertiesChange} onLayerChange={this.props.onLayerChange}/>;
         }) : [];
     };
 

web/client/components/background/PreviewIcon.jsx

@@ -8,7 +8,7 @@
 
 const React = require('react');
 const PropTypes = require('prop-types');
-
+const {indexOf, has} = require('lodash');
 require('./css/previewicon.css');
 
 class PreviewIcon extends React.Component {
@@ -22,7 +22,8 @@ class PreviewIcon extends React.Component {
         currentLayer: PropTypes.object,
         onPropertiesChange: PropTypes.func,
         onToggle: PropTypes.func,
-        onLayerChange: PropTypes.func
+        onLayerChange: PropTypes.func,
+        projection: PropTypes.string
     };
 
     static defaultProps = {
@@ -39,13 +40,16 @@ class PreviewIcon extends React.Component {
     };
 
     render() {
+        const compatibleCrs = ['EPSG:4326', 'EPSG:3857', 'EPSG:900913'];
+        const validCrs = indexOf(compatibleCrs, this.props.projection) > -1;
+        const compatibleWmts = this.props.layer.type === "wmts" && has(this.props.layer.allowedSRS, this.props.projection);
         const containerClass = this.props.vertical ? 'background-preview-icon-container-vertical' : 'background-preview-icon-container-horizontal';
         const type = this.props.layer.visibility ? ' bg-primary' : ' bg-body';
-        const invalid = this.props.layer.invalid ? ' disabled-icon' : '';
+        const valid = ((validCrs || compatibleWmts || this.props.layer.type === "wms" || this.props.layer.type === "empty") && !this.props.layer.invalid );
 
-        const click = this.props.layer.invalid ? () => {} : () => { this.props.onToggle(); this.props.onPropertiesChange(this.props.layer.id, {visibility: true}); this.props.onLayerChange('currentLayer', this.props.layer); };
+        const click = !valid ? () => {} : () => { this.props.onToggle(); this.props.onPropertiesChange(this.props.layer.id, {visibility: true}); this.props.onLayerChange('currentLayer', this.props.layer); };
         return (
-            <div className={containerClass + type + invalid} style={{padding: this.props.frame / 2, marginLeft: this.props.vertical ? this.props.margin : 0, marginRight: this.props.vertical ? 0 : this.props.margin, marginBottom: this.props.margin, width: this.props.side + this.props.frame, height: this.props.side + this.props.frame}}>
+            <div className={containerClass + type + (valid ? '' : ' disabled-icon')} style={{padding: this.props.frame / 2, marginLeft: this.props.vertical ? this.props.margin : 0, marginRight: this.props.vertical ? 0 : this.props.margin, marginBottom: this.props.margin, width: this.props.side + this.props.frame, height: this.props.side + this.props.frame}}>
                 <div className="background-preview-icon-frame" style={{width: this.props.side, height: this.props.side}}>
                     <img
                         onMouseOver={() => { this.props.onLayerChange('tempLayer', this.props.layer); }}

web/client/components/background/__tests__/PreviewIcon-test.jsx

@@ -36,6 +36,7 @@ describe("test the PreviewIcon", () => {
         };
 
         const layer = {
+            type: "empty",
             visibility: true,
             id: 'layer'
         };

web/client/components/map/openlayers/Feature.jsx

@@ -11,6 +11,7 @@ var React = require('react');
 var ol = require('openlayers');
 const {isEqual} = require('lodash');
 const {getStyle} = require('./VectorStyle');
+const CoordinatesUtils = require('../../../utils/CoordinatesUtils');
 
 class Feature extends React.Component {
     static propTypes = {
@@ -32,13 +33,12 @@ class Feature extends React.Component {
     componentDidMount() {
         this.addFeatures(this.props);
     }
-
     shouldComponentUpdate(nextProps) {
-        return !isEqual(nextProps.properties, this.props.properties) || !isEqual(nextProps.geometry, this.props.geometry) || !isEqual(nextProps.style, this.props.style);
+        return !isEqual(nextProps.properties, this.props.properties) || !isEqual(nextProps.geometry, this.props.geometry) || !isEqual(nextProps.style, this.props.style) || !isEqual(nextProps.crs, this.props.crs);
     }
 
     componentWillUpdate(newProps) {
-        if (!isEqual(newProps.properties, this.props.properties) || !isEqual(newProps.geometry, this.props.geometry) || !isEqual(newProps.style, this.props.style)) {
+        if (!isEqual(newProps.properties, this.props.properties) || !isEqual(newProps.geometry, this.props.geometry) || !isEqual(newProps.style, this.props.style) || !isEqual(newProps.crs, this.props.crs)) {
             this.removeFromContainer();
             this.addFeatures(newProps);
         }
@@ -57,12 +57,12 @@ class Feature extends React.Component {
         if (this.props.geometry) {
             const geometry = this.props.geometry.type === "GeometryCollection" ? this.props.geometry && this.props.geometry.geometries : this.props.geometry && this.props.geometry.coordinates;
             if (props.container && geometry) {
-                this._feature = format.readFeatures({
-                    type: props.type,
-                    properties: props.properties,
-                    geometry: props.geometry,
-                    id: this.props.msId});
-                this._feature.forEach((f) => f.getGeometry().transform(props.featuresCrs, props.crs || 'EPSG:3857'));
+                this._feature = format.readFeatures(
+                    CoordinatesUtils.reprojectGeoJson({
+                        type: props.type,
+                        properties: props.properties,
+                        geometry: props.geometry,
+                        id: this.props.msId}, props.featuresCrs, props.crs));
                 if (props.style && (props.style !== props.layerStyle)) {
                     this._feature.forEach((f) => { f.setStyle(getStyle({style: props.style})); });
                 }
@@ -79,7 +79,7 @@ class Feature extends React.Component {
                 const layersSource = this.props.container.getSource();
                 this._feature.map((feature) => {
                     let featureId = feature.getId();
-                    if (featureId === undefined) {
+                    if (featureId === undefined || !layersSource.getFeatureById(featureId)) {
                         layersSource.removeFeature(feature);
                     } else {
                         layersSource.removeFeature(layersSource.getFeatureById(featureId));

web/client/components/map/openlayers/Layer.jsx

@@ -15,6 +15,8 @@ const Rx = require('rxjs');
 
 class OpenlayersLayer extends React.Component {
     static propTypes = {
+        onWarning: PropTypes.func,
+        maxExtent: PropTypes.array,
         map: PropTypes.object,
         mapId: PropTypes.string,
         srs: PropTypes.string,
@@ -34,7 +36,9 @@ class OpenlayersLayer extends React.Component {
         onLayerLoading: () => {},
         onLayerLoad: () => {},
         onLayerError: () => {},
-        onCreationError: () => {}
+        onCreationError: () => {},
+        onWarning: () => {},
+        srs: "EPSG:3857"
     };
 
     componentDidMount() {
@@ -123,9 +127,33 @@ class OpenlayersLayer extends React.Component {
         if (type) {
             const layerOptions = this.generateOpts(options, position, CoordinatesUtils.normalizeSRS(this.props.srs), securityToken);
             this.layer = Layers.createLayer(type, layerOptions, this.props.map, this.props.mapId);
+            const compatible = Layers.isCompatible(type, layerOptions);
             if (this.layer && !this.layer.detached) {
+                const parentMap = this.props.map;
+                const mapExtent = parentMap && parentMap.getView().getProjection().getExtent();
+                const layerExtent = options && options.bbox && options.bbox.bounds;
+                const mapBboxPolygon = mapExtent && CoordinatesUtils.reprojectBbox(mapExtent, this.props.srs, 'EPSG:4326');
+                let layerBboxPolygon = layerExtent && CoordinatesUtils.getExtentFromNormalized(layerExtent, this.props.srs).extent;
+                if (layerBboxPolygon && layerBboxPolygon.length === 2 && _.isArray(layerBboxPolygon[1])) {
+                    layerBboxPolygon = layerBboxPolygon[1];
+                }
+
+                if (mapBboxPolygon && layerBboxPolygon &&
+                    !CoordinatesUtils.isBboxCompatible(CoordinatesUtils.getPolygonFromExtent(mapBboxPolygon), CoordinatesUtils.getPolygonFromExtent(layerBboxPolygon)) ||
+                    !compatible) {
+                    this.props.onWarning({
+                        title: "warning",
+                            message: "notification.incompatibleDataAndProjection",
+                        action: {
+                            label: "close"
+                        },
+                        position: "tc",
+                        uid: "1"
+                    });
+                }
                 this.addLayer(options);
             }
+
             if (this.layer && this.layer.get && this.layer.get('getElevation')) {
                 this.props.map.set('elevationLayer', this.layer);
             }