Skip to content
Snippets Groups Projects
Commit fbe43423 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 9a4f9fbe
No related branches found
No related tags found
No related merge requests found
...@@ -18,7 +18,6 @@ export class MapService { ...@@ -18,7 +18,6 @@ export class MapService {
private url: string; private url: string;
selectedBaseLayer: any; selectedBaseLayer: any;
mapOptions: MapOptions; mapOptions: MapOptions;
searchFilterApplied: boolean = false;
eventPopupAdded = false; eventPopupAdded = false;
mapIsConstructed: boolean = false; mapIsConstructed: boolean = false;
...@@ -36,14 +35,22 @@ export class MapService { ...@@ -36,14 +35,22 @@ export class MapService {
private _errorSubscription: Subscription; private _errorSubscription: Subscription;
selectedFeature; // Contains the gid of the selected feature selectedFeature; // Contains the gid of the selected feature
totalData: number;
// Properties used to send information to the component // Properties used to send information to the component
// about the features state (need to update or not) // about the features state (need to update or not)
private _mapToUpdate = new Subject<any>(); private _mapToUpdate = new Subject<any>();
private _mapUpdated = new Subject<any>();
private _featureSelected = new Subject<mapboxgl.MapboxGeoJSONFeature>(); 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( constructor(
private _notificationService: NotificationService, private _notificationService: NotificationService,
) { } ) { }
...@@ -52,19 +59,13 @@ export class MapService { ...@@ -52,19 +59,13 @@ export class MapService {
mapOptions: MapOptions, mapOptions: MapOptions,
url: string, baseLayer: any, options?: mapboxgl.MapboxOptions): mapboxgl.Map { url: string, baseLayer: any, options?: mapboxgl.MapboxOptions): mapboxgl.Map {
this.mapOptions = mapOptions; this.mapOptions = mapOptions;
// this.vectorService = mapOptions.vectorService; this.url = url;
// this.rasterService = mapOptions.rasterService;
// 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 // Reset to false in ordre to set event listener
this.eventPopupAdded = false; this.eventPopupAdded = false;
this.selectedBaseLayer = baseLayer; this.selectedBaseLayer = baseLayer;
this.url = url;
options.transformRequest = (url, resourceType) => { options.transformRequest = (url, resourceType) => {
if (resourceType === 'Tile' && url.startsWith(this.mapOptions.mvtUrl)) { if (resourceType === 'Tile' && url.startsWith(this.mapOptions.mvtUrl)) {
return { return {
...@@ -100,13 +101,6 @@ export class MapService { ...@@ -100,13 +101,6 @@ export class MapService {
); );
}); });
this._map.on('load', () => {
if (this._map.isSourceLoaded) {
this._mapUpdated.next(this.totalData);
}
});
this._mapSubject.next(); this._mapSubject.next();
this.mapIsConstructed = true; this.mapIsConstructed = true;
...@@ -143,19 +137,6 @@ export class MapService { ...@@ -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) { addClickEventOnLayer(layer: string) {
...@@ -253,15 +234,7 @@ export class MapService { ...@@ -253,15 +234,7 @@ export class MapService {
layerOptions = { layerOptions = {
type: 'fill', type: 'fill',
paint: { paint: {
'fill-color': ['case', 'fill-color': this.COLOR_EXPRESSION,
['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-opacity': 0.7,
'fill-outline-color': ['case', 'fill-outline-color': ['case',
['boolean', ['feature-state', 'visited'], false], ['boolean', ['feature-state', 'visited'], false],
...@@ -276,15 +249,7 @@ export class MapService { ...@@ -276,15 +249,7 @@ export class MapService {
layerOptions = { layerOptions = {
type: 'line', type: 'line',
paint: { paint: {
'line-color': ['case', 'line-color': this.COLOR_EXPRESSION,
['boolean', ['feature-state', 'highlight'], false],
this.featureHighlightedColor,
['boolean', ['feature-state', 'hover'], false],
this.featureHoverColor,
['boolean', ['feature-state', 'visited'], false],
this.visitedColor,
'transparent',
],
'line-width': [ 'line-width': [
'interpolate', ['linear'], ['zoom'], 'interpolate', ['linear'], ['zoom'],
9, 2, 9, 2,
...@@ -305,15 +270,7 @@ export class MapService { ...@@ -305,15 +270,7 @@ export class MapService {
2.5, 2.5,
5, 5,
], ],
'circle-color': ['case', 'circle-color': this.COLOR_EXPRESSION,
['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', 'circle-stroke-width': ['case',
['boolean', ['feature-state', 'highlight'], false], ['boolean', ['feature-state', 'highlight'], false],
5, 5,
...@@ -504,27 +461,31 @@ export class MapService { ...@@ -504,27 +461,31 @@ export class MapService {
// Add the "in" expression (look for substring in string). To make it case insensitive, set // 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. // both the text value and the property value to uppercase.
properties.forEach((property) => { 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 // 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]); const copyColor = [...this.COLOR_EXPRESSION]
this.searchFilterApplied = true; 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 { } else {
// If value is empty, remove the filter and set the opacity for the raster layer back to 1. // 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, this.COLOR_EXPRESSION);
this.paintPropertyForLayer('data-layer', this.mapOptions.dataType, 'transparent');
this._map.setPaintProperty('wms-layer', 'raster-opacity', 1); 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) { if (type.isPunctual) {
this._map.setPaintProperty(layerId, 'circle-color', color); this._map.setPaintProperty(layerId, 'circle-color', expression);
} else if (type.isLinear) { } else if (type.isLinear) {
this._map.setPaintProperty(layerId, 'line-color', color); this._map.setPaintProperty(layerId, 'line-color', expression);
} else if (type.isAreal) { } 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 { ...@@ -547,10 +508,6 @@ export class MapService {
return this._mapToUpdate.asObservable(); return this._mapToUpdate.asObservable();
} }
get mapUpdated$(): Observable<number> {
return this._mapUpdated.asObservable();
}
get featureSelected$(): Observable<any> { get featureSelected$(): Observable<any> {
return this._featureSelected.asObservable(); return this._featureSelected.asObservable();
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment