From fbe434230ba92670d8a9d2acf9df51118a93e9fd Mon Sep 17 00:00:00 2001
From: "ext.sopra.ncastejon" <castejon.nicolas@gmail.com>
Date: Wed, 15 Jan 2020 16:57:59 +0100
Subject: [PATCH] For the search value filter in map, use only the
setPaintProperty() with expression (not the setFilter())
---
src/app/map/services/map.service.ts | 97 ++++++++---------------------
1 file changed, 27 insertions(+), 70 deletions(-)
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index b20fad31..1e8f760a 100644
--- a/src/app/map/services/map.service.ts
+++ b/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();
}
--
GitLab