Fixes #1506 OpenLayers and Leaflet vector different default styles

package.json

@@ -185,6 +185,7 @@
     "rxjs": "5.1.1",
     "screenfull": "3.1.0",
     "shpjs": "3.4.2",
+    "tinycolor2": "1.4.1",
     "turf-bbox": "3.0.10",
     "turf-buffer": "3.0.10",
     "turf-intersect": "3.0.10",
@@ -218,4 +219,4 @@
   },
   "author": "GeoSolutions",
   "license": "BSD-2-Clause"
-}
+}

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

@@ -15,13 +15,15 @@ var {
     TEXT_SEARCH_ITEM_SELECTED,
     TEXT_SEARCH_NESTED_SERVICES_SELECTED,
     TEXT_SEARCH_CANCEL_ITEM,
+    UPDATE_RESULTS_STYLE,
     searchResultLoaded,
     searchTextLoading,
     searchResultError,
     textSearch,
     selectSearchItem,
     selectNestedService,
-    cancelSelectedItem
+    cancelSelectedItem,
+    updateResultsStyle
 } = require('../search');
 
 describe('Test correctness of the search actions', () => {
@@ -56,11 +58,12 @@ describe('Test correctness of the search actions', () => {
         expect(retval2.append).toBe(true);
     });
     it('serch item selected', () => {
-        const retval = selectSearchItem("A", "B");
+        const retval = selectSearchItem("A", "B", {color: '#ff0000'});
         expect(retval).toExist();
         expect(retval.type).toBe(TEXT_SEARCH_ITEM_SELECTED);
         expect(retval.item).toEqual("A");
         expect(retval.mapConfig).toBe("B");
+        expect(retval.resultsStyle).toEqual({color: '#ff0000'});
     });
     it('serch item cancelled', () => {
         const retval = cancelSelectedItem("ITEM");
@@ -77,6 +80,11 @@ describe('Test correctness of the search actions', () => {
         expect(retval.items).toEqual(items);
         expect(retval.services).toEqual(services);
     });
-
-
+    it('update results style', () => {
+        const style = {color: '#ff0000'};
+        const retval = updateResultsStyle(style);
+        expect(retval).toExist();
+        expect(retval.type).toBe(UPDATE_RESULTS_STYLE);
+        expect(retval.style).toEqual({color: '#ff0000'});
+    });
 });

web/client/actions/search.js

@@ -18,6 +18,8 @@ const TEXT_SEARCH_ERROR = 'TEXT_SEARCH_ERROR';
 const TEXT_SEARCH_CANCEL_ITEM = 'TEXT_SEARCH_CANCEL_ITEM';
 const TEXT_SEARCH_ITEM_SELECTED = 'TEXT_SEARCH_ITEM_SELECTED';
 const TEXT_SEARCH_SET_HIGHLIGHTED_FEATURE = 'TEXT_SEARCH_SET_HIGHLIGHTED_FEATURE';
+const UPDATE_RESULTS_STYLE = 'UPDATE_RESULTS_STYLE';
+
 /**
  * updates the results of the search result loaded
  * @memberof actions.search
@@ -120,12 +122,14 @@ function textSearch(searchText, {services = null} = {}) {
  * @memberof actions.search
  * @param {object} item the selected item
  * @param {object} mapConfig the current map configuration (with size, projection...)
+ * @param {object} resultsStyle style to apply to results geometries
  */
-function selectSearchItem(item, mapConfig) {
+function selectSearchItem(item, mapConfig, resultsStyle) {
     return {
         type: TEXT_SEARCH_ITEM_SELECTED,
         item,
-        mapConfig
+        mapConfig,
+        resultsStyle
     };
 
 }
@@ -171,6 +175,18 @@ function setHighlightedFeature(feature) {
     };
 }
 
+/**
+ * Change default style of results geometries
+ * @memberof actions.search
+ * @param {object} style style of results geometries
+ */
+function updateResultsStyle(style) {
+    return {
+        type: UPDATE_RESULTS_STYLE,
+        style
+    };
+}
+
 /**
  * Actions for search
  * @name actions.search
@@ -189,6 +205,7 @@ module.exports = {
     TEXT_SEARCH_NESTED_SERVICES_SELECTED,
     TEXT_SEARCH_CANCEL_ITEM,
     TEXT_SEARCH_SET_HIGHLIGHTED_FEATURE,
+    UPDATE_RESULTS_STYLE,
     searchTextLoading,
     searchResultError,
     searchResultLoaded,
@@ -200,5 +217,6 @@ module.exports = {
     selectNestedService,
     selectSearchItem,
     cancelSelectedItem,
-    setHighlightedFeature
+    setHighlightedFeature,
+    updateResultsStyle
 };

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

@@ -53,6 +53,8 @@ const geometryToLayer = function(geojson, options) {
     if (!coords && !geometry) {
         return null;
     }
+
+    const style = options.style && options.style[geometry.type] || options.style;
     let layer;
     switch (geometry.type) {
     case 'Point':
@@ -71,13 +73,13 @@ const geometryToLayer = function(geojson, options) {
 
     case 'LineString':
         latlngs = coordsToLatLngs(coords, geometry.type === 'LineString' ? 0 : 1, coordsToLatLng);
-        layer = new L.Polyline(latlngs, options.style);
+        layer = new L.Polyline(latlngs, style);
         layer.msId = geojson.id;
         return layer;
     case 'MultiLineString':
         latlngs = coordsToLatLngs(coords, geometry.type === 'LineString' ? 0 : 1, coordsToLatLng);
         for (i = 0, len = latlngs.length; i < len; i++) {
-            layer = new L.Polyline(latlngs[i], options.style);
+            layer = new L.Polyline(latlngs[i], style);
             layer.msId = geojson.id;
             if (layer) {
                 layers.push(layer);
@@ -86,13 +88,13 @@ const geometryToLayer = function(geojson, options) {
         return new L.FeatureGroup(layers);
     case 'Polygon':
         latlngs = coordsToLatLngs(coords, geometry.type === 'Polygon' ? 1 : 2, coordsToLatLng);
-        layer = new L.Polygon(latlngs, options.style);
+        layer = new L.Polygon(latlngs, style);
         layer.msId = geojson.id;
         return layer;
     case 'MultiPolygon':
         latlngs = coordsToLatLngs(coords, geometry.type === 'Polygon' ? 1 : 2, coordsToLatLng);
         for (i = 0, len = latlngs.length; i < len; i++) {
-            layer = new L.Polygon(latlngs[i], options.style);
+            layer = new L.Polygon(latlngs[i], style);
             layer.msId = geojson.id;
             if (layer) {
                 layers.push(layer);