Skip to content

GitLab

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

Remove interaction for features not selected by the search.

parent 3e0645e5
Pipeline #3841 passed with stage
in 4 minutes and 45 seconds
Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ d0321325
......@@ -2021,7 +2021,6 @@
"@babel/helper-plugin-utils": "^7.8.3"
}
},
<<<<<<< HEAD
"@babel/plugin-transform-literals": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.8.3.tgz",
......@@ -2035,12 +2034,6 @@
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.8.3.tgz",
"integrity": "sha512-3Wk2EXhnw+rP+IDkK6BdtPKsUE5IeZ6QOGrPYvw52NwBStw9V1ZVzxgK6fSKSxqUvH9eQPR3tm3cOq79HlsKYA==",
=======
"@types/mapbox-gl": {
"version": "1.6.2",
"resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-1.6.2.tgz",
"integrity": "sha512-xDRNZhiqleCJuYPzXpp5UUcJzhiKTalKFVTr49I50gyo81qBNMErWeJRZJFjHd05U0onIdDFuX44TGpoVpJhXA==",
>>>>>>> Add a search filter for the map features (only for type points currently).
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.8.3"
......@@ -2724,9 +2717,9 @@
"dev": true
},
"@types/mapbox-gl": {
"version": "0.54.1",
"resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-0.54.1.tgz",
"integrity": "sha512-qRsv6e0KYxJPAjqaxOWFSFm+U5tPBk2EmIxg0wgr1ffoB0sJ5hfnWnljO/XXQjHZrZzXfbf2P1jsDK2zrrq9dA==",
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-1.7.0.tgz",
"integrity": "sha512-XMri+Sumi1Np6p5hCpC76hA+gLU1R9fyFmDaTMZbxVODW5hvo3wjI0+ep3K8Ra1R/5A7IFxidJqonUtYwzZdFA==",
"dev": true,
"requires": {
"@types/geojson": "*"
......@@ -4465,18 +4458,11 @@
"safe-buffer": "5.1.2"
}
},
<<<<<<< HEAD
"content-type": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
"integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
"dev": true
=======
"earcut": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.1.tgz",
"integrity": "sha512-5jIMi2RB3HtGPHcYd9Yyl0cczo84y+48lgKPxMijliNQaKAHEZJbdzLmKmdxG/mCdS/YD9DQ1gihL8mxzR0F9w=="
>>>>>>> Add a search filter for the map features (only for type points currently).
},
"convert-source-map": {
"version": "1.7.0",
......@@ -4847,18 +4833,11 @@
"assert-plus": "^1.0.0"
}
},
<<<<<<< HEAD
"date-format": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/date-format/-/date-format-2.1.0.tgz",
"integrity": "sha512-bYQuGLeFxhkxNOF3rcMtiZxvCBAquGzZm6oWA1oZ0g2THUzivaRhv8uOhdr19LmoobSOLoIAxeUK2RdbM8IFTA==",
"dev": true
=======
"esprima": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz",
"integrity": "sha1-n1V+CPw7TSbs6d00+Pv0drYlha0="
>>>>>>> Add a search filter for the map features (only for type points currently).
},
"debug": {
"version": "2.6.9",
......@@ -5208,11 +5187,6 @@
"stream-shift": "^1.0.0"
}
},
"earcut": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/earcut/-/earcut-2.1.5.tgz",
"integrity": "sha512-QFWC7ywTVLtvRAJTVp8ugsuuGQ5mVqNmJ1cRYeLrSHgP3nycr2RHTJob9OtM0v8ujuoKN0NY1a93J/omeTL1PA=="
},
"ecc-jsbn": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
......@@ -5478,11 +5452,6 @@
"estraverse": "^4.1.1"
}
},
"esm": {
"version": "3.0.84",
"resolved": "https://registry.npmjs.org/esm/-/esm-3.0.84.tgz",
"integrity": "sha512-SzSGoZc17S7P+12R9cg21Bdb7eybX25RnIeRZ80xZs+VZ3kdQKzqTp2k4hZJjR7p9l0186TTXSgrxzlMDBktlw=="
},
"esprima": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz",
......@@ -7921,6 +7890,13 @@
"supercluster": "^7.0.0",
"tinyqueue": "^2.0.0",
"vt-pbf": "^3.1.1"
},
"dependencies": {
"earcut": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.2.tgz",
"integrity": "sha512-eZoZPPJcUHnfRZ0PjLvx2qBordSiO8ofC3vt+qACLM95u+4DovnbYNpQtJh0DNsWj8RnxrQytD4WA8gj5cRIaQ=="
}
}
},
"md5.js": {
......
src/app/dataset-detail/components/dataset-detail/dataset-detail.component.scss
View file @ d0321325
......@@ -10,6 +10,17 @@
}
}
.dataset-detail-container {
height: 100%;
display: flex;
flex-direction: column;
}
.details-container {
height: 100%;
flex: 1;
}
svg.tab-icon {
margin: 0 0.625rem 0 0.625rem;
width: 2.25rem;
......
src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss
View file @ d0321325
......@@ -3,6 +3,7 @@
.downloads-container {
position: relative;
height: 100%;
@media screen and (min-width: $tablet) {
max-width: unset;
......
src/app/map/services/map.service.ts
View file @ d0321325
......@@ -7,7 +7,7 @@ import { notificationMessages } from '../../../i18n/traductions.fr';
import { Notification } from '../../core/models';
import { NotificationService } from '../../core/services';
import { APP_CONFIG } from '../../core/services/app-config.service';
import { DataType, MapOptions } from '../models/map-options';
import { MapOptions } from '../models/map-options';
@Injectable()
export class MapService {
......@@ -38,13 +38,9 @@ export class MapService {
private _mapToUpdate = 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,
'transparent',
];
// Mapbox expression. Is set differently depending the data type (circle, fill, line)
private paintExpression = {};
private paintColorPropertyName = '';
constructor(
private _notificationService: NotificationService,
......@@ -108,6 +104,7 @@ export class MapService {
// - a WMS layer to display the visual part of the features (WMS service send a png or jpeg)
// - a data layer, created from a geojson or an MVT service. It is used for the features interaction (hover, click)
addLayers() {
this.addWMSLayer();
// Add the 3d source. Constructed with MVT tiles from the 'fpc_fond_plan_communaut.fpctoit' dataset
......@@ -234,58 +231,92 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
// Add the data layer (from geojson or MVT)
addDataLayer() {
let layerOptions = {};
// Set the paint options depending the geometry type
// For 'Polygon' and 'MultiPolygon' features
if (this.mapOptions.dataType.isAreal) {
this.paintExpression = {
'fill-color': ['case',
['boolean', ['feature-state', 'highlight'], false],
this.featureHighlightedColor,
['boolean', ['feature-state', 'hover'], false],
this.featureHoverColor,
'transparent',
],
'fill-opacity': 0.7,
'fill-outline-color': 'transparent',
};
this.paintColorPropertyName = 'fill-color';
layerOptions = {
type: 'fill',
paint: {
'fill-color': this.COLOR_EXPRESSION,
'fill-opacity': 0.7,
'fill-outline-color': 'transparent',
},
paint: this.paintExpression,
};
}
// For 'Line' and 'MultiLine' features
if (this.mapOptions.dataType.isLinear) {
this.paintExpression = {
'line-color': ['case',
['boolean', ['feature-state', 'highlight'], false],
this.featureHighlightedColor,
['boolean', ['feature-state', 'hover'], false],
this.featureHoverColor,
'transparent',
],
'line-width': [
'interpolate', ['linear'], ['zoom'],
12, 2,
13, 4,
],
'line-opacity': 0.8,
};
this.paintColorPropertyName = 'line-color';
layerOptions = {
type: 'line',
paint: {
'line-color': this.COLOR_EXPRESSION,
'line-width': [
'interpolate', ['linear'], ['zoom'],
9, 2,
13, 4,
],
},
paint: this.paintExpression,
};
}
// For "Point" features
if (this.mapOptions.dataType.isPunctual) {
// Set the color expression
this.paintExpression = {
'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,
'transparent',
],
'circle-stroke-width': ['case',
['boolean', ['feature-state', 'highlight'], false],
5,
0,
],
'circle-stroke-color': ['case',
['boolean', ['feature-state', 'highlight'], false],
this.featureHighlightedColor,
['boolean', ['feature-state', 'visited'], false],
'white',
'transparent',
],
};
this.paintColorPropertyName = 'circle-color';
layerOptions = {
type: 'circle',
paint: {
'circle-radius': ['case',
['boolean', ['feature-state', 'highlight'], false],
2.5,
5,
],
'circle-color': this.COLOR_EXPRESSION,
'circle-stroke-width': ['case',
['boolean', ['feature-state', 'highlight'], false],
5,
0,
],
'circle-stroke-color': ['case',
['boolean', ['feature-state', 'highlight'], false],
this.featureHighlightedColor,
'transparent',
],
},
paint: this.paintExpression,
};
}
......@@ -475,30 +506,22 @@ fpc_fond_plan_communaut.fpctoit&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}
// Once this search filter expression is done, we add it to the existing paint options (for hover, selected)
// of the data-layer
const copyPaintOptions = [...this.COLOR_EXPRESSION];
copyPaintOptions.splice(copyPaintOptions.length - 1, 0, ['all', ...anyFilter], 'green');
const copyPaintOptions = [... this._map.getPaintProperty('data-layer', this.paintColorPropertyName)];
copyPaintOptions.splice(copyPaintOptions.length - 1, 0, ['all', ...anyFilter], this.featureHighlightedColor);
this.paintPropertyForLayer('data-layer', this.mapOptions.dataType, copyPaintOptions);
this._map.setPaintProperty('wms-layer', 'raster-opacity', 0.5);
this._map.setFilter('data-layer', ['all', ...anyFilter]);
this._map.setPaintProperty('data-layer', this.paintColorPropertyName, copyPaintOptions);
this._map.setPaintProperty('wms-layer', 'raster-opacity', 0.3);
} else {
// If value is empty, remove the search expression and set the opacity for the raster layer back to 1.
this.paintPropertyForLayer('data-layer', this.mapOptions.dataType, this.COLOR_EXPRESSION);
this._map.setFilter('data-layer', null);
this._map.setPaintProperty('data-layer', this.paintColorPropertyName, this.paintExpression[this.paintColorPropertyName]);
this._map.setPaintProperty('wms-layer', 'raster-opacity', 1);
}
}
private paintPropertyForLayer(layerId: string, type: DataType, expression: any) {
if (type.isPunctual) {
this._map.setPaintProperty(layerId, 'circle-color', expression);
} else if (type.isLinear) {
this._map.setPaintProperty(layerId, 'line-color', expression);
} else if (type.isAreal) {
this._map.setPaintProperty(layerId, 'fill-color', expression);
}
}
get map$(): Observable<void> {
return this._mapSubject.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