Fix #1314 Support to print vector layer

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

@@ -107,7 +107,7 @@ var geometryToLayer = function(geojson, options) {
         return new L.FeatureGroup(layers);
     case 'GeometryCollection':
         for (i = 0, len = geometry.geometries.length; i < len; i++) {
-            layer = this.geometryToLayer({
+            layer = geometryToLayer({
                 geometry: geometry.geometries[i],
                 type: 'Feature',
                 properties: geojson.properties

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

@@ -8,6 +8,7 @@
 var React = require('react');
 var Layers = require('../../../utils/leaflet/Layers');
 var assign = require('object-assign');
+var {isEqual} = require('lodash');
 
 const LeafletLayer = React.createClass({
     propTypes: {
@@ -45,6 +46,26 @@ const LeafletLayer = React.createClass({
         }
         this.updateLayer(newProps, this.props);
     },
+    shouldComponentUpdate(newProps) {
+        // the reduce returns true when a prop is changed
+        // optimizing when options are equal ignorning loading key
+        return !(["map", "type", "srs", "position", "zoomOffset", "onInvalid", "onClick", "options"].reduce( (prev, p) => {
+            switch (p) {
+                case "map":
+                case "type":
+                case "srs":
+                case "position":
+                case "zoomOffset":
+                case "onInvalid":
+                case "onClick":
+                    return prev && this.props[p] === newProps[p];
+                case "options":
+                    return prev && (this.props[p] === newProps[p] || isEqual({...this.props[p], loading: false}, {...newProps[p], loading: false}));
+                default:
+                    return prev;
+            }
+        }, true));
+    },
     componentWillUnmount() {
         if (this.layer && this.props.map) {
             this.removeLayer();
@@ -105,6 +126,7 @@ const LeafletLayer = React.createClass({
                 this.layer.layerName = options.name;
                 this.layer.layerId = options.id;
             }
+            this.forceUpdate();
         }
     },
     updateLayer(newProps, oldProps) {

web/client/components/map/leaflet/__tests__/Layer-test.jsx

@@ -9,6 +9,7 @@ var React = require('react/addons');
 var ReactDOM = require('react-dom');
 var L = require('leaflet');
 var LeafLetLayer = require('../Layer.jsx');
+var Feature = require('../Feature.jsx');
 var expect = require('expect');
 
 require('../../../../utils/leaflet/Layers');
@@ -18,6 +19,7 @@ require('../plugins/WMSLayer');
 require('../plugins/GoogleLayer');
 require('../plugins/BingLayer');
 require('../plugins/MapQuest');
+require('../plugins/VectorLayer');
 
 describe('Leaflet layer', () => {
     let map;
@@ -177,6 +179,119 @@ describe('Leaflet layer', () => {
         expect(urls.length).toBe(1);
     });
 
+    it('creates a vector layer for leaflet map', () => {
+        var options = {
+            "type": "wms",
+            "visibility": true,
+            "name": "vector_sample",
+            "group": "sample",
+            "features": [
+                  { "type": "Feature",
+                    "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
+                    "properties": {"prop0": "value0"}
+                    },
+                  { "type": "Feature",
+                    "geometry": {
+                      "type": "LineString",
+                      "coordinates": [
+                        [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
+                        ]
+                      },
+                    "properties": {
+                      "prop0": "value0",
+                      "prop1": 0.0
+                      }
+                    },
+                  { "type": "Feature",
+                     "geometry": {
+                       "type": "Polygon",
+                       "coordinates": [
+                         [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
+                           [100.0, 1.0], [100.0, 0.0] ]
+                         ]
+                     },
+                     "properties": {
+                       "prop0": "value0",
+                       "prop1": {"this": "that"}
+                       }
+                   },
+                   { "type": "Feature",
+                      "geometry": { "type": "MultiPoint",
+                        "coordinates": [ [100.0, 0.0], [101.0, 1.0] ]
+                      },
+                      "properties": {
+                        "prop0": "value0",
+                        "prop1": {"this": "that"}
+                        }
+                   },
+                   { "type": "Feature",
+                      "geometry": { "type": "MultiLineString",
+                        "coordinates": [
+                            [ [100.0, 0.0], [101.0, 1.0] ],
+                            [ [102.0, 2.0], [103.0, 3.0] ]
+                          ]
+                      },
+                      "properties": {
+                        "prop0": "value0",
+                        "prop1": {"this": "that"}
+                        }
+                    },
+                    { "type": "Feature",
+                       "geometry": { "type": "MultiPolygon",
+                        "coordinates": [
+                          [[[102.0, 2.0], [103.0, 2.0], [103.0, 3.0], [102.0, 3.0], [102.0, 2.0]]],
+                          [[[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]],
+                           [[100.2, 0.2], [100.8, 0.2], [100.8, 0.8], [100.2, 0.8], [100.2, 0.2]]]
+                          ]
+                      },
+                       "properties": {
+                         "prop0": "value0",
+                         "prop1": {"this": "that"}
+                         }
+                     },
+                     { "type": "Feature",
+                        "geometry": { "type": "GeometryCollection",
+                            "geometries": [
+                              { "type": "Point",
+                                "coordinates": [100.0, 0.0]
+                                },
+                              { "type": "LineString",
+                                "coordinates": [ [101.0, 0.0], [102.0, 1.0] ]
+                                }
+                            ]
+                        },
+                        "properties": {
+                          "prop0": "value0",
+                          "prop1": {"this": "that"}
+                          }
+                      }
+               ]
+        };
+        // create layers
+        var layer = ReactDOM.render(
+            (<LeafLetLayer type="vector"
+                 options={options} map={map}>
+                {options.features.map((feature) => (<Feature
+                    key={feature.id}
+                    type={feature.type}
+                    geometry={feature.geometry}
+                    msId={feature.id}
+                    featuresCrs={ 'EPSG:4326' }
+                        />))}</LeafLetLayer>), document.getElementById("container"));
+        expect(layer).toExist();
+        let l2 = ReactDOM.render(
+            (<LeafLetLayer type="vector"
+                 options={options} map={map}>
+                {options.features.map((feature) => (<Feature
+                    key={feature.id}
+                    type={feature.type}
+                    geometry={feature.geometry}
+                    msId={feature.id}
+                    featuresCrs={ 'EPSG:4326' }
+                        />))}</LeafLetLayer>), document.getElementById("container"));
+        expect(l2).toExist();
+    });
+
     it('creates a wms layer for leaflet map with custom tileSize', () => {
         var options = {
             "type": "wms",

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

@@ -104,6 +104,7 @@ const OpenlayersLayer = React.createClass({
             if (this.layer && !this.layer.detached) {
                 this.addLayer(options);
             }
+            this.forceUpdate();
         }
     },
     updateLayer(newProps, oldProps) {

web/client/components/print/MapPreview.jsx

@@ -14,6 +14,7 @@ const {Button, Glyphicon} = require('react-bootstrap');
 
 let PMap;
 let Layer;
+let Feature;
 
 const MapPreview = React.createClass({
     propTypes: {
@@ -54,6 +55,7 @@ const MapPreview = React.createClass({
         PMap = require('../map/' + this.props.mapType + '/Map');
         Layer = require('../map/' + this.props.mapType + '/Layer');
         require('../map/' + this.props.mapType + '/plugins/index');
+        Feature = require('../map/' + this.props.mapType + '/index').Feature;
     },
     getRatio() {
         if (this.props.width && this.props.layoutSize && this.props.resolutions) {
@@ -77,6 +79,22 @@ const MapPreview = React.createClass({
             })
         });
     },
+    renderLayerContent(layer) {
+        if (layer.features && layer.type === "vector") {
+            return layer.features.map( (feature) => {
+                return (
+                    <Feature
+                        key={feature.id}
+                        type={feature.type}
+                        geometry={feature.geometry}
+                        msId={feature.id}
+                        featuresCrs={ layer.featuresCrs || 'EPSG:4326' }
+                        style={ feature.style || layer.style || null }/>
+                );
+            });
+        }
+        return null;
+    },
     render() {
         const style = assign({}, this.props.style, {
             width: this.props.width + "px",
@@ -102,8 +120,11 @@ const MapPreview = React.createClass({
                 mapOptions={mapOptions}
                 >
                 {this.props.layers.map((layer, index) =>
-                    <Layer key={layer.name} position={index} type={layer.type}
-                        options={assign({}, this.adjustResolution(layer), {srs: projection})}/>
+                    <Layer key={layer.id || layer.name} position={index} type={layer.type}
+                        options={assign({}, this.adjustResolution(layer), {srs: projection})}>
+                        {this.renderLayerContent(layer)}
+                    </Layer>
+
                 )}
                 </PMap>
                 {this.props.enableScalebox ? <ScaleBox id="mappreview-scalebox"

web/client/utils/CoordinatesUtils.js

@@ -5,11 +5,49 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Proj4js = require('proj4');
-var assign = require('object-assign');
-var {isArray, flattenDeep, chunk} = require('lodash');
+const Proj4js = require('proj4');
+const proj4 = Proj4js;
+const assign = require('object-assign');
+const {isArray, flattenDeep, chunk, cloneDeep} = require('lodash');
+// Checks if `list` looks like a `[x, y]`.
+function isXY(list) {
+    return list.length >= 2 &&
+        typeof list[0] === 'number' &&
+        typeof list[1] === 'number';
+}
+function traverseCoords(coordinates, callback) {
+    if (isXY(coordinates)) return callback(coordinates);
+    return coordinates.map(function(coord) { return traverseCoords(coord, callback); });
+}
 
-var CoordinatesUtils = {
+function traverseGeoJson(geojson, leafCallback, nodeCallback) {
+    if (geojson === null) return geojson;
+
+    let r = cloneDeep(geojson);
+
+    if (geojson.type === 'Feature') {
+        r.geometry = traverseGeoJson(geojson.geometry, leafCallback, nodeCallback);
+    } else if (geojson.type === 'FeatureCollection') {
+        r.features = r.features.map(function(gj) { return traverseGeoJson(gj, leafCallback, nodeCallback); });
+    } else if (geojson.type === 'GeometryCollection') {
+        r.geometries = r.geometries.map(function(gj) { return traverseGeoJson(gj, leafCallback, nodeCallback); });
+    } else {
+        if (leafCallback) leafCallback(r);
+    }
+
+    if (nodeCallback) nodeCallback(r);
+
+    return r;
+}
+
+function determineCrs(crs) {
+    if (typeof crs === 'string' || crs instanceof String) {
+        return Proj4js.defs(crs) ? new Proj4js.Proj(crs) : null;
+    }
+    return crs;
+}
+
+const CoordinatesUtils = {
     getUnits: function(projection) {
         const proj = new Proj4js.Proj(projection);
         return proj.units || 'degrees';
@@ -27,6 +65,52 @@ var CoordinatesUtils = {
         }
         return null;
     },
+    /**
+     * Reprojects a geojson from a crs into another
+     */
+    reprojectGeoJson: function(geojson, fromParam = "EPSG:4326", toParam = "EPSG:4326") {
+        let from = fromParam;
+        let to = toParam;
+        if (typeof from === 'string') {
+            from = determineCrs(from);
+        }
+        if (typeof to === 'string') {
+            to = determineCrs(to);
+        }
+        let transform = proj4(from, to);
+
+        return traverseGeoJson(geojson, (gj) => {
+            // No easy way to put correct CRS info into the GeoJSON,
+            // and definitely wrong to keep the old, so delete it.
+            if (gj.crs) {
+                delete gj.crs;
+            }
+            gj.coordinates = traverseCoords(gj.coordinates, (xy) => {
+                return transform.forward(xy);
+            });
+        }, (gj) => {
+            if (gj.bbox) {
+                // A bbox can't easily be reprojected, just reprojecting
+                // the min/max coords definitely will not work since
+                // the transform is not linear (in the general case).
+                // Workaround is to just re-compute the bbox after the
+                // transform.
+                gj.bbox = (() => {
+                    let min = [Number.MAX_VALUE, Number.MAX_VALUE];
+                    let max = [-Number.MAX_VALUE, -Number.MAX_VALUE];
+                    traverseGeoJson(gj, function(_gj) {
+                        traverseCoords(_gj.coordinates, function(xy) {
+                            min[0] = Math.min(min[0], xy[0]);
+                            min[1] = Math.min(min[1], xy[1]);
+                            max[0] = Math.max(max[0], xy[0]);
+                            max[1] = Math.max(max[1], xy[1]);
+                        });
+                    });
+                    return [min[0], min[1], max[0], max[1]];
+                })();
+            }
+        });
+    },
     normalizePoint: function(point) {
         return {
             x: point.x || 0.0,