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

Add search filter for line and polygon.

parent 423a200c
......@@ -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
......
......@@ -6,6 +6,7 @@ export interface MapOptions {
isMVT: boolean;
mvtUrl?: string;
geojson? : {};
dataType: string;
}
export interface GeoService {
......
......@@ -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);
}
}
......
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