Add search filter for line and polygon.

src/app/dataset-detail/components/dataset-map/dataset-map.component.ts

@@ -78,6 +78,15 @@ export class DatasetMapComponent implements OnInit, OnDestroy {
       this.mapOptions.mvtUrl = APP_CONFIG.backendUrls.mvt;
       this.mapOptions.vectorService = { ...this.metadata.link.find((e) => { return e.service === linkFormats.wfs; }) };
       this.mapOptions.rasterService = { ...this.metadata.link.find((e) => { return e.service === linkFormats.wms; }) };
+      let dataType = '';
+      if (this._datasetDetailService.dataset.editorialMetadata.isLinear) {
+        dataType = 'Line';
+      } else if (this._datasetDetailService.dataset.editorialMetadata.isPunctual) {
+        dataType = 'Point';
+      } else if (this._datasetDetailService.dataset.editorialMetadata.isAreal) {
+        dataType = 'Polygon';
+      }
+      this.mapOptions.dataType = dataType;
 
       // For authentication reason, we do not use the open url of download.data for the WMS service.
       // We use a kong endpoint for the url to be proxyfied

src/app/map/models/map-options.ts

@@ -6,6 +6,7 @@ export interface MapOptions {
   isMVT: boolean;
   mvtUrl?: string;
   geojson? : {};
+  dataType: string;
 }
 
 export interface GeoService {

src/app/map/services/map.service.ts

@@ -18,6 +18,7 @@ export class MapService {
   private _map: mapboxgl.Map;
   private url: string;
   selectedBaseLayer: any;
+  dataType: string;
 
   vectorService: GeoService;
   rasterService: GeoService;
@@ -65,6 +66,7 @@ export class MapService {
     this.geojson = mapOptions.geojson as GeoJSON.FeatureCollection;
     this.isMVT = mapOptions.isMVT;
     this.mvtUrl = mapOptions.mvtUrl;
+    this.dataType = mapOptions.dataType;
 
     // Reset to false in ordre to set event listener
     this.eventPopupAdded = false;
@@ -240,107 +242,116 @@ export class MapService {
 
   addDataLayer() {
     // For 'Polygon' and 'MultiPolygon' features
-    this._map.addLayer(
-      {
-        id: 'polygon-features',
-        type: 'fill',
-        source: 'vector-source',
-        // 'source-layer': this.vectorService.name,
-        paint: {
-          'fill-color': ['case',
-            ['boolean', ['feature-state', 'highlight'], false],
-            this.featureHighlightedColor,
-            ['boolean', ['feature-state', 'hover'], false],
-            this.featureHoverColor,
-            ['boolean', ['feature-state', 'visited'], false],
-            this.visitedColor,
-            'transparent',
-          ],
-          'fill-opacity': 0.7,
-          'fill-outline-color': ['case',
-            ['boolean', ['feature-state', 'visited'], false],
-            'white',
-            'transparent',
-          ],
-        },
-        filter: ['match', ['geometry-type'], ['Polygon', 'MultiPolygon'], true, false],
-        ...(this.isMVT ? { 'source-layer': this.vectorService.name } : {}), // if not MVT, this property is not needed
-      });
+    if (this.dataType === 'Polygon') {
 
-    // For 'LineString' and 'MultiLineString features
-    this._map.addLayer(
-      {
-        id: 'line-features',
-        type: 'line',
-        source: 'vector-source',
-        // 'source-layer': this.vectorService.name,
-        layout: {
-          'line-cap': 'round',
-          'line-join': 'round',
-        },
-        paint: {
-          'line-color': ['case',
-            ['boolean', ['feature-state', 'highlight'], false],
-            this.featureHighlightedColor,
-            ['boolean', ['feature-state', 'hover'], false],
-            this.featureHoverColor,
-            ['boolean', ['feature-state', 'visited'], false],
-            this.visitedColor,
-            'transparent',
-          ],
-          'line-width': [
-            'interpolate', ['linear'], ['zoom'],
-            12, 2,
-            13, 4,
-          ],
-          'line-opacity': 0.8,
-        },
-        filter: ['match', ['geometry-type'], ['LineString', 'MultiLineString'], true, false],
-        ...(this.isMVT ? { 'source-layer': this.vectorService.name } : {}), // if not MVT, this property is not needed
-      },
-    );
-
-    // Add layer + style for the points
-    // Get paint options depending the dataset size
-    this._map.addLayer(
-      {
-        id: 'point-features',
-        type: 'circle',
-        source: 'vector-source',
-        // 'source-layer': this.vectorService.name,
-        filter: ['match', ['geometry-type'], ['Point'], true, false],
-        paint: {
-          'circle-radius': ['case',
-            ['boolean', ['feature-state', 'highlight'], false],
-            2.5,
-            5,
-          ],
-          'circle-color': ['case',
-            ['boolean', ['feature-state', 'highlight'], false],
-            'white',
-            ['boolean', ['feature-state', 'hover'], false],
-            this.featureHoverColor,
-            ['boolean', ['feature-state', 'visited'], false],
-            this.visitedColor,
-            'transparent',
-          ],
-          'circle-stroke-width': ['case',
-            ['boolean', ['feature-state', 'highlight'], false],
-            5,
-            ['boolean', ['feature-state', 'visited'], false],
-            1,
-            0,
-          ],
-          'circle-stroke-color': ['case',
-            ['boolean', ['feature-state', 'highlight'], false],
-            this.featureHighlightedColor,
-            ['boolean', ['feature-state', 'visited'], false],
-            'white',
-            'transparent',
-          ],
+      this._map.addLayer(
+        {
+          id: 'polygon-features',
+          type: 'fill',
+          source: 'vector-source',
+          // 'source-layer': this.vectorService.name,
+          paint: {
+            'fill-color': ['case',
+              ['boolean', ['feature-state', 'highlight'], false],
+              this.featureHighlightedColor,
+              ['boolean', ['feature-state', 'hover'], false],
+              this.featureHoverColor,
+              ['boolean', ['feature-state', 'visited'], false],
+              this.visitedColor,
+              'transparent',
+            ],
+            'fill-opacity': 0.7,
+            'fill-outline-color': ['case',
+              ['boolean', ['feature-state', 'visited'], false],
+              'white',
+              'transparent',
+            ],
+          },
+          filter: ['match', ['geometry-type'], ['Polygon', 'MultiPolygon'], true, false],
+          ...(this.isMVT ? { 'source-layer': this.vectorService.name } : {}), // if not MVT, this property is not needed
+        });
+    }
+
+    if (this.dataType === 'Line') {
+      // For 'LineString' and 'MultiLineString features
+      this._map.addLayer(
+        {
+          id: 'line-features',
+          type: 'line',
+          source: 'vector-source',
+          // 'source-layer': this.vectorService.name,
+          layout: {
+            'line-cap': 'round',
+            'line-join': 'round',
+          },
+          paint: {
+            'line-color': ['case',
+              ['boolean', ['feature-state', 'highlight'], false],
+              this.featureHighlightedColor,
+              ['boolean', ['feature-state', 'hover'], false],
+              this.featureHoverColor,
+              ['boolean', ['feature-state', 'visited'], false],
+              this.visitedColor,
+              'transparent',
+            ],
+            'line-width': [
+              'interpolate', ['linear'], ['zoom'],
+              9, 2,
+              13, 4,
+            ],
+          },
+          filter: ['match', ['geometry-type'], ['LineString', 'MultiLineString'], true, false],
+          ...(this.isMVT ? { 'source-layer': this.vectorService.name } : {}), // if not MVT, this property is not needed
         },
-        ...(this.isMVT ? { 'source-layer': this.vectorService.name } : {}), // if not MVT, this property is not needed
-      });
+      );
+    }
+
+    if (this.dataType === 'Point') {
+      // Add layer + style for the points
+      // Get paint options depending the dataset size
+      this._map.addLayer(
+        {
+          id: 'point-features',
+          type: 'circle',
+          source: 'vector-source',
+          // 'source-layer': this.vectorService.name,
+          filter: ['match', ['geometry-type'], ['Point'], true, false],
+          paint: {
+            'circle-radius': ['case',
+              ['boolean', ['feature-state', 'highlight'], false],
+              2.5,
+              5,
+            ],
+            'circle-color': ['case',
+              ['boolean', ['feature-state', 'highlight'], false],
+              'white',
+              ['boolean', ['feature-state', 'hover'], false],
+              this.featureHoverColor,
+              ['boolean', ['feature-state', 'visited'], false],
+              this.visitedColor,
+              'transparent',
+            ],
+            'circle-stroke-width': ['case',
+              ['boolean', ['feature-state', 'highlight'], false],
+              5,
+              ['boolean', ['feature-state', 'visited'], false],
+              1,
+              0,
+            ],
+            'circle-stroke-color': ['case',
+              ['boolean', ['feature-state', 'highlight'], false],
+              this.featureHighlightedColor,
+              ['boolean', ['feature-state', 'visited'], false],
+              'white',
+              'transparent',
+            ],
+          },
+          ...(this.isMVT ? { 'source-layer': this.vectorService.name } : {}), // if not MVT, this property is not needed
+        });
+    }
+
+    console.log(this._map.getStyle().layers);
+    
 
     if (!this.eventPopupAdded) {
       // Manage the cursor and feature state for point-features layer when mouse events
@@ -519,21 +530,77 @@ export class MapService {
     }
   }
 
+  /*
+  * When the search value has been changed, we add a text expression
+  * that filters the features containing this text value in one of its properties.
+  * If there is a match we:
+  * - decrease the opacity for the raster layer (WMS) which displays all the features
+  * - show the found features from our data layer (WMT or GeoJSON)
+  */
   filterBySearchValue(searchValue: string, properties: string[]) {
 
     const filters = [];
     if (searchValue) {
+
+      // Add the "in" expression (look for substring in string). To make it case insensitive, set 
+      // both the text value and the property value to uppercase.
       properties.forEach((property) => {
         filters.push(['in', ['upcase', searchValue], ['upcase', ['get', property]]]);
       });
-      this._map.setFilter('point-features', ['any', ...filters]);
-      this._map.setPaintProperty('point-features', 'circle-color', 'coral');
+      console.log(this._map.getLayer('point-features'));
+      console.log(this._map.getLayer('line-features'));
+
+      // For each type layer if exists (point, line, polyon), add this filter and set a color to replace transparent
+      if (this._map.getLayer('point-features')) {
+        console.log('layer exists');
+
+        this._map.setFilter('point-features', ['any', ...filters]);
+        this.paintPropertyForLayer('point-features', 'Point', this.featureColor);
+      }
+
+      if (this._map.getLayer('line-features')) {
+        this._map.setFilter('line-features', ['any', ...filters]);
+        this.paintPropertyForLayer('line-features', 'Line', this.featureColor);
+      }
+
+      if (this._map.getLayer('polygon-features')) {
+        this._map.setFilter('polygon-features', ['any', ...filters]);
+        this.paintPropertyForLayer('polygon-features', 'Polygon', this.featureColor);
+      }
+
       this._map.setPaintProperty('wms-layer', 'raster-opacity', 0.5);
     } else {
-      this._map.setFilter('point-features', null);
+      // If value is empty, remove the filter and set the opacity for the raster layer back to 1.
+      if (this._map.getLayer('point-features')) {
+        this._map.setFilter('point-features', null);
+        this.paintPropertyForLayer('point-features', 'Point', 'transparent');
+      }
+
+      if (this._map.getLayer('line-features')) {
+        this._map.setFilter('line-features', null);
+        this.paintPropertyForLayer('line-features', 'Line', 'transparent');
+      }
+
+      if (this._map.getLayer('polygon-features')) {
+        this._map.setFilter('polygon-features', null);
+        this.paintPropertyForLayer('polygon-features', 'Polygon', 'transparent');
+      }
       this._map.setPaintProperty('wms-layer', 'raster-opacity', 1);
-      this._map.setPaintProperty('point-features', 'circle-color', 'transparent');
+    }
+  }
 
+  private paintPropertyForLayer(layerId: string, type: string, color: string) {
+    console.log('paint property');
+    console.log(type);
+
+    if (type === 'Point') {
+      this._map.setPaintProperty(layerId, 'circle-color', color);
+    } else if (type === 'Line') {
+      console.log('add line color');
+      
+      this._map.setPaintProperty(layerId, 'line-color', color);
+    } else if (type === 'Polygon') {
+      this._map.setPaintProperty(layerId, 'fill-color', color);
     }
   }