Commit b6d78546 authored by ext.sopra.ncastejon's avatar ext.sopra.ncastejon
Browse files

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())
parent bc00b495
......@@ -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();
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment