From 423a200ce280b991851163f0f50b8719ed1a8948 Mon Sep 17 00:00:00 2001
From: "ext.sopra.ncastejon" <castejon.nicolas@gmail.com>
Date: Mon, 13 Jan 2020 16:43:09 +0100
Subject: [PATCH] Add a search filter for the map features (only for type
points currently).
---
package-lock.json | 52 +++++++++++++------
package.json | 6 +--
.../dataset-map/dataset-map.component.ts | 3 ++
src/app/map/services/map.service.ts | 20 ++++++-
4 files changed, 61 insertions(+), 20 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 3219addd..cc9f32a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2021,6 +2021,7 @@
"@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",
@@ -2034,6 +2035,12 @@
"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"
@@ -4458,11 +4465,18 @@
"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",
@@ -4833,11 +4847,18 @@
"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",
@@ -6157,9 +6178,9 @@
}
},
"gl-matrix": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.0.0.tgz",
- "integrity": "sha512-PD4mVH/C/Zs64kOozeFnKY8ybhgwxXXQYGWdB4h68krAHknWJgk9uKOn6z8YElh5//vs++90pb6csrTIDWnexA=="
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.1.0.tgz",
+ "integrity": "sha512-526NA+3EA+ztAQi0IZpSWiM0fyQXIp7IbRvfJ4wS/TjjQD0uv0fVybXwwqqSOlq33UckivI0yMDlVtboWm3k7A=="
},
"glob": {
"version": "7.1.3",
@@ -7873,9 +7894,9 @@
}
},
"mapbox-gl": {
- "version": "0.54.1",
- "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-0.54.1.tgz",
- "integrity": "sha512-HtY+HobYTHTsFOJ3buTHtNvZv/Tjfp0vararhEWCjI7wQq8XxK16sEpsXucokrAhuu94js4KJylo13bKJx6l0Q==",
+ "version": "1.6.1",
+ "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.6.1.tgz",
+ "integrity": "sha512-qUvu8c/WX0woSLj8M64eK8351th4RI2+grGJ0ZlFb5ELEJNTb4SqMX/4uxRkb5d1euh2U72+AML1QOZjQnUPUw==",
"requires": {
"@mapbox/geojson-rewind": "^0.4.0",
"@mapbox/geojson-types": "^1.0.2",
@@ -7887,18 +7908,17 @@
"@mapbox/vector-tile": "^1.3.1",
"@mapbox/whoots-js": "^3.1.0",
"csscolorparser": "~1.0.2",
- "earcut": "^2.1.5",
- "esm": "~3.0.84",
+ "earcut": "^2.2.0",
"geojson-vt": "^3.2.1",
"gl-matrix": "^3.0.0",
"grid-index": "^1.1.0",
"minimist": "0.0.8",
"murmurhash-js": "^1.0.0",
- "pbf": "^3.0.5",
+ "pbf": "^3.2.1",
"potpack": "^1.0.1",
"quickselect": "^2.0.0",
"rw": "^1.3.3",
- "supercluster": "^6.0.1",
+ "supercluster": "^7.0.0",
"tinyqueue": "^2.0.0",
"vt-pbf": "^3.1.1"
}
@@ -9115,9 +9135,9 @@
}
},
"pbf": {
- "version": "3.2.0",
- "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.0.tgz",
- "integrity": "sha512-98Eh7rsJNJF/Im6XYMLaOW3cLnNyedlOd6hu3iWMD5I7FZGgpw8yN3vQBrmLbLodu7G784Irb9Qsv2yFrxSAGw==",
+ "version": "3.2.1",
+ "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+ "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
"requires": {
"ieee754": "^1.1.12",
"resolve-protobuf-schema": "^2.1.0"
@@ -11316,9 +11336,9 @@
}
},
"supercluster": {
- "version": "6.0.2",
- "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-6.0.2.tgz",
- "integrity": "sha512-aa0v2HURjBTOpbcknilcfxGDuArM8khklKSmZ/T8ZXL0BuRwb5aRw95lz+2bmWpFvCXDX/+FzqHxmg0TIaJErw==",
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.0.0.tgz",
+ "integrity": "sha512-8VuHI8ynylYQj7Qf6PBMWy1PdgsnBiIxujOgc9Z83QvJ8ualIYWNx2iMKyKeC4DZI5ntD9tz/CIwwZvIelixsA==",
"requires": {
"kdbush": "^3.0.0"
}
diff --git a/package.json b/package.json
index 03bb5cd1..13a3c6a3 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
"hamburgers": "^1.1.3",
"jwt-decode": "^2.2.0",
"lodash.clonedeep": "^4.5.0",
- "mapbox-gl": "^0.54.1",
+ "mapbox-gl": "^1.6.0",
"ng-inline-svg": "^8.2.1",
"ng-lazyload-image": "^5.1.2",
"ngx-cookie-service": "^2.2.0",
@@ -62,8 +62,8 @@
"@types/jasmine": "^2.8.12",
"@types/jasminewd2": "^2.0.6",
"@types/jwt-decode": "^2.2.1",
- "@types/mapbox-gl": "^0.54.1",
- "@types/node": "^6.14.9",
+ "@types/mapbox-gl": "^1.6.0",
+ "@types/node": "^6.14.2",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
diff --git a/src/app/dataset-detail/components/dataset-map/dataset-map.component.ts b/src/app/dataset-detail/components/dataset-map/dataset-map.component.ts
index 64037169..0d9fce6a 100644
--- a/src/app/dataset-detail/components/dataset-map/dataset-map.component.ts
+++ b/src/app/dataset-detail/components/dataset-map/dataset-map.component.ts
@@ -56,6 +56,9 @@ export class DatasetMapComponent implements OnInit, OnDestroy {
this._mapService.featureSelected$.subscribe((feature: mapboxgl.MapboxGeoJSONFeature) => {
this.featureClicked.next(feature);
}),
+ this._datasetDetailService.datasetDataSearchChanged$.subscribe((searchValue) => {
+ this._mapService.filterBySearchValue(searchValue, this._datasetDetailService.dataset.fields.list);
+ }),
);
this.isSample = this._datasetDetailService.dataset.editorialMetadata.isSample;
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index 3c2d39f2..62df94fe 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -98,7 +98,7 @@ export class MapService {
// Subscribe to the error observable and send a notification
this._errorSubscription = errorObservable.subscribe((v) => {
- // console.log(v);
+ console.log(v);
this._notificationService.notify(
new Notification({
message: notificationMessages.geosource.mapError,
@@ -519,6 +519,24 @@ export class MapService {
}
}
+ filterBySearchValue(searchValue: string, properties: string[]) {
+
+ const filters = [];
+ if (searchValue) {
+ 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');
+ this._map.setPaintProperty('wms-layer', 'raster-opacity', 0.5);
+ } else {
+ this._map.setFilter('point-features', null);
+ this._map.setPaintProperty('wms-layer', 'raster-opacity', 1);
+ this._map.setPaintProperty('point-features', 'circle-color', 'transparent');
+
+ }
+ }
+
get map$(): Observable<void> {
return this._mapSubject.asObservable();
}
--
GitLab