For the search value filter in map, use only the setPaintProperty() with...

For the search value filter in map, use only the setPaintProperty() with expression (not the setFilter())

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

@@ -18,7 +18,6 @@ export class MapService {
   private url: string;
   selectedBaseLayer: any;
   mapOptions: MapOptions;
-  searchFilterApplied: boolean = false;
 
   eventPopupAdded = false;
   mapIsConstructed: boolean = false;
@@ -36,14 +35,22 @@ export class MapService {
   private _errorSubscription: Subscription;
 
   selectedFeature; // Contains the gid of the selected feature
-  totalData: number;
 
   // Properties used to send information to the component
   // about the features state (need to update or not)
   private _mapToUpdate = new Subject<any>();
-  private _mapUpdated = new Subject<any>();
   private _featureSelected = new Subject<mapboxgl.MapboxGeoJSONFeature>();
 
+  private COLOR_EXPRESSION = ['case',
+    ['boolean', ['feature-state', 'highlight'], false],
+    this.featureHighlightedColor,
+    ['boolean', ['feature-state', 'hover'], false],
+    this.featureHoverColor,
+    ['boolean', ['feature-state', 'visited'], false],
+    this.visitedColor,
+    'transparent',
+  ];
+
   constructor(
     private _notificationService: NotificationService,
   ) { }
@@ -52,19 +59,13 @@ export class MapService {
     mapOptions: MapOptions,
     url: string, baseLayer: any, options?: mapboxgl.MapboxOptions): mapboxgl.Map {
     this.mapOptions = mapOptions;
-    // this.vectorService = mapOptions.vectorService;
-    // this.rasterService = mapOptions.rasterService;
-    // this.geojson = mapOptions.geojson as GeoJSON.FeatureCollection;
-    // this.isMVT = mapOptions.isMVT;
-    // this.mvtUrl = mapOptions.mvtUrl;
-    // this.dataType = mapOptions.dataType;
+    this.url = url;
 
     // Reset to false in ordre to set event listener
     this.eventPopupAdded = false;
 
     this.selectedBaseLayer = baseLayer;
 
-    this.url = url;
     options.transformRequest = (url, resourceType) => {
       if (resourceType === 'Tile' && url.startsWith(this.mapOptions.mvtUrl)) {
         return {
@@ -100,13 +101,6 @@ export class MapService {
       );
     });
 
-    this._map.on('load', () => {
-
-      if (this._map.isSourceLoaded) {
-        this._mapUpdated.next(this.totalData);
-      }
-    });
-
     this._mapSubject.next();
 
     this.mapIsConstructed = true;
@@ -143,19 +137,6 @@ export class MapService {
         }
       }
     }
-
-    this._map.on('styledata', () => {
-      if (this._map.getFilter('data-layer') && !this.searchFilterApplied) {
-        this._map.setFilter('data-layer', null);
-      }
-    });
-
-    this._map.on('sourcedata', (event) => {
-      if (this._map.getFilter('data-layer') && this.searchFilterApplied) {
-        this.paintPropertyForLayer('data-layer', this.mapOptions.dataType, this.featureColor);
-        this._map.setPaintProperty('wms-layer', 'raster-opacity', 0.5);
-      }
-    });
   }
 
   addClickEventOnLayer(layer: string) {
@@ -253,15 +234,7 @@ export class MapService {
       layerOptions = {
         type: 'fill',
         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-color': this.COLOR_EXPRESSION,
           'fill-opacity': 0.7,
           'fill-outline-color': ['case',
             ['boolean', ['feature-state', 'visited'], false],
@@ -276,15 +249,7 @@ export class MapService {
       layerOptions = {
         type: 'line',
         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-color': this.COLOR_EXPRESSION,
           'line-width': [
             'interpolate', ['linear'], ['zoom'],
             9, 2,
@@ -305,15 +270,7 @@ export class MapService {
             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-color': this.COLOR_EXPRESSION,
           'circle-stroke-width': ['case',
             ['boolean', ['feature-state', 'highlight'], false],
             5,
@@ -504,27 +461,31 @@ export class MapService {
       // 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]]]);
+        filters.push(['in', ['upcase', searchValue], ['upcase', ['to-string', ['get', property]]]]);
       });
 
       // For each type layer if exists (point, line, polyon), add this filter and set a color to replace transparent
-      this._map.setFilter('data-layer', ['any', ...filters]);
-      this.searchFilterApplied = true;
+      const copyColor = [...this.COLOR_EXPRESSION]
+      copyColor.splice(copyColor.length - 1, 0, ['any', ...filters], 'green');
+
+      this.paintPropertyForLayer('data-layer', this.mapOptions.dataType, copyColor);
+      this._map.setPaintProperty('wms-layer', 'raster-opacity', 0.5);
+
     } else {
       // If value is empty, remove the filter and set the opacity for the raster layer back to 1.
-      this.searchFilterApplied = false;
-      this.paintPropertyForLayer('data-layer', this.mapOptions.dataType, 'transparent');
+      this.paintPropertyForLayer('data-layer', this.mapOptions.dataType, this.COLOR_EXPRESSION);
       this._map.setPaintProperty('wms-layer', 'raster-opacity', 1);
+
     }
   }
 
-  private paintPropertyForLayer(layerId: string, type: DataType, color: string) {
+  private paintPropertyForLayer(layerId: string, type: DataType, expression: any) {
     if (type.isPunctual) {
-      this._map.setPaintProperty(layerId, 'circle-color', color);
+      this._map.setPaintProperty(layerId, 'circle-color', expression);
     } else if (type.isLinear) {
-      this._map.setPaintProperty(layerId, 'line-color', color);
+      this._map.setPaintProperty(layerId, 'line-color', expression);
     } else if (type.isAreal) {
-      this._map.setPaintProperty(layerId, 'fill-color', color);
+      this._map.setPaintProperty(layerId, 'fill-color', expression);
     }
   }
 
@@ -547,10 +508,6 @@ export class MapService {
     return this._mapToUpdate.asObservable();
   }
 
-  get mapUpdated$(): Observable<number> {
-    return this._mapUpdated.asObservable();
-  }
-
   get featureSelected$(): Observable<any> {
     return this._featureSelected.asObservable();
   }