diff --git a/src/app/components/arlas-wui-root/arlas-wui-root.component.ts b/src/app/components/arlas-wui-root/arlas-wui-root.component.ts index 0cdb809d..fdf25545 100644 --- a/src/app/components/arlas-wui-root/arlas-wui-root.component.ts +++ b/src/app/components/arlas-wui-root/arlas-wui-root.component.ts @@ -465,403 +465,406 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy { } if (!!this.resultListConfigPerContId.get(c.identifier)) { if (!!this.resultListConfigPerContId.get(c.identifier).visualisationLink && !listActionsId.includes('visualize')) { - c.addAction({ id: 'visualize', label: 'Visualize', cssClass: '', tooltip: 'Visualize on the map' }); - } - if (!!this.resultListConfigPerContId.get(c.identifier).downloadLink && !listActionsId.includes('download')) { - c.addAction({ id: 'download', label: 'Download', cssClass: '', tooltip: 'Download' }); - } - } + c.addAction({ id: 'visualize', label: 'Visualize', cssClass: '', tooltip: 'Visualize on the map', reverseAction: { + id: 'dev', label: 'Remove from map', cssClass: '', tooltip: 'Remove from map' + } + } as any); + } + if (!!this.resultListConfigPerContId.get(c.identifier).downloadLink && !listActionsId.includes('download')) { + c.addAction({ id: 'download', label: 'Download', cssClass: '', tooltip: 'Download' }); + } + } - }); + }); this.declareResultlistExportCsv(); - // Check if the user can access process endpoint - const processSettings = this.arlasSettingsService.getProcessSettings(); - const externalNode = this.configService.getValue('arlas.web.externalNode'); - if ( - !!processSettings && !!processSettings.url - && !!externalNode && !!externalNode.download && externalNode.download === true - ) { - this.processService.check() - .pipe(takeUntil(this._onDestroy$)) - .subscribe({ - next: () => { - this.resultlistContributors.forEach(c => { - const listActionsId = c.actionToTriggerOnClick.map(a => a.id); - if (!listActionsId.includes('production')) { - c.addAction({ id: 'production', label: 'Download', cssClass: '', tooltip: 'Download' }); - const resultConfig = this.resultListConfigPerContId.get(c.identifier); - if (resultConfig) { - if (!resultConfig.globalActionsList) { - resultConfig.globalActionsList = []; - } - resultConfig.globalActionsList.push({ 'id': 'production', 'label': 'Download' }); - } - } - - }); +// Check if the user can access process endpoint +const processSettings = this.arlasSettingsService.getProcessSettings(); +const externalNode = this.configService.getValue('arlas.web.externalNode'); +if ( + !!processSettings && !!processSettings.url + && !!externalNode && !!externalNode.download && externalNode.download === true +) { + this.processService.check() + .pipe(takeUntil(this._onDestroy$)) + .subscribe({ + next: () => { + this.resultlistContributors.forEach(c => { + const listActionsId = c.actionToTriggerOnClick.map(a => a.id); + if (!listActionsId.includes('production')) { + c.addAction({ id: 'production', label: 'Download', cssClass: '', tooltip: 'Download' }); + const resultConfig = this.resultListConfigPerContId.get(c.identifier); + if (resultConfig) { + if (!resultConfig.globalActionsList) { + resultConfig.globalActionsList = []; } - }); - } + resultConfig.globalActionsList.push({ 'id': 'production', 'label': 'Download' }); + } + } - const selectedResultlistTab = this.getParamValue('rt'); - const previewListContrib = this.rightListContributors.find(r => r.getName() === decodeURI(selectedResultlistTab)); - if (previewListContrib) { - this.previewListContrib = previewListContrib; - } else { - this.previewListContrib = this.rightListContributors[0]; - } + }); } + }); +} - this.actionOnPopup - .pipe(takeUntil(this._onDestroy$)) - .subscribe(data => { - const collection = data.action.collection; - const mapContributor = this.mapglContributors.filter(m => m.collection === collection)[0]; - const listContributor = this.resultlistContributors.filter(m => m.collection === collection)[0]; - this.actionOnItemEvent(data, mapContributor, listContributor, collection); - }); +const selectedResultlistTab = this.getParamValue('rt'); +const previewListContrib = this.rightListContributors.find(r => r.getName() === decodeURI(selectedResultlistTab)); +if (previewListContrib) { + this.previewListContrib = previewListContrib; +} else { + this.previewListContrib = this.rightListContributors[0]; +} + } - if (this.allowMapExtend) { - const extendValue = this.getParamValue(this.MAP_EXTEND_PARAM); - if (extendValue) { - const stringBounds = extendValue.split(','); - if (stringBounds.length === 4) { - this.mapBounds = new mapboxgl.LngLatBounds( - new mapboxgl.LngLat(+stringBounds[0], +stringBounds[1]), - new mapboxgl.LngLat(+stringBounds[2], +stringBounds[3]) - ); - } +this.actionOnPopup + .pipe(takeUntil(this._onDestroy$)) + .subscribe(data => { + const collection = data.action.collection; + const mapContributor = this.mapglContributors.filter(m => m.collection === collection)[0]; + const listContributor = this.resultlistContributors.filter(m => m.collection === collection)[0]; + this.actionOnItemEvent(data, mapContributor, listContributor, collection); + }); + +if (this.allowMapExtend) { + const extendValue = this.getParamValue(this.MAP_EXTEND_PARAM); + if (extendValue) { + const stringBounds = extendValue.split(','); + if (stringBounds.length === 4) { + this.mapBounds = new mapboxgl.LngLatBounds( + new mapboxgl.LngLat(+stringBounds[0], +stringBounds[1]), + new mapboxgl.LngLat(+stringBounds[2], +stringBounds[3]) + ); + } + } +} +this.collections = [...new Set(Array.from(this.collaborativeService.registry.values()).map(c => c.collection))]; +zip(...this.collections.map(c => this.collaborativeService.describe(c))) + .pipe(takeUntil(this._onDestroy$)) + .subscribe(cdrs => { + cdrs.forEach(cdr => { + this.collectionToDescription.set(cdr.collection_name, cdr.params); + }); + const bounds = (this.mapglComponent.map)?.getBounds(); + if (!!bounds) { + (this.mapglComponent.map).fitBounds(bounds, { duration: 0 }); + } + if (this.resultlistContributors.length > 0) { + this.resultlistContributors.forEach(c => c.sort = this.collectionToDescription.get(c.collection).id_path); + } + this.mapglContributors.forEach(mapContrib => { + mapContrib.colorGenerator = this.colorService.colorGenerator; + if (!!this.resultlistContributors) { + const resultlistContrbutor: ResultListContributor = this.resultlistContributors + .find(resultlistContrib => resultlistContrib.collection === mapContrib.collection); + if (!!resultlistContrbutor) { + mapContrib.searchSize = resultlistContrbutor.pageSize; + mapContrib.searchSort = resultlistContrbutor.sort; + } else { + mapContrib.searchSize = 50; } } - this.collections = [...new Set(Array.from(this.collaborativeService.registry.values()).map(c => c.collection))]; - zip(...this.collections.map(c => this.collaborativeService.describe(c))) - .pipe(takeUntil(this._onDestroy$)) - .subscribe(cdrs => { - cdrs.forEach(cdr => { - this.collectionToDescription.set(cdr.collection_name, cdr.params); - }); - const bounds = (this.mapglComponent.map)?.getBounds(); - if (!!bounds) { - (this.mapglComponent.map).fitBounds(bounds, { duration: 0 }); - } - if (this.resultlistContributors.length > 0) { - this.resultlistContributors.forEach(c => c.sort = this.collectionToDescription.get(c.collection).id_path); - } - this.mapglContributors.forEach(mapContrib => { - mapContrib.colorGenerator = this.colorService.colorGenerator; - if (!!this.resultlistContributors) { - const resultlistContrbutor: ResultListContributor = this.resultlistContributors - .find(resultlistContrib => resultlistContrib.collection === mapContrib.collection); - if (!!resultlistContrbutor) { - mapContrib.searchSize = resultlistContrbutor.pageSize; - mapContrib.searchSort = resultlistContrbutor.sort; - } else { - mapContrib.searchSize = 50; - } + }); + }); + +this.shortcuts = this.arlasStartUpService.filtersShortcuts; + +this.collaborativeService.ongoingSubscribe + .pipe(takeUntil(this._onDestroy$)) + .subscribe(() => { + if (this.collaborativeService.totalSubscribe === 0) { + // Check for all contributor in the extra if there is a collab + this.extraShortcutsFiltered = 0; + this.extraShortcuts.map(conf => conf.component?.contributorId).forEach( + contribId => { + if (contribId) { + const collaboration = this.collaborativeService.getCollaboration(contribId); + if (collaboration) { + this.extraShortcutsFiltered += 1; } - }); - }); - - this.shortcuts = this.arlasStartUpService.filtersShortcuts; - - this.collaborativeService.ongoingSubscribe - .pipe(takeUntil(this._onDestroy$)) - .subscribe(() => { - if (this.collaborativeService.totalSubscribe === 0) { - // Check for all contributor in the extra if there is a collab - this.extraShortcutsFiltered = 0; - this.extraShortcuts.map(conf => conf.component?.contributorId).forEach( - contribId => { - if (contribId) { - const collaboration = this.collaborativeService.getCollaboration(contribId); - if (collaboration) { - this.extraShortcutsFiltered += 1; - } - } - } - ); } - }); + } + ); + } + }); } - // eslint-disable-next-line max-len - this.iconRegistry.addSvgIconLiteral('bbox', this.domSanitizer.bypassSecurityTrustHtml('')); +// eslint-disable-next-line max-len +this.iconRegistry.addSvgIconLiteral('bbox', this.domSanitizer.bypassSecurityTrustHtml('')); - // eslint-disable-next-line max-len - this.iconRegistry.addSvgIconLiteral('draw_polygon', this.domSanitizer.bypassSecurityTrustHtml(' image/svg+xml ')); +// eslint-disable-next-line max-len +this.iconRegistry.addSvgIconLiteral('draw_polygon', this.domSanitizer.bypassSecurityTrustHtml(' image/svg+xml ')); - // eslint-disable-next-line max-len - this.iconRegistry.addSvgIconLiteral('draw_circle', this.domSanitizer.bypassSecurityTrustHtml('')); +// eslint-disable-next-line max-len +this.iconRegistry.addSvgIconLiteral('draw_circle', this.domSanitizer.bypassSecurityTrustHtml('')); - // eslint-disable-next-line max-len - this.iconRegistry.addSvgIconLiteral('remove_polygon', this.domSanitizer.bypassSecurityTrustHtml(' image/svg+xml ')); +// eslint-disable-next-line max-len +this.iconRegistry.addSvgIconLiteral('remove_polygon', this.domSanitizer.bypassSecurityTrustHtml(' image/svg+xml ')); - // eslint-disable-next-line max-len - this.iconRegistry.addSvgIconLiteral('import_polygon', this.domSanitizer.bypassSecurityTrustHtml('')); +// eslint-disable-next-line max-len +this.iconRegistry.addSvgIconLiteral('import_polygon', this.domSanitizer.bypassSecurityTrustHtml('')); - // eslint-disable-next-line max-len - this.iconRegistry.addSvgIconLiteral('map_settings', this.domSanitizer.bypassSecurityTrustHtml('')); +// eslint-disable-next-line max-len +this.iconRegistry.addSvgIconLiteral('map_settings', this.domSanitizer.bypassSecurityTrustHtml('')); } public isElementInViewport(el) { - if (el) { - const rect = el.getBoundingClientRect(); - return (rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && - rect.right <= (window.innerWidth || document.documentElement.clientWidth)); - } else { - return false; - } + if (el) { + const rect = el.getBoundingClientRect(); + return (rect.top >= 0 && + rect.left >= 0 && + rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && + rect.right <= (window.innerWidth || document.documentElement.clientWidth)); + } else { + return false; } +} public declareResultlistExportCsv() { - if (this.settingsService.isResultListExportEnabled()) { - this.resultlistContributors.forEach(c => { - const resultConfig = this.resultListConfigPerContId.get(c.identifier); - if (resultConfig) { - if (!resultConfig.globalActionsList) { - resultConfig.globalActionsList = []; - } - resultConfig.globalActionsList.push({ 'id': 'export_csv', 'label': 'Export csv', 'alwaysEnabled': true }); + if (this.settingsService.isResultListExportEnabled()) { + this.resultlistContributors.forEach(c => { + const resultConfig = this.resultListConfigPerContId.get(c.identifier); + if (resultConfig) { + if (!resultConfig.globalActionsList) { + resultConfig.globalActionsList = []; } - }); - } + resultConfig.globalActionsList.push({ 'id': 'export_csv', 'label': 'Export csv', 'alwaysEnabled': true }); + } + }); } +} public ngAfterViewInit(): void { - if (!this.arlasStartUpService.emptyMode) { - this.resizeCollectionCounts(); - this.adjustVisibleShortcuts(); - this.adjustComponentsSize(); - // Keep the last displayed list as preview when closing the right panel - if (!!this.tabsList) { - this.tabsList.selectedIndexChange - .pipe(takeUntil(this._onDestroy$)) - .subscribe(index => { - this.resultlistService.selectedListTabIndex = index; - this.previewListContrib = this.resultlistContributors[index]; - - const queryParams = Object.assign({}, this.activatedRoute.snapshot.queryParams); - queryParams['rt'] = this.previewListContrib.getName(); - this.router.navigate([], { replaceUrl: true, queryParams: queryParams }); - this.adjustGrids(); - this.adjustComponentsSize(); - }); - } + if(!this.arlasStartUpService.emptyMode) { + this.resizeCollectionCounts(); + this.adjustVisibleShortcuts(); + this.adjustComponentsSize(); + // Keep the last displayed list as preview when closing the right panel + if (!!this.tabsList) { + this.tabsList.selectedIndexChange + .pipe(takeUntil(this._onDestroy$)) + .subscribe(index => { + this.resultlistService.selectedListTabIndex = index; + this.previewListContrib = this.resultlistContributors[index]; + + const queryParams = Object.assign({}, this.activatedRoute.snapshot.queryParams); + queryParams['rt'] = this.previewListContrib.getName(); + this.router.navigate([], { replaceUrl: true, queryParams: queryParams }); + this.adjustGrids(); + this.adjustComponentsSize(); + }); + } - this.mapEventListener - .pipe( - takeUntil(this._onDestroy$), - debounceTime(this.mapExtendTimer)) - .subscribe(() => { - /** Change map extend in the url */ - const bounds = (this.mapglComponent.map).getBounds(); - const extend = bounds.getWest() + ',' + bounds.getSouth() + ',' + bounds.getEast() + ',' + bounds.getNorth(); - const queryParams = Object.assign({}, this.activatedRoute.snapshot.queryParams); - queryParams[this.MAP_EXTEND_PARAM] = extend; - this.router.navigate([], { replaceUrl: true, queryParams: queryParams }); + this.mapEventListener + .pipe( + takeUntil(this._onDestroy$), + debounceTime(this.mapExtendTimer)) + .subscribe(() => { + /** Change map extend in the url */ + const bounds = (this.mapglComponent.map).getBounds(); + const extend = bounds.getWest() + ',' + bounds.getSouth() + ',' + bounds.getEast() + ',' + bounds.getNorth(); + const queryParams = Object.assign({}, this.activatedRoute.snapshot.queryParams); + queryParams[this.MAP_EXTEND_PARAM] = extend; + this.router.navigate([], { replaceUrl: true, queryParams: queryParams }); - }); + }); - this.cdr.detectChanges(); - } + this.cdr.detectChanges(); +} } public onMapLoaded(isLoaded: boolean): void { - /** wait until the map component loading is finished before fetching the data */ - if (isLoaded && !this.arlasStartUpService.emptyMode) { - - this.mapService.setMap(this.mapglComponent.map); - this.visualizeService.setMap(this.mapglComponent.map); - if (this.mapBounds && this.allowMapExtend) { - (this.mapglComponent.map).fitBounds(this.mapBounds, { duration: 0 }); - this.mapBounds = null; - } - this.mapglComponent.map.on('movestart', (e) => { - this.zoomStart = this.mapglComponent.map.getZoom(); - }); - this.mapglComponent.map.on('moveend', (e) => { - if (Math.abs(this.mapglComponent.map.getZoom() - this.zoomStart) > 1) { - this.zoomChanged = true; - } - if (this.allowMapExtend) { - this.mapEventListener.next(null); - } - }); - this.adjustMapOffset(); - this.adjustCoordinates(); - this.mapglContributors.forEach(mapglContributor => { - mapglContributor.updateData = true; - mapglContributor.fetchData(null); - mapglContributor.setSelection(null, this.collaborativeService.getCollaboration(mapglContributor.identifier)); - }); - - // If there is a list displayed, sync window layers' data - if (!!this.previewListContrib && this.previewListContrib.data.length > 0 && - this.mapComponentConfig.mapLayers.events.onHover.filter(l => this.mapglComponent.map.getLayer(l)).length > 0) { - this.updateVisibleItems(); - } + /** wait until the map component loading is finished before fetching the data */ + if(isLoaded && !this.arlasStartUpService.emptyMode) { + + this.mapService.setMap(this.mapglComponent.map); + this.visualizeService.setMap(this.mapglComponent.map); + if (this.mapBounds && this.allowMapExtend) { + (this.mapglComponent.map).fitBounds(this.mapBounds, { duration: 0 }); + this.mapBounds = null; + } + this.mapglComponent.map.on('movestart', (e) => { + this.zoomStart = this.mapglComponent.map.getZoom(); + }); + this.mapglComponent.map.on('moveend', (e) => { + if (Math.abs(this.mapglComponent.map.getZoom() - this.zoomStart) > 1) { + this.zoomChanged = true; + } + if (this.allowMapExtend) { + this.mapEventListener.next(null); } + }); + this.adjustMapOffset(); + this.adjustCoordinates(); + this.mapglContributors.forEach(mapglContributor => { + mapglContributor.updateData = true; + mapglContributor.fetchData(null); + mapglContributor.setSelection(null, this.collaborativeService.getCollaboration(mapglContributor.identifier)); + }); + + // If there is a list displayed, sync window layers' data + if (!!this.previewListContrib && this.previewListContrib.data.length > 0 && + this.mapComponentConfig.mapLayers.events.onHover.filter(l => this.mapglComponent.map.getLayer(l)).length > 0) { + this.updateVisibleItems(); + } +} } public setAppTitle() { - const prefixTitle = (!!this.arlasSettingsService.settings.tab_name && this.arlasSettingsService.settings.tab_name !== NOT_CONFIGURED) ? - this.arlasSettingsService.settings.tab_name : ''; - this.titleService.setTitle(prefixTitle === '' ? this.appName : - prefixTitle.concat(' - ').concat(this.appName)); - } + const prefixTitle = (!!this.arlasSettingsService.settings.tab_name && this.arlasSettingsService.settings.tab_name !== NOT_CONFIGURED) ? + this.arlasSettingsService.settings.tab_name : ''; + this.titleService.setTitle(prefixTitle === '' ? this.appName : + prefixTitle.concat(' - ').concat(this.appName)); +} /** * Update which elements from the list are visible on the map */ public updateVisibleItems() { - if (this.previewListContrib && !!this.collectionToDescription.get(this.previewListContrib.collection)) { - const idFieldName = this.collectionToDescription.get(this.previewListContrib.collection).id_path; - const visibleItems = this.previewListContrib.data.map(i => (i.get(idFieldName) as number | string)) - .filter(i => i !== undefined && this.isElementInViewport(document.getElementById(i.toString()))); - this.updateMapStyle(visibleItems, this.previewListContrib.collection); - } + if (this.previewListContrib && !!this.collectionToDescription.get(this.previewListContrib.collection)) { + const idFieldName = this.collectionToDescription.get(this.previewListContrib.collection).id_path; + const visibleItems = this.previewListContrib.data.map(i => (i.get(idFieldName) as number | string)) + .filter(i => i !== undefined && this.isElementInViewport(document.getElementById(i.toString()))); + this.updateMapStyle(visibleItems, this.previewListContrib.collection); } +} public updateMapStyle(ids: Array, collection: string) { - // use always this.previewListContrib because it's the current resultlist contributor - if (!!this.mapComponentConfig.mapLayers.events.onHover) { - this.mapComponentConfig.mapLayers.events.onHover.forEach(l => { - const layer = this.mapglComponent.map.getLayer(l) as ArlasAnyLayer; - if (!!layer && typeof (layer.source) === 'string' && layer.source.indexOf(collection) >= 0) { - if (ids && ids.length > 0) { - // Tests value in camel and kebab case due to an unknown issue on other projects - if (layer.metadata.isScrollableLayer || layer.metadata['is-scrollable-layer']) { - this.mapglComponent.map.setFilter(l, this.getVisibleElementLayerFilter(l, ids)); - const strokeLayerId = l.replace('_id:', '-fill_stroke-'); - const strokeLayer = this.mapglComponent.map.getLayer(strokeLayerId); - if (!!strokeLayer) { - this.mapglComponent.map.setFilter(strokeLayerId, this.getVisibleElementLayerFilter(strokeLayerId, ids)); - } - } - } else { - this.mapglComponent.map.setFilter(l, this.mapglComponent.layersMap.get(l).filter); + // use always this.previewListContrib because it's the current resultlist contributor + if (!!this.mapComponentConfig.mapLayers.events.onHover) { + this.mapComponentConfig.mapLayers.events.onHover.forEach(l => { + const layer = this.mapglComponent.map.getLayer(l) as ArlasAnyLayer; + if (!!layer && typeof (layer.source) === 'string' && layer.source.indexOf(collection) >= 0) { + if (ids && ids.length > 0) { + // Tests value in camel and kebab case due to an unknown issue on other projects + if (layer.metadata.isScrollableLayer || layer.metadata['is-scrollable-layer']) { + this.mapglComponent.map.setFilter(l, this.getVisibleElementLayerFilter(l, ids)); const strokeLayerId = l.replace('_id:', '-fill_stroke-'); const strokeLayer = this.mapglComponent.map.getLayer(strokeLayerId); if (!!strokeLayer) { - this.mapglComponent.map.setFilter(strokeLayerId, - this.mapglComponent.layersMap.get(strokeLayerId).filter); + this.mapglComponent.map.setFilter(strokeLayerId, this.getVisibleElementLayerFilter(strokeLayerId, ids)); } } + } else { + this.mapglComponent.map.setFilter(l, this.mapglComponent.layersMap.get(l).filter); + const strokeLayerId = l.replace('_id:', '-fill_stroke-'); + const strokeLayer = this.mapglComponent.map.getLayer(strokeLayerId); + if (!!strokeLayer) { + this.mapglComponent.map.setFilter(strokeLayerId, + this.mapglComponent.layersMap.get(strokeLayerId).filter); + } } - }); - } + } + }); } +} public updateMapStyleFromScroll(items: Array, collection: string) { - this.updateMapStyle(items.map(i => i.identifier), collection); - } + this.updateMapStyle(items.map(i => i.identifier), collection); +} /** * Updates features style on map after repopulating the resultlist with data * @param items List of items constituting the resultlist */ public updateMapStyleFromChange(items: Array>, collection: string) { - if (this.collectionToDescription.size > 0) { - const idFieldName = this.collectionToDescription.get(collection).id_path; - setTimeout(() => { - const visibleItems = items.map(item => item.get(idFieldName)) - .filter(id => id !== undefined && this.isElementInViewport(document.getElementById(id.toString()))); - this.updateMapStyle(visibleItems, collection); - }, 200); - } + if (this.collectionToDescription.size > 0) { + const idFieldName = this.collectionToDescription.get(collection).id_path; + setTimeout(() => { + const visibleItems = items.map(item => item.get(idFieldName)) + .filter(id => id !== undefined && this.isElementInViewport(document.getElementById(id.toString()))); + this.updateMapStyle(visibleItems, collection); + }, 200); } +} public consumeMenuEvents(states: MenuState) { - this.menuState = states; - } + this.menuState = states; +} public openMapSettings(): void { - this.mapSettingsService.mapContributors = this.mapglContributors; - this.mapSettings.openDialog(this.mapSettingsService); - } + this.mapSettingsService.mapContributors = this.mapglContributors; + this.mapSettings.openDialog(this.mapSettingsService); +} /** * Applies the selected geo query */ public applySelectedGeoQuery(geoQueries: Map) { - const configDebounceTime = this.configService.getValue('arlas.server.debounceCollaborationTime'); - const debounceDuration = configDebounceTime !== undefined ? configDebounceTime : 750; - const changedMapContributors = this.mapglContributors.filter(mc => !!geoQueries.has(mc.collection)); - for (let i = 0; i < changedMapContributors.length; i++) { - setTimeout(() => { - const collection = changedMapContributors[i].collection; - const geoQuery = geoQueries.get(collection); - changedMapContributors[i].setGeoQueryOperation(geoQuery.operation); - changedMapContributors[i].setGeoQueryField(geoQuery.geometry_path); - changedMapContributors[i].onChangeGeoQuery(); - this.snackbar.open(this.translate.instant('Updating Geo-query of ', - { collection: this.translate.instant(this.collectionService.getDisplayName(changedMapContributors[i].collection)) })); - if (i === changedMapContributors.length - 1) { - setTimeout(() => this.snackbar.dismiss(), 1000); - } - - }, (i) * (debounceDuration * 1.5)); - } + const configDebounceTime = this.configService.getValue('arlas.server.debounceCollaborationTime'); + const debounceDuration = configDebounceTime !== undefined ? configDebounceTime : 750; + const changedMapContributors = this.mapglContributors.filter(mc => !!geoQueries.has(mc.collection)); + for (let i = 0; i < changedMapContributors.length; i++) { + setTimeout(() => { + const collection = changedMapContributors[i].collection; + const geoQuery = geoQueries.get(collection); + changedMapContributors[i].setGeoQueryOperation(geoQuery.operation); + changedMapContributors[i].setGeoQueryField(geoQuery.geometry_path); + changedMapContributors[i].onChangeGeoQuery(); + this.snackbar.open(this.translate.instant('Updating Geo-query of ', + { collection: this.translate.instant(this.collectionService.getDisplayName(changedMapContributors[i].collection)) })); + if (i === changedMapContributors.length - 1) { + setTimeout(() => this.snackbar.dismiss(), 1000); + } + }, (i) * (debounceDuration * 1.5)); } +} + public setLyersVisibilityStatus(event) { - this.layersVisibilityStatus = event; - } + this.layersVisibilityStatus = event; +} public zoomToData(collection: string): void { - if (!this.mapSettingsService.mapContributors || this.mapSettingsService.mapContributors.length === 0) { - this.mapSettingsService.mapContributors = this.mapglContributors; - } - let fieldPath: string; - if ( - this.zoomToStrategy === ZoomToDataStrategy.CENTROID - || this.configService.getValue('arlas.web.options.zoom_to_data') // for backward compatibility - ) { - fieldPath = this.collectionToDescription.get(collection).centroid_path; - } else if (this.zoomToStrategy === ZoomToDataStrategy.GEOMETRY) { - fieldPath = this.collectionToDescription.get(collection).geometry_path; - } - this.mapService.zoomToData(collection, fieldPath, this.mapglComponent.map, 0.2); + if(!this.mapSettingsService.mapContributors || this.mapSettingsService.mapContributors.length === 0) { + this.mapSettingsService.mapContributors = this.mapglContributors; +} +let fieldPath: string; +if ( + this.zoomToStrategy === ZoomToDataStrategy.CENTROID + || this.configService.getValue('arlas.web.options.zoom_to_data') // for backward compatibility +) { + fieldPath = this.collectionToDescription.get(collection).centroid_path; +} else if (this.zoomToStrategy === ZoomToDataStrategy.GEOMETRY) { + fieldPath = this.collectionToDescription.get(collection).geometry_path; +} +this.mapService.zoomToData(collection, fieldPath, this.mapglComponent.map, 0.2); } /** This method sorts the list on the given column. The features are also sorted if the `Simple mode` is activated in mapContributor */ public sortColumnEvent(contributorId: string, sortOutput: Column) { - const resultlistContributor = (this.collaborativeService.registry.get(contributorId) as ResultListContributor); - this.isGeoSortActivated.set(contributorId, false); - /** Save the sorted column */ - this.sortOutput.set(contributorId, sortOutput); - /** Sort the list by the selected column and the id field name */ - resultlistContributor.sortColumn(sortOutput, true); - /** set mapcontritbutor sort */ - let sortOrder = null; - if (sortOutput.sortDirection.toString() === '0') { - sortOrder = ''; - } else if (sortOutput.sortDirection.toString() === '1') { - sortOrder = '-'; - } - let sort = ''; - if (sortOrder !== null) { - sort = sortOrder + sortOutput.fieldName; - } - - this.mapglContributors - .filter(c => c.collection === resultlistContributor.collection) - .forEach(c => { - // Could have some problems if we put 2 lists with the same collection and different sort ? - c.searchSort = resultlistContributor.sort; - c.searchSize = resultlistContributor.getConfigValue('search_size'); - /** Redraw features with setted sort in case of window mode */ - /** Remove old features */ - this.clearWindowData(c); - /** Set new features */ - c.drawGeoSearch(0, true); - }); + const resultlistContributor = (this.collaborativeService.registry.get(contributorId) as ResultListContributor); + this.isGeoSortActivated.set(contributorId, false); + /** Save the sorted column */ + this.sortOutput.set(contributorId, sortOutput); + /** Sort the list by the selected column and the id field name */ + resultlistContributor.sortColumn(sortOutput, true); + /** set mapcontritbutor sort */ + let sortOrder = null; + if (sortOutput.sortDirection.toString() === '0') { + sortOrder = ''; + } else if (sortOutput.sortDirection.toString() === '1') { + sortOrder = '-'; } + let sort = ''; + if (sortOrder !== null) { + sort = sortOrder + sortOutput.fieldName; + } + + this.mapglContributors + .filter(c => c.collection === resultlistContributor.collection) + .forEach(c => { + // Could have some problems if we put 2 lists with the same collection and different sort ? + c.searchSort = resultlistContributor.sort; + c.searchSize = resultlistContributor.getConfigValue('search_size'); + /** Redraw features with setted sort in case of window mode */ + /** Remove old features */ + this.clearWindowData(c); + /** Set new features */ + c.drawGeoSearch(0, true); + }); +} /** * Called at the end of scrolling the list @@ -869,429 +872,430 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy { * @param eventPaginate Which page is queried */ public paginate(contributor, eventPaginate: PageQuery): void { - contributor.getPage(eventPaginate.reference, eventPaginate.whichPage); - const sort = this.isGeoSortActivated.get(contributor.identifier) ? contributor.geoOrderSort : contributor.sort; - this.mapglContributors - .filter(c => c.collection === contributor.collection) - .forEach(c => c.getPage(eventPaginate.reference, sort, eventPaginate.whichPage, contributor.maxPages)); - } + contributor.getPage(eventPaginate.reference, eventPaginate.whichPage); + const sort = this.isGeoSortActivated.get(contributor.identifier) ? contributor.geoOrderSort : contributor.sort; + this.mapglContributors + .filter(c => c.collection === contributor.collection) + .forEach(c => c.getPage(eventPaginate.reference, sort, eventPaginate.whichPage, contributor.maxPages)); +} public clickOnTile(item: Item) { - this.tabsList.realignInkBar(); - const config = this.resultListConfigPerContId.get(this.previewListContrib.identifier); - config.defautMode = this.modeEnum.grid; - config.selectedGridItem = item; - config.isDetailledGridOpen = true; - this.resultListConfigPerContId.set(this.previewListContrib.identifier, config); - this.resultlistService.toggleList(); - setTimeout(() => { - if (!!this.timelineComponent.timelineHistogramComponent) { - this.timelineComponent.timelineHistogramComponent.resizeHistogram(); - } - }, 100); - } + this.tabsList.realignInkBar(); + const config = this.resultListConfigPerContId.get(this.previewListContrib.identifier); + config.defautMode = this.modeEnum.grid; + config.selectedGridItem = item; + config.isDetailledGridOpen = true; + this.resultListConfigPerContId.set(this.previewListContrib.identifier, config); + this.resultlistService.toggleList(); + setTimeout(() => { + if (!!this.timelineComponent.timelineHistogramComponent) { + this.timelineComponent.timelineHistogramComponent.resizeHistogram(); + } + }, 100); +} public changeListResultMode(mode: ModeEnum, identifier: string) { - const config = this.resultListConfigPerContId.get(identifier); - config.defautMode = mode; - this.resultListConfigPerContId.set(identifier, config); - setTimeout(() => { - this.updateVisibleItems(); - }, 0); - } + const config = this.resultListConfigPerContId.get(identifier); + config.defautMode = mode; + this.resultListConfigPerContId.set(identifier, config); + setTimeout(() => { + this.updateVisibleItems(); + }, 0); +} public reloadMapImages() { - this.visualizeService.setMap(this.mapglComponent.map); - } + this.visualizeService.setMap(this.mapglComponent.map); +} public getBoardEvents(event: { origin: string; event: string; data?: any; }) { - const resultListContributor = this.collaborativeService.registry.get(event.origin) as ResultListContributor; - const currentCollection = resultListContributor.collection; - const mapContributor: MapContributor = this.mapglContributors.filter(c => c.collection === currentCollection)[0]; - switch (event.event) { - case 'paginationEvent': - this.paginate(resultListContributor, event.data); - break; - case 'sortColumnEvent': - this.sortColumnEvent(event.origin, event.data); - break; - case 'consultedItemEvent': - if (!!mapContributor) { - const f = mapContributor.getFeatureToHightLight(event.data); - if (mapContributor) { - f.elementidentifier.idFieldName = f.elementidentifier.idFieldName.replace(/\./g, '_'); - } - this.featureToHightLight = f; + const resultListContributor = this.collaborativeService.registry.get(event.origin) as ResultListContributor; + const currentCollection = resultListContributor.collection; + const mapContributor: MapContributor = this.mapglContributors.filter(c => c.collection === currentCollection)[0]; + switch (event.event) { + case 'paginationEvent': + this.paginate(resultListContributor, event.data); + break; + case 'sortColumnEvent': + this.sortColumnEvent(event.origin, event.data); + break; + case 'consultedItemEvent': + if (!!mapContributor) { + const f = mapContributor.getFeatureToHightLight(event.data); + if (mapContributor) { + f.elementidentifier.idFieldName = f.elementidentifier.idFieldName.replace(/\./g, '_'); } - break; - case 'selectedItemsEvent': - /** TODO : manage features to select when we have multiple collections */ - if (event.data.length > 0 && this.mapComponentConfig && mapContributor) { - this.featuresToSelect = event.data.map(id => { - let idFieldName = this.collectionToDescription.get(currentCollection).id_path; - if (mapContributor.isFlat) { - idFieldName = idFieldName.replace(/\./g, '_'); - } - return { - idFieldName: idFieldName, - idValue: id - }; - }); - this.mapglComponent.selectFeaturesByCollection(this.featuresToSelect, currentCollection); - } else { - if (!!this.mapglComponent) { - this.mapglComponent.selectFeaturesByCollection([], currentCollection); + this.featureToHightLight = f; + } + break; + case 'selectedItemsEvent': + /** TODO : manage features to select when we have multiple collections */ + if (event.data.length > 0 && this.mapComponentConfig && mapContributor) { + this.featuresToSelect = event.data.map(id => { + let idFieldName = this.collectionToDescription.get(currentCollection).id_path; + if (mapContributor.isFlat) { + idFieldName = idFieldName.replace(/\./g, '_'); } + return { + idFieldName: idFieldName, + idValue: id + }; + }); + this.mapglComponent.selectFeaturesByCollection(this.featuresToSelect, currentCollection); + } else { + if (!!this.mapglComponent) { + this.mapglComponent.selectFeaturesByCollection([], currentCollection); } - break; - case 'actionOnItemEvent': - this.actionOnItemEvent(event.data, mapContributor, resultListContributor, currentCollection); - break; - case 'globalActionEvent': - if (event.data.id === 'production') { - const idsItemSelected: ElementIdentifier[] = this.featuresToSelect; - this.process(idsItemSelected.map(i => i.idValue), currentCollection); - } else if (event.data.id === 'export_csv') { - this.resultlistIsExporting = true; - this.exportService.fetchResultlistData$(resultListContributor, undefined) - .pipe(finalize(() => this.resultlistIsExporting = false)) - .subscribe({ - next: (h) => this.exportService.exportResultlist(resultListContributor, h), - error: (e) => this.snackbar.open(marker('An error occured exporting the list')) - }); - } - break; - case 'geoSortEvent': - break; - case 'geoAutoSortEvent': - this.onActiveOnGeosort(event.data, resultListContributor, mapContributor, this.centerLatLng.lat, this.centerLatLng.lng); - break; - } - this.actionOnList.next(event); + } + break; + case 'actionOnItemEvent': + console.log(event.data) + this.actionOnItemEvent(event.data, mapContributor, resultListContributor, currentCollection); + break; + case 'globalActionEvent': + if (event.data.id === 'production') { + const idsItemSelected: ElementIdentifier[] = this.featuresToSelect; + this.process(idsItemSelected.map(i => i.idValue), currentCollection); + } else if (event.data.id === 'export_csv') { + this.resultlistIsExporting = true; + this.exportService.fetchResultlistData$(resultListContributor, undefined) + .pipe(finalize(() => this.resultlistIsExporting = false)) + .subscribe({ + next: (h) => this.exportService.exportResultlist(resultListContributor, h), + error: (e) => this.snackbar.open(marker('An error occured exporting the list')) + }); + } + break; + case 'geoSortEvent': + break; + case 'geoAutoSortEvent': + this.onActiveOnGeosort(event.data, resultListContributor, mapContributor, this.centerLatLng.lat, this.centerLatLng.lng); + break; } + this.actionOnList.next(event); +} public onActiveOnGeosort(data, resultListContributor: ResultListContributor, mapContributor: MapContributor, lat, lng): void { - this.isGeoSortActivated.set(resultListContributor.identifier, data); - if (data) { - /** Apply geosort in list */ - resultListContributor.geoSort(lat, lng, true); - this.sortOutput.delete(resultListContributor.identifier); - // this.resultListComponent.columns.filter(c => !c.isIdField).forEach(c => c.sortDirection = SortEnum.none); - /** Apply geosort in map (for simple mode) */ - this.clearWindowData(mapContributor); - mapContributor.searchSort = resultListContributor.geoOrderSort; - mapContributor.searchSize = resultListContributor.pageSize; - mapContributor.drawGeoSearch(0, true); - } else { - const idFieldName = resultListContributor.getConfigValue('fieldsConfiguration')['idFieldName']; - this.sortOutput.set(resultListContributor.identifier, - { fieldName: idFieldName, sortDirection: SortEnum.none }); - /** Sort the list by the selected column and the id field name */ - resultListContributor.sortColumn({ fieldName: idFieldName, sortDirection: SortEnum.none }, true); - mapContributor.searchSort = resultListContributor.sort; - mapContributor.searchSize = resultListContributor.pageSize; - this.clearWindowData(mapContributor); - mapContributor.drawGeoSearch(0, true); - } + this.isGeoSortActivated.set(resultListContributor.identifier, data); + if(data) { + /** Apply geosort in list */ + resultListContributor.geoSort(lat, lng, true); + this.sortOutput.delete(resultListContributor.identifier); + // this.resultListComponent.columns.filter(c => !c.isIdField).forEach(c => c.sortDirection = SortEnum.none); + /** Apply geosort in map (for simple mode) */ + this.clearWindowData(mapContributor); + mapContributor.searchSort = resultListContributor.geoOrderSort; + mapContributor.searchSize = resultListContributor.pageSize; + mapContributor.drawGeoSearch(0, true); + } else { + const idFieldName = resultListContributor.getConfigValue('fieldsConfiguration')['idFieldName']; + this.sortOutput.set(resultListContributor.identifier, + { fieldName: idFieldName, sortDirection: SortEnum.none }); + /** Sort the list by the selected column and the id field name */ + resultListContributor.sortColumn({ fieldName: idFieldName, sortDirection: SortEnum.none }, true); + mapContributor.searchSort = resultListContributor.sort; + mapContributor.searchSize = resultListContributor.pageSize; + this.clearWindowData(mapContributor); + mapContributor.drawGeoSearch(0, true); } +} public onChangeAoi(event) { - const configDebounceTime = this.configService.getValue('arlas.server.debounceCollaborationTime'); - const debounceDuration = configDebounceTime !== undefined ? configDebounceTime : 750; - for (let i = 0; i < this.mapglContributors.length; i++) { - setTimeout(() => { - this.snackbar.open(this.translate.instant('Loading data of ', - { collection: this.translate.instant(this.collectionService.getDisplayName(this.mapglContributors[i].collection)) })); - this.mapglContributors[i].onChangeAoi(event); - if (i === this.mapglContributors.length - 1) { - setTimeout(() => this.snackbar.dismiss(), 1000); - } - }, (i) * ((debounceDuration + 100) * 1.5)); - } + const configDebounceTime = this.configService.getValue('arlas.server.debounceCollaborationTime'); + const debounceDuration = configDebounceTime !== undefined ? configDebounceTime : 750; + for (let i = 0; i < this.mapglContributors.length; i++) { + setTimeout(() => { + this.snackbar.open(this.translate.instant('Loading data of ', + { collection: this.translate.instant(this.collectionService.getDisplayName(this.mapglContributors[i].collection)) })); + this.mapglContributors[i].onChangeAoi(event); + if (i === this.mapglContributors.length - 1) { + setTimeout(() => this.snackbar.dismiss(), 1000); + } + }, (i) * ((debounceDuration + 100) * 1.5)); } +} public onAoiEdit(aoiEdit: AoiEdition) { - this.aoiEdition = aoiEdit; - } + this.aoiEdition = aoiEdit; +} public onMove(event) { - // Update data only when the collections info are presents - if (this.collectionToDescription.size > 0) { - /** Change map extend in the url */ - const bounds = (this.mapglComponent.map).getBounds(); - const extend = bounds.getWest() + ',' + bounds.getSouth() + ',' + bounds.getEast() + ',' + bounds.getNorth(); - const queryParams = Object.assign({}, this.activatedRoute.snapshot.queryParams); - const visibileVisus = this.mapglComponent.visualisationSetsConfig.filter(v => v.enabled).map(v => v.name).join(';'); - queryParams[this.MAP_EXTEND_PARAM] = extend; - queryParams['vs'] = visibileVisus; - this.router.navigate([], { replaceUrl: true, queryParams: queryParams }); - localStorage.setItem('currentExtent', JSON.stringify(bounds)); - const ratioToAutoSort = 0.1; - this.centerLatLng['lat'] = event.centerWithOffset[1]; - this.centerLatLng['lng'] = event.centerWithOffset[0]; - if ((event.xMoveRatio > ratioToAutoSort || event.yMoveRatio > ratioToAutoSort || this.zoomChanged)) { - this.recalculateExtend = true; - } - const newMapExtent = event.extendWithOffset; - const newMapExtentRaw = event.rawExtendWithOffset; - const pwithin = newMapExtent[1] + ',' + newMapExtent[2] + ',' + newMapExtent[3] + ',' + newMapExtent[0]; - const pwithinRaw = newMapExtentRaw[1] + ',' + newMapExtentRaw[2] + ',' + newMapExtentRaw[3] + ',' + newMapExtentRaw[0]; - if (this.recalculateExtend && !this.disableRecalculateExtend) { - this.resultlistContributors - .forEach(c => { - const centroidPath = this.collectionToDescription.get(c.collection).centroid_path; - const mapContrib = this.mapglContributors.find(mc => mc.collection === c.collection); - if (!!mapContrib) { - c.filter = mapContrib.getFilterForCount(pwithinRaw, pwithin, centroidPath, true); - } else { - MapContributor.getFilterFromExtent(pwithinRaw, pwithin, centroidPath); - } - this.collaborativeService.registry.set(c.identifier, c); - }); - this.resultlistContributors.forEach(c => { - if (this.isGeoSortActivated.get(c.identifier)) { - c.geoSort(this.centerLatLng.lat, this.centerLatLng.lng, true); + // Update data only when the collections info are presents + if (this.collectionToDescription.size > 0) { + /** Change map extend in the url */ + const bounds = (this.mapglComponent.map).getBounds(); + const extend = bounds.getWest() + ',' + bounds.getSouth() + ',' + bounds.getEast() + ',' + bounds.getNorth(); + const queryParams = Object.assign({}, this.activatedRoute.snapshot.queryParams); + const visibileVisus = this.mapglComponent.visualisationSetsConfig.filter(v => v.enabled).map(v => v.name).join(';'); + queryParams[this.MAP_EXTEND_PARAM] = extend; + queryParams['vs'] = visibileVisus; + this.router.navigate([], { replaceUrl: true, queryParams: queryParams }); + localStorage.setItem('currentExtent', JSON.stringify(bounds)); + const ratioToAutoSort = 0.1; + this.centerLatLng['lat'] = event.centerWithOffset[1]; + this.centerLatLng['lng'] = event.centerWithOffset[0]; + if ((event.xMoveRatio > ratioToAutoSort || event.yMoveRatio > ratioToAutoSort || this.zoomChanged)) { + this.recalculateExtend = true; + } + const newMapExtent = event.extendWithOffset; + const newMapExtentRaw = event.rawExtendWithOffset; + const pwithin = newMapExtent[1] + ',' + newMapExtent[2] + ',' + newMapExtent[3] + ',' + newMapExtent[0]; + const pwithinRaw = newMapExtentRaw[1] + ',' + newMapExtentRaw[2] + ',' + newMapExtentRaw[3] + ',' + newMapExtentRaw[0]; + if (this.recalculateExtend && !this.disableRecalculateExtend) { + this.resultlistContributors + .forEach(c => { + const centroidPath = this.collectionToDescription.get(c.collection).centroid_path; + const mapContrib = this.mapglContributors.find(mc => mc.collection === c.collection); + if (!!mapContrib) { + c.filter = mapContrib.getFilterForCount(pwithinRaw, pwithin, centroidPath, true); } else { - c.sortColumn(this.sortOutput.get(c.identifier), true); + MapContributor.getFilterFromExtent(pwithinRaw, pwithin, centroidPath); } + this.collaborativeService.registry.set(c.identifier, c); }); - this.mapglContributors.forEach(c => { - if (!!this.resultlistContributors) { - const resultlistContrbutor: ResultListContributor = this.resultlistContributors.find(v => v.collection === c.collection); - if (!!resultlistContrbutor) { - if (this.isGeoSortActivated.get(c.identifier)) { - c.searchSort = resultlistContrbutor.geoOrderSort; - } else { - c.searchSort = resultlistContrbutor.sort; - } - this.collaborativeService.registry.set(c.identifier, c); + this.resultlistContributors.forEach(c => { + if (this.isGeoSortActivated.get(c.identifier)) { + c.geoSort(this.centerLatLng.lat, this.centerLatLng.lng, true); + } else { + c.sortColumn(this.sortOutput.get(c.identifier), true); + } + }); + this.mapglContributors.forEach(c => { + if (!!this.resultlistContributors) { + const resultlistContrbutor: ResultListContributor = this.resultlistContributors.find(v => v.collection === c.collection); + if (!!resultlistContrbutor) { + if (this.isGeoSortActivated.get(c.identifier)) { + c.searchSort = resultlistContrbutor.geoOrderSort; + } else { + c.searchSort = resultlistContrbutor.sort; } + this.collaborativeService.registry.set(c.identifier, c); } - this.clearWindowData(c); - }); - this.zoomChanged = false; - } - event.extendForTest = newMapExtent; - event.rawExtendForTest = newMapExtentRaw; - this.mapglContributors.forEach(contrib => contrib.onMove(event, this.recalculateExtend)); - this.recalculateExtend = false; - + } + this.clearWindowData(c); + }); + this.zoomChanged = false; } + event.extendForTest = newMapExtent; + event.rawExtendForTest = newMapExtentRaw; + this.mapglContributors.forEach(contrib => contrib.onMove(event, this.recalculateExtend)); + this.recalculateExtend = false; + } +} public changeVisualisation(event) { - this.mapglContributors.forEach(contrib => contrib.changeVisualisation(event)); - const queryParams = Object.assign({}, this.activatedRoute.snapshot.queryParams); - const visibileVisus = this.mapglComponent.visualisationSetsConfig.filter(v => v.enabled).map(v => v.name).join(';'); - queryParams['vs'] = visibileVisus; - this.router.navigate([], { replaceUrl: true, queryParams: queryParams }); - } + this.mapglContributors.forEach(contrib => contrib.changeVisualisation(event)); + const queryParams = Object.assign({}, this.activatedRoute.snapshot.queryParams); + const visibileVisus = this.mapglComponent.visualisationSetsConfig.filter(v => v.enabled).map(v => v.name).join(';'); + queryParams['vs'] = visibileVisus; + this.router.navigate([], { replaceUrl: true, queryParams: queryParams }); +} public emitFeaturesOnOver(event) { - if (event.features) { - this.mapglComponent.map.getCanvas().style.cursor = 'pointer'; - // Get feature by collection - this.resultlistContributors.forEach(c => { - const idFieldName = this.collectionToDescription.get(c.collection).id_path; - const highLightItems = event.features - .filter(f => f.layer.metadata.collection === c.collection) - .map(f => f.properties[idFieldName.replace(/\./g, '_')]) - .filter(id => id !== undefined) - .map(id => id.toString()); - c.setHighlightItems(highLightItems); - }); - } else { - this.mapglComponent.map.getCanvas().style.cursor = ''; - this.resultlistContributors.forEach(c => { - c.setHighlightItems([]); - }); - } + if (event.features) { + this.mapglComponent.map.getCanvas().style.cursor = 'pointer'; + // Get feature by collection + this.resultlistContributors.forEach(c => { + const idFieldName = this.collectionToDescription.get(c.collection).id_path; + const highLightItems = event.features + .filter(f => f.layer.metadata.collection === c.collection) + .map(f => f.properties[idFieldName.replace(/\./g, '_')]) + .filter(id => id !== undefined) + .map(id => id.toString()); + c.setHighlightItems(highLightItems); + }); + } else { + this.mapglComponent.map.getCanvas().style.cursor = ''; + this.resultlistContributors.forEach(c => { + c.setHighlightItems([]); + }); } +} public emitFeaturesOnClic(event) { - if (event.features) { - const feature = event.features[0]; - const resultListContributor = this.resultlistContributors - .filter(c => feature.layer.metadata.collection === c.collection && !feature.layer.id.includes(SCROLLABLE_ARLAS_ID))[0]; - if (!!resultListContributor) { - const idFieldName = this.collectionToDescription.get(resultListContributor.collection).id_path; - const id = feature.properties[idFieldName.replace(/\./g, '_')]; - // Open the list panel if it's closed - this.disableRecalculateExtend = true; - if (!this.resultlistService.listOpen) { - this.toggleList(); - } - // Select the good tab if we have several - // No tabs case - if (this.resultlistContributors.length === 1) { - this.waitFor(this.resultListComponent, () => this.openDetail(id)); + if (event.features) { + const feature = event.features[0]; + const resultListContributor = this.resultlistContributors + .filter(c => feature.layer.metadata.collection === c.collection && !feature.layer.id.includes(SCROLLABLE_ARLAS_ID))[0]; + if (!!resultListContributor) { + const idFieldName = this.collectionToDescription.get(resultListContributor.collection).id_path; + const id = feature.properties[idFieldName.replace(/\./g, '_')]; + // Open the list panel if it's closed + this.disableRecalculateExtend = true; + if (!this.resultlistService.listOpen) { + this.toggleList(); + } + // Select the good tab if we have several + // No tabs case + if (this.resultlistContributors.length === 1) { + this.waitFor(this.resultListComponent, () => this.openDetail(id)); + this.disableRecalculateExtend = false; + } else { + this.waitFor(this.resultListComponent, () => { + // retrieve list + const tab = document.querySelector('[aria-label="' + resultListContributor.identifier + '"]') as any; + tab.click(); + // Set Timeout to wait the new tab + setTimeout(() => this.openDetail(id), 250); this.disableRecalculateExtend = false; - } else { - this.waitFor(this.resultListComponent, () => { - // retrieve list - const tab = document.querySelector('[aria-label="' + resultListContributor.identifier + '"]') as any; - tab.click(); - // Set Timeout to wait the new tab - setTimeout(() => this.openDetail(id), 250); - this.disableRecalculateExtend = false; - }); - } + }); } } } +} private openDetail(id: any) { - const isListMode = this.resultListComponent.resultMode === this.modeEnum.list; - if (isListMode) { - const detailListButton = document.getElementById('open-detail-' + id); - if (!!detailListButton) { - // close previous if exists - if (this.currentClickedFeatureId) { - const closeButtonElement = document.getElementById('close-detail-' + this.currentClickedFeatureId); - if (closeButtonElement) { - closeButtonElement.click(); - } + const isListMode = this.resultListComponent.resultMode === this.modeEnum.list; + if (isListMode) { + const detailListButton = document.getElementById('open-detail-' + id); + if (!!detailListButton) { + // close previous if exists + if (this.currentClickedFeatureId) { + const closeButtonElement = document.getElementById('close-detail-' + this.currentClickedFeatureId); + if (closeButtonElement) { + closeButtonElement.click(); } - detailListButton.click(); - this.currentClickedFeatureId = id; - this.disableRecalculateExtend = false; } - } else { - const productTile = document.getElementById('grid-tile-' + id); - const isDetailledGridOpen = this.resultListComponent?.isDetailledGridOpen; - if (!!productTile) { - productTile.click(); - if (!isDetailledGridOpen) { - setTimeout(() => { - const detailGridButton = document.getElementById('show_details_gridmode_btn'); - if (!!detailGridButton) { - detailGridButton.click(); - } - this.disableRecalculateExtend = false; + detailListButton.click(); + this.currentClickedFeatureId = id; + this.disableRecalculateExtend = false; + } + } else { + const productTile = document.getElementById('grid-tile-' + id); + const isDetailledGridOpen = this.resultListComponent?.isDetailledGridOpen; + if (!!productTile) { + productTile.click(); + if (!isDetailledGridOpen) { + setTimeout(() => { + const detailGridButton = document.getElementById('show_details_gridmode_btn'); + if (!!detailGridButton) { + detailGridButton.click(); + } + this.disableRecalculateExtend = false; - }, 250); - } else { - // If image is displayed switch to detail data - const gridDivs = document.getElementsByClassName('resultgrid__img'); - if (gridDivs.length > 0) { - const imgDiv = gridDivs[0].parentElement; - if (window.getComputedStyle(imgDiv).display === 'block') { - setTimeout(() => { - const detailGridButton = document.getElementById('show_details_gridmode_btn'); - if (!!detailGridButton) { - detailGridButton.click(); - } - this.disableRecalculateExtend = false; - }, 1); - } + }, 250); + } else { + // If image is displayed switch to detail data + const gridDivs = document.getElementsByClassName('resultgrid__img'); + if (gridDivs.length > 0) { + const imgDiv = gridDivs[0].parentElement; + if (window.getComputedStyle(imgDiv).display === 'block') { + setTimeout(() => { + const detailGridButton = document.getElementById('show_details_gridmode_btn'); + if (!!detailGridButton) { + detailGridButton.click(); + } + this.disableRecalculateExtend = false; + }, 1); } } } } } +} public toggleList() { - this.tabsList.realignInkBar(); - this.resultlistService.toggleList(); - this.updateTimelineLegendVisibility(); - this.adjustGrids(); - this.adjustComponentsSize(); - this.adjustVisibleShortcuts(); - } + this.tabsList.realignInkBar(); + this.resultlistService.toggleList(); + this.updateTimelineLegendVisibility(); + this.adjustGrids(); + this.adjustComponentsSize(); + this.adjustVisibleShortcuts(); +} public toggleTimeline() { - this.isTimelineOpen = !this.isTimelineOpen; - const queryParams = Object.assign({}, this.activatedRoute.snapshot.queryParams); - queryParams['to'] = this.isTimelineOpen + ''; - this.router.navigate([], { replaceUrl: true, queryParams: queryParams }); - } + this.isTimelineOpen = !this.isTimelineOpen; + const queryParams = Object.assign({}, this.activatedRoute.snapshot.queryParams); + queryParams['to'] = this.isTimelineOpen + ''; + this.router.navigate([], { replaceUrl: true, queryParams: queryParams }); +} public updateTimelineLegendVisibility() { - this.isTimelineLegend = !(this.resultlistService.listOpen && this.analyticsService.activeTab !== undefined); - } + this.isTimelineLegend = !(this.resultlistService.listOpen && this.analyticsService.activeTab !== undefined); +} public closeAnalytics() { - this.analyticsService.selectTab(undefined); - } + this.analyticsService.selectTab(undefined); +} public closeMapMenu() { - setTimeout(() => { - if (this.shouldCloseMapMenu) { - this.isMapMenuOpen = false; - } - }, 100); - } + setTimeout(() => { + if (this.shouldCloseMapMenu) { + this.isMapMenuOpen = false; + } + }, 100); +} public onOpenShortcut(state: boolean, shortcutIdx: number) { - if (state) { - this.shortcutOpen = shortcutIdx; - // If open one of the visible shortcuts, hide the extra ones - if (this.shortcutOpen < this.shortcuts.length) { - this.isExtraShortcutsOpen = false; - } - } else { - this.shortcutOpen = -1; + if (state) { + this.shortcutOpen = shortcutIdx; + // If open one of the visible shortcuts, hide the extra ones + if (this.shortcutOpen < this.shortcuts.length) { + this.isExtraShortcutsOpen = false; } + } else { + this.shortcutOpen = -1; } +} public toggleExtraShortcuts(): void { - this.isExtraShortcutsOpen = !this.isExtraShortcutsOpen; - this.showMoreShortcutsWidth = document.getElementById('extra-shortcuts-title').getBoundingClientRect().width; - // If the extra shortcuts are opened, and the open shortcut is the last visible one, close it for visibility reasons - if (this.isExtraShortcutsOpen && this.shortcutOpen === this.shortcuts.length - 1) { - this.shortcutOpen = -1; - } + this.isExtraShortcutsOpen = !this.isExtraShortcutsOpen; + this.showMoreShortcutsWidth = document.getElementById('extra-shortcuts-title').getBoundingClientRect().width; + // If the extra shortcuts are opened, and the open shortcut is the last visible one, close it for visibility reasons + if(this.isExtraShortcutsOpen && this.shortcutOpen === this.shortcuts.length - 1) { + this.shortcutOpen = -1; +} } public goToArlasHub() { - const hubUrl = this.arlasSettingsService.getArlasHubUrl(); - if (!!hubUrl) { - window.open(hubUrl); - } + const hubUrl = this.arlasSettingsService.getArlasHubUrl(); + if (!!hubUrl) { + window.open(hubUrl); } +} public drawCircle() { - this.mapglComponent.switchToDrawMode('draw_radius_circle', { isFixedRadius: false, steps: 12 }); - } + this.mapglComponent.switchToDrawMode('draw_radius_circle', { isFixedRadius: false, steps: 12 }); +} protected goToLocation(event: GeocodingResult) { - const bbox = this.visualizeService.getBbox(event.geojson); - this.visualizeService.handleGeojsonPreview(event.geojson); - if (event.geojson.type === 'Point') { - const zoom = this.settingsService.getGeocodingSettings().find_place_zoom_to; - this.mapglComponent.map.fitBounds(bbox, { maxZoom: zoom }); - } else { - this.mapglComponent.map.fitBounds(bbox); - } + const bbox = this.visualizeService.getBbox(event.geojson); + this.visualizeService.handleGeojsonPreview(event.geojson); + if (event.geojson.type === 'Point') { + const zoom = this.settingsService.getGeocodingSettings().find_place_zoom_to; + this.mapglComponent.map.fitBounds(bbox, { maxZoom: zoom }); + } else { + this.mapglComponent.map.fitBounds(bbox); } +} /** * Compute the space available between the divider after the search and the title of the application */ private resizeCollectionCounts() { - const checkElement = async selector => { - while (document.getElementById(selector) === null) { - await new Promise(resolve => requestAnimationFrame(resolve)); - } - return document.getElementById(selector); - }; - Promise.all([checkElement('menuDivider'), checkElement('title'),]).then((valArray) => { - // Add padding to the left of the divider and right of the title - const start = valArray[0].getBoundingClientRect().right + this.spacing; - const end = valArray[1].getBoundingClientRect().left - this.spacing; - this.availableSpaceCounts = end - start; - }); - } + const checkElement = async selector => { + while (document.getElementById(selector) === null) { + await new Promise(resolve => requestAnimationFrame(resolve)); + } + return document.getElementById(selector); + }; + Promise.all([checkElement('menuDivider'), checkElement('title'),]).then((valArray) => { + // Add padding to the left of the divider and right of the title + const start = valArray[0].getBoundingClientRect().right + this.spacing; + const end = valArray[1].getBoundingClientRect().left - this.spacing; + this.availableSpaceCounts = end - start; + }); +} private adjustGrids() { - if (!this.resultlistService.listOpen) { - const config = this.resultListConfigPerContId.get(this.previewListContrib.identifier); - config.isDetailledGridOpen = false; - } else { - this.resultlistService.selectedListTabIndex = this.rightListContributors.indexOf(this.previewListContrib); - } + if (!this.resultlistService.listOpen) { + const config = this.resultListConfigPerContId.get(this.previewListContrib.identifier); + config.isDetailledGridOpen = false; + } else { + this.resultlistService.selectedListTabIndex = this.rightListContributors.indexOf(this.previewListContrib); } +} /** * Adjust ARLAS elements size: @@ -1302,215 +1306,223 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy { * As well as which list elements are visible on the map */ private adjustComponentsSize() { - setTimeout(() => { - if (this.timelineComponent.timelineHistogramComponent) { - this.timelineComponent.timelineHistogramComponent.resizeHistogram(); - if (!!this.timelineComponent.detailedTimelineHistogramComponent) { - this.timelineComponent.detailedTimelineHistogramComponent.resizeHistogram(); - } + setTimeout(() => { + if (this.timelineComponent.timelineHistogramComponent) { + this.timelineComponent.timelineHistogramComponent.resizeHistogram(); + if (!!this.timelineComponent.detailedTimelineHistogramComponent) { + this.timelineComponent.detailedTimelineHistogramComponent.resizeHistogram(); } - this.mapglComponent.map?.resize(); - this.adjustCoordinates(); + } + this.mapglComponent.map?.resize(); + this.adjustCoordinates(); - this.updateVisibleItems(); - }, 100); - } + this.updateVisibleItems(); + }, 100); +} private adjustCoordinates(): void { - const timelineToolsMaxWidth = 420; - const scaleMaxWidth = 100; - const toggleButtonWidth = 24; - const smMargin = 5; - const mapCanvas = document.getElementsByClassName('mapboxgl-canvas'); - if (mapCanvas && mapCanvas.length > 0) { - const bbox = mapCanvas[0].getBoundingClientRect(); - if (bbox) { - const width = bbox.width; - this.coordinatesHaveSpace = (width - timelineToolsMaxWidth - scaleMaxWidth - toggleButtonWidth - 3 * smMargin) > 230; - } - } + const timelineToolsMaxWidth = 420; + const scaleMaxWidth = 100; + const toggleButtonWidth = 24; + const smMargin = 5; + const mapCanvas = document.getElementsByClassName('mapboxgl-canvas'); + if(mapCanvas && mapCanvas.length > 0) { + const bbox = mapCanvas[0].getBoundingClientRect(); + if (bbox) { + const width = bbox.width; + this.coordinatesHaveSpace = (width - timelineToolsMaxWidth - scaleMaxWidth - toggleButtonWidth - 3 * smMargin) > 230; + } +} } /** * Transfer shortcuts from the visible ones to the extra ones based on the space available in the window */ private adjustVisibleShortcuts(): void { - // Change visibility of shortcuts by merging them together - if (!this.shortcuts) { - return; - } + // Change visibility of shortcuts by merging them together + if(!this.shortcuts) { + return; +} - this.shortcuts = [...this.shortcuts, ...this.extraShortcuts]; - this.extraShortcuts = new Array(); - this.showShortcuts = true; - this.cdr.detectChanges(); - - // The threshold is based on the window inner size and the available size for the shortcuts - // The shortcuts are spaced on the left from the menu, and must not overflow on the legend on the right, - // with a minimum spacing equal to the one on the left. - const previewListOpen = !!this.previewListContrib && !this.resultlistService.listOpen - && this.resultListConfigPerContId.get(this.previewListContrib.identifier)?.hasGridMode; - const mapActionsAndLegendWidth = 270; - const leftMenuWidth = 48; - this.showMoreShortcutsWidth = document.getElementById('extra-shortcuts-title').getBoundingClientRect().width; - const threshold = window.innerWidth - leftMenuWidth - - (this.resultlistService.listOpen ? this.listWidth : previewListOpen ? this.previewListWidth : 0) - - this.spacing - this.showMoreShortcutsWidth - this.spacing - mapActionsAndLegendWidth; - - const widths = this.shortcuts.map((_, idx) => document.getElementById(`shortcut-${idx}`).getBoundingClientRect().width); - let cumulativeWidth = 0; - let breakOffIndex = 0; - - // Find the index of the first shortcut that does not fit - for (const width of widths) { - cumulativeWidth += width; - if (cumulativeWidth > threshold) { - break; - } - breakOffIndex++; - } +this.shortcuts = [...this.shortcuts, ...this.extraShortcuts]; +this.extraShortcuts = new Array(); +this.showShortcuts = true; +this.cdr.detectChanges(); + +// The threshold is based on the window inner size and the available size for the shortcuts +// The shortcuts are spaced on the left from the menu, and must not overflow on the legend on the right, +// with a minimum spacing equal to the one on the left. +const previewListOpen = !!this.previewListContrib && !this.resultlistService.listOpen + && this.resultListConfigPerContId.get(this.previewListContrib.identifier)?.hasGridMode; +const mapActionsAndLegendWidth = 270; +const leftMenuWidth = 48; +this.showMoreShortcutsWidth = document.getElementById('extra-shortcuts-title').getBoundingClientRect().width; +const threshold = window.innerWidth - leftMenuWidth + - (this.resultlistService.listOpen ? this.listWidth : previewListOpen ? this.previewListWidth : 0) + - this.spacing - this.showMoreShortcutsWidth - this.spacing - mapActionsAndLegendWidth; + +const widths = this.shortcuts.map((_, idx) => document.getElementById(`shortcut-${idx}`).getBoundingClientRect().width); +let cumulativeWidth = 0; +let breakOffIndex = 0; + +// Find the index of the first shortcut that does not fit +for (const width of widths) { + cumulativeWidth += width; + if (cumulativeWidth > threshold) { + break; + } + breakOffIndex++; +} - // Transfer extra shortcuts in the dedicated list - if (breakOffIndex !== this.shortcuts.length) { - this.extraShortcuts = this.shortcuts.splice(breakOffIndex, this.shortcuts.length - breakOffIndex); - } +// Transfer extra shortcuts in the dedicated list +if (breakOffIndex !== this.shortcuts.length) { + this.extraShortcuts = this.shortcuts.splice(breakOffIndex, this.shortcuts.length - breakOffIndex); +} - // If the shortcut that was open got transfered, open the extra shortcuts - if (this.shortcutOpen >= this.shortcuts.length) { - this.isExtraShortcutsOpen = true; - } +// If the shortcut that was open got transfered, open the extra shortcuts +if (this.shortcutOpen >= this.shortcuts.length) { + this.isExtraShortcutsOpen = true; +} - this.showShortcuts = false; +this.showShortcuts = false; } private adjustMapOffset() { - this.recalculateExtend = true; - this.mapglComponent.map.fitBounds(this.mapglComponent.map.getBounds()); - } + this.recalculateExtend = true; + this.mapglComponent.map.fitBounds(this.mapglComponent.map.getBounds()); +} private getVisibleElementLayerFilter(l, ids) { - const lFilter = this.mapglComponent.layersMap.get(l).filter; - const filters = []; - if (lFilter) { - lFilter.forEach(f => { - filters.push(f); - }); - } - if (filters.length === 0) { - filters.push('all'); - } - filters.push([ - 'match', - ['get', 'id'], - Array.from(new Set(ids)), - true, - false - ]); - return filters; + const lFilter = this.mapglComponent.layersMap.get(l).filter; + const filters = []; + if (lFilter) { + lFilter.forEach(f => { + filters.push(f); + }); + } + if (filters.length === 0) { + filters.push('all'); } + filters.push([ + 'match', + ['get', 'id'], + Array.from(new Set(ids)), + true, + false + ]); + return filters; +} private clearWindowData(contributor: MapContributor) { - contributor.getConfigValue('layers_sources') - .filter(ls => ls.source.startsWith('feature-') && ls.render_mode === FeatureRenderMode.window) - .map(ls => ls.source) - .forEach(source => contributor.clearData(source)); - } + contributor.getConfigValue('layers_sources') + .filter(ls => ls.source.startsWith('feature-') && ls.render_mode === FeatureRenderMode.window) + .map(ls => ls.source) + .forEach(source => contributor.clearData(source)); +} private getParamValue(param: string): string { - let paramValue = null; - const url = window.location.href; - const regex = new RegExp('[?&]' + param + '(=([^&#]*)|&|#|$)'); - const results = regex.exec(url); - if (results && results[2]) { - paramValue = results[2]; - } - return paramValue; + let paramValue = null; + const url = window.location.href; + const regex = new RegExp('[?&]' + param + '(=([^&#]*)|&|#|$)'); + const results = regex.exec(url); + if (results && results[2]) { + paramValue = results[2]; } + return paramValue; +} private actionOnItemEvent(data, mapContributor: MapContributor, listContributor: ResultListContributor, collection: string) { + console.log(data.action) + console.log(data.action.id) switch (data.action.id) { - case 'zoomToFeature': - if (!!mapContributor) { - mapContributor - .getBoundsToFit(data.elementidentifier, collection) - .subscribe(bounds => { - this.visualizeService.fitbounds = bounds; - }); - } - break; - case 'visualize': - if (!!this.resultListConfigPerContId.get(listContributor.identifier)) { - const urlVisualisationTemplate = this.resultListConfigPerContId.get(listContributor.identifier).visualisationLink; + case 'zoomToFeature': + if (!!mapContributor) { + mapContributor + .getBoundsToFit(data.elementidentifier, collection) + .subscribe(bounds => { + console.log(bounds) + this.visualizeService.fitbounds = bounds; + }); + } + break; + case 'visualize': + if (!!this.resultListConfigPerContId.get(listContributor.identifier)) { + const urlVisualisationTemplate = this.resultListConfigPerContId.get(listContributor.identifier).visualisationLink; + console.log(data.action.activated) + if (!data.action.activated) { this.visualizeService.getVisuInfo(data.elementidentifier, collection, urlVisualisationTemplate).subscribe(url => { this.visualizeService.displayDataOnMap(url, data.elementidentifier, this.collectionToDescription.get(collection).geometry_path, this.collectionToDescription.get(collection).centroid_path, collection); }); + } else { + this.visualizeService.removeRasters(data.elementidentifier.idValue); } - break; - case 'download': - if (!!this.resultListConfigPerContId.get(listContributor.identifier)) { - const urlDownloadTemplate = this.resultListConfigPerContId.get(listContributor.identifier).downloadLink; - if (urlDownloadTemplate) { - this.visualizeService.getVisuInfo(data.elementidentifier, collection, urlDownloadTemplate).subscribe(url => { - const win = window.open(url, '_blank'); - win.focus(); - }); - } + } + break; + case 'download': + if (!!this.resultListConfigPerContId.get(listContributor.identifier)) { + const urlDownloadTemplate = this.resultListConfigPerContId.get(listContributor.identifier).downloadLink; + if (urlDownloadTemplate) { + this.visualizeService.getVisuInfo(data.elementidentifier, collection, urlDownloadTemplate).subscribe(url => { + const win = window.open(url, '_blank'); + win.focus(); + }); } - break; - case 'production': - this.process([data.elementidentifier.idValue], collection); - break; - } + } + break; + case 'production': + this.process([data.elementidentifier.idValue], collection); + break; } +} private process(ids: string[], collection: string) { - const maxItems = this.arlasSettingsService.getProcessSettings().max_items; - if (ids.length <= maxItems) { - this.processService.load().subscribe({ - next: () => { - this.processService.getItemsDetail( - this.collectionToDescription.get(collection).id_path, - ids, - collection - ).subscribe({ - next: (item: any) => { - this.downloadDialogRef = this.dialog - .open(AiasDownloadComponent, { - minWidth: '520px', - maxWidth: '60vw', - data: { - ids, - collection, - nbProducts: ids.length, - itemDetail: item, - wktAoi: this.mapglComponent.getAllPolygon('wkt') - } - }); - } - }); - } - }); - } else { - this.snackbar.open( - this.translate.instant('You have exceeded the number of products authorised for a single download') + ' (' + maxItems + ')', 'X', - { - horizontalPosition: 'center', - verticalPosition: 'top', - duration: 5000 - } - ); - } + const maxItems = this.arlasSettingsService.getProcessSettings().max_items; + if (ids.length <= maxItems) { + this.processService.load().subscribe({ + next: () => { + this.processService.getItemsDetail( + this.collectionToDescription.get(collection).id_path, + ids, + collection + ).subscribe({ + next: (item: any) => { + this.downloadDialogRef = this.dialog + .open(AiasDownloadComponent, { + minWidth: '520px', + maxWidth: '60vw', + data: { + ids, + collection, + nbProducts: ids.length, + itemDetail: item, + wktAoi: this.mapglComponent.getAllPolygon('wkt') + } + }); + } + }); + } + }); + } else { + this.snackbar.open( + this.translate.instant('You have exceeded the number of products authorised for a single download') + ' (' + maxItems + ')', 'X', + { + horizontalPosition: 'center', + verticalPosition: 'top', + duration: 5000 + } + ); } +} private waitFor(variable, callback) { - const interval = setInterval(() => { - if (variable !== undefined) { - clearInterval(interval); - callback(); - } - }, 100); - } + const interval = setInterval(() => { + if (variable !== undefined) { + clearInterval(interval); + callback(); + } + }, 100); +} } diff --git a/src/app/services/visualize.service.ts b/src/app/services/visualize.service.ts index bb8a2a45..64ec4918 100644 --- a/src/app/services/visualize.service.ts +++ b/src/app/services/visualize.service.ts @@ -200,7 +200,7 @@ export class VisualizeService { this.getBoundsAndCenter(elementidentifier.idFieldName, elementidentifier.idValue, geometryPath, centroidPath, collection) .subscribe(d => { - this.addWMTS(url, 25, d.box, elementidentifier.idValue); + this.addRaster(url, 25, d.box, elementidentifier.idValue); this.fitbounds = d.bounds; }); } else {