diff --git a/projects/arlas-components/src/lib/components/mapgl-basemap/mapgl-basemap.component.html b/projects/arlas-components/src/lib/components/mapgl-basemap/mapgl-basemap.component.html index c68d9ad9..c24c9de9 100644 --- a/projects/arlas-components/src/lib/components/mapgl-basemap/mapgl-basemap.component.html +++ b/projects/arlas-components/src/lib/components/mapgl-basemap/mapgl-basemap.component.html @@ -1,6 +1,6 @@
- -
+ +
@@ -10,14 +10,4 @@
- -
-
-
- wallpaper -
-
{{theme.name | translate}}
-
-
-
diff --git a/projects/arlas-components/src/lib/components/mapgl-basemap/mapgl-basemap.component.ts b/projects/arlas-components/src/lib/components/mapgl-basemap/mapgl-basemap.component.ts index b16d5485..660466f3 100644 --- a/projects/arlas-components/src/lib/components/mapgl-basemap/mapgl-basemap.component.ts +++ b/projects/arlas-components/src/lib/components/mapgl-basemap/mapgl-basemap.component.ts @@ -5,9 +5,8 @@ import { MapSource } from '../mapgl/model/mapSource'; import { MapglService } from '../../services/mapgl.service'; import { HttpClient } from '@angular/common/http'; import { MapboxBasemapService } from '../mapgl/basemaps/basemap.service'; -import { BasemapStyle, OfflineBasemapTheme } from '../mapgl/basemaps/basemap.config'; -import { OfflineBasemap } from '../mapgl/basemaps/offline-basemap'; -import { OnlineBasemap } from '../mapgl/basemaps/online-basemap'; +import { BasemapStyle } from '../mapgl/basemaps/basemap.config'; +import { ArlasBasemaps } from '../mapgl/basemaps/basemaps'; @Component({ selector: 'arlas-mapgl-basemap', @@ -24,9 +23,8 @@ export class MapglBasemapComponent implements OnInit { @Output() public blur = new Subject(); public showList = false; - public isOnline = true; - public onlineBasemaps: OnlineBasemap; - public offlineBasemaps: OfflineBasemap; + public basemaps: ArlasBasemaps; + public constructor( private mapglService: MapglService, @@ -34,59 +32,42 @@ export class MapglBasemapComponent implements OnInit { private http: HttpClient) { } public ngOnInit(): void { - this.isOnline = this.basemapService.isOnline(); - if (this.isOnline) { - this.initOnlineBasemaps(); - } else { - this.initOfflineBasemaps(); - } + this.initBasemaps(); } - private initOnlineBasemaps() { - this.onlineBasemaps = this.basemapService.onlineBasemaps; - const styles = this.onlineBasemaps.styles(); - if (!!this.onlineBasemaps && !!styles) { - this.showList = styles.length > 1; - styles.filter(bm => !bm.image).forEach(bm => { - const splitUrl = bm.styleFile.toString().split('/style.json?key='); - if (splitUrl.length === 2) { - bm.image = `${splitUrl[0]}/0/0/0.png?key=${splitUrl[1]}`; - } - }); + private initBasemaps() { + this.basemaps = this.basemapService.basemaps; + if (!!this.basemaps) { + const styles = this.basemaps.styles(); + if (!!styles) { + this.showList = styles.length > 1; + styles.filter(bm => !bm.image).forEach(bm => { + if (bm.type !== 'protomap') { + const splitUrl = bm.styleFile.toString().split('/style.json?key='); + if (splitUrl.length === 2) { + bm.image = `${splitUrl[0]}/0/0/0.png?key=${splitUrl[1]}`; + } + } + }); + } } } - private initOfflineBasemaps() { - this.offlineBasemaps = this.basemapService.offlineBasemaps; - if (!!this.offlineBasemaps && !!this.offlineBasemaps.themes()) { - this.showList = this.offlineBasemaps.themes().length > 1; + public onChangeBasemap(newBasemap: BasemapStyle) { + const selectedBasemap = this.basemaps.getSelected(); + if (selectedBasemap.type === 'protomap') { + this.basemapService.removeProtomapBasemap(this.map); } + this.setBaseMapStyle(newBasemap); } - public onChangeOfflineBasemap(selectedTheme: OfflineBasemapTheme) { - this.basemapService.changeOfflineBasemap(this.map, selectedTheme); - } - - public onChangeOnlineBasemap(selectedStyle: BasemapStyle) { - this.setBaseMapStyle(selectedStyle.styleFile); - localStorage.setItem(this.LOCAL_STORAGE_BASEMAPS, JSON.stringify(selectedStyle)); - this.onlineBasemaps.setSelected(selectedStyle); - } - - public setBaseMapStyle(style: string | mapboxgl.Style) { + public setBaseMapStyle(newBasemap: BasemapStyle) { if (this.map) { - const selectedStyle = this.onlineBasemaps.getSelected(); - if (typeof selectedStyle.styleFile === 'string') { - this.http.get(selectedStyle.styleFile).subscribe((s: any) => { - this.setStyle(s, style); - }); - } else { - this.setStyle(selectedStyle.styleFile, style); - } + this.setStyle(this.basemaps.getSelected().styleFile as mapboxgl.Style, newBasemap); } } - public setStyle(s: mapboxgl.Style, style: string | mapboxgl.Style) { + public setStyle(s: mapboxgl.Style, newBasemap: BasemapStyle) { const selectedBasemapLayersSet = new Set(); const layers: Array = (this.map).getStyle().layers; const sources = (this.map).getStyle().sources; @@ -95,7 +76,7 @@ export class MapglBasemapComponent implements OnInit { } const layersToSave = new Array(); const sourcesToSave = new Array(); - layers.filter((l: mapboxgl.Layer) => !selectedBasemapLayersSet.has(l.id)).forEach(l => { + layers.filter((l: mapboxgl.Layer) => !selectedBasemapLayersSet.has(l.id) && !!l.source).forEach(l => { layersToSave.push(l); if (sourcesToSave.filter(ms => ms.id === l.source.toString()).length === 0) { sourcesToSave.push({ id: l.source.toString(), source: sources[l.source.toString()] }); @@ -110,9 +91,16 @@ export class MapglBasemapComponent implements OnInit { } }); } - this.map.setStyle(style).once('styledata', () => { + const initStyle = this.basemapService.getInitStyle(newBasemap); + this.map.setStyle(initStyle).once('styledata', () => { this.mapglService.addSourcesToMap(sourcesToSave, this.map); layersToSave.forEach(l => this.map.addLayer(l as AnyLayer)); + localStorage.setItem(this.LOCAL_STORAGE_BASEMAPS, JSON.stringify(newBasemap)); + this.basemaps.setSelected(newBasemap); + if (newBasemap.type === 'protomap') { + this.basemapService.addProtomapBasemap(this.map); + this.basemapService.notifyProtomapAddition(); + } this.basemapChanged.emit(); }); } diff --git a/projects/arlas-components/src/lib/components/mapgl/basemaps/basemap.config.ts b/projects/arlas-components/src/lib/components/mapgl/basemaps/basemap.config.ts index b025327f..ac70ec9a 100644 --- a/projects/arlas-components/src/lib/components/mapgl/basemaps/basemap.config.ts +++ b/projects/arlas-components/src/lib/components/mapgl/basemaps/basemap.config.ts @@ -18,38 +18,10 @@ */ -// DISCLAIMER -// -- The word 'Style' is reserved to online basemaps. -// -- The word 'Theme' is reserved to offline basemaps. - -export interface BasemapsConfig { - isOnline: boolean; - onlineConfig?: OnlineBasemapConfig; - offlineConfig?: OfflineBasemapsConfig; -} - -export interface OnlineBasemapConfig { - styles: BasemapStyle[]; - defaultStyle: BasemapStyle; -} - -export interface OfflineBasemapsConfig { - /** Path to pmtiles file */ - url: string; - glyphsUrl: string; - themes: OfflineBasemapTheme[]; - defaultTheme: OfflineBasemapTheme; -} - - -export interface OfflineBasemapTheme { - layers: mapboxgl.Layer[]; - name: string; -} - export interface BasemapStyle { name: string; styleFile: string | mapboxgl.Style; image?: string; + type?: 'protomap' | 'mapbox'; } diff --git a/projects/arlas-components/src/lib/components/mapgl/basemaps/basemap.service.ts b/projects/arlas-components/src/lib/components/mapgl/basemaps/basemap.service.ts index eb8397ed..1ff765a0 100644 --- a/projects/arlas-components/src/lib/components/mapgl/basemaps/basemap.service.ts +++ b/projects/arlas-components/src/lib/components/mapgl/basemaps/basemap.service.ts @@ -21,97 +21,99 @@ import { Injectable } from '@angular/core'; import { ArlasBasemaps } from './basemaps'; import * as pmtiles from 'pmtiles'; import { CustomProtocol } from '../custom-protocol/mapbox-gl-custom-protocol'; -import { OfflineBasemapTheme } from './basemap.config'; +import { BasemapStyle } from './basemap.config'; import mapboxgl from 'mapbox-gl'; -import { OfflineBasemap } from './offline-basemap'; -import { Subject } from 'rxjs'; -import { OnlineBasemap } from './online-basemap'; +import { Observable, Subject, forkJoin, of, tap } from 'rxjs'; +import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class MapboxBasemapService { - private basemaps: ArlasBasemaps; - private LOCAL_STORAGE_BASEMAPS = 'arlas_last_base_map'; + public basemaps: ArlasBasemaps; - public onlineBasemaps: OnlineBasemap; - public offlineBasemaps: OfflineBasemap; + private protomapBasemapAddedSource = new Subject(); + public protomapBasemapAdded$ = this.protomapBasemapAddedSource.asObservable(); - private offlineBasemapChangedSource = new Subject(); - public offlineBasemapChanged$ = this.offlineBasemapChangedSource.asObservable(); + public constructor(private http: HttpClient) {} public setBasemaps(basemaps: ArlasBasemaps) { this.basemaps = basemaps; - this.onlineBasemaps = basemaps.onlineBasemaps; - this.offlineBasemaps = basemaps.offlineBasemaps; } - /** Add offline basemap only if configured. */ - public addOfflineBasemap(map: mapboxgl.Map) { - if (!!this.basemaps && this.basemaps.isOnline) { - return; + public addProtomapBasemap(map: mapboxgl.Map) { + const selectedBasemap = this.basemaps.getSelected(); + if (selectedBasemap.type === 'protomap') { + const styleFile = selectedBasemap.styleFile as mapboxgl.Style; + const pmtilesSource = styleFile.sources['arlas_protomaps_source']; + if (pmtilesSource) { + map.addSource('arlas_protomaps_source', pmtilesSource as any); + styleFile.layers.forEach(l =>{ + if (!!map.getLayer(l.id)) { + map.removeLayer(l.id); + } + map.addLayer(l as any); + }); + } + } else { + /** no action needed. The base map has been added already thanks to getInitStyle */ + } + } + + public notifyProtomapAddition() { + this.protomapBasemapAddedSource.next(true); + } + + public removeProtomapBasemap(map: mapboxgl.Map) { + const selectedBasemap = this.basemaps.getSelected(); + if (selectedBasemap.type === 'protomap') { + (selectedBasemap.styleFile as mapboxgl.Style).layers.forEach(l => { + if (!!map.getLayer(l.id)) { + map.removeLayer(l.id); + } + }); + map.removeSource('arlas_protomaps_source'); } + } + + public declareProtomapProtocol(map: mapboxgl.Map) { const protocol = new pmtiles.Protocol(); /** addSourceType is private */ (map as any).addSourceType('pmtiles-type', CustomProtocol(mapboxgl).vector, (e) => e && console.error('There was an error', e)); (mapboxgl as any).addProtocol('pmtiles', protocol.tile); - const pmtilesUrl = this.offlineBasemaps.getUrl(); - map.addSource('protomaps_source', { - 'type': 'pmtiles-type', - 'tiles': ['pmtiles://' + pmtilesUrl + '/{z}/{x}/{y}'], - 'maxzoom': 21 - } as any); + } - if (this.offlineBasemaps && !!this.offlineBasemaps.getSelected()) { - this.offlineBasemaps.getSelected().layers.forEach(l =>{ - map.addLayer(l as any); - }); + public getInitStyle(selected: BasemapStyle) { + if (selected.type === 'protomap') { + /** This is necessaty to make it work for mapbox. */ + const clonedStyleFile: mapboxgl.Style = Object.assign({}, selected.styleFile as mapboxgl.Style); + clonedStyleFile.sources = {}; + clonedStyleFile.layers = [{ + id: 'backgrounds', + type: 'background', + paint: { + 'background-color': 'rgba(0,0,0,0)' + } + }]; + return clonedStyleFile; } + return selected.styleFile; } - public changeOfflineBasemap(map: mapboxgl.Map, newTheme: OfflineBasemapTheme) { - const currentTheme = this.offlineBasemaps.getSelected(); - currentTheme.layers.forEach(l => { - if (!!map.getLayer(l.id)) { - map.removeLayer(l.id); - } - }); - this.offlineBasemaps.setSelected(newTheme).getSelected().layers.forEach(l =>{ - map.addLayer(l as any); - }); - this.offlineBasemapChangedSource.next(true); - } - public isOnline(): boolean { - if (!this.basemaps) { - throw new Error('No basemap configuration is set'); - } - return !!this.basemaps && this.basemaps.isOnline; + public fetchSources$() { + const sources$: Observable[] = []; + this.basemaps.styles().forEach(s => sources$.push(this.getStyleFile(s).pipe( + tap(sf => s.styleFile = sf as mapboxgl.Style) + ))); + return forkJoin(sources$); } - public getInitStyle() { - if (this.basemaps.isOnline) { - const initStyle = this.onlineBasemaps.getSelected(); - return initStyle.styleFile; + private getStyleFile(b: BasemapStyle): Observable { + if (typeof b.styleFile === 'string') { + return this.http.get(b.styleFile) as Observable; } else { - return { - version: 8, - name: 'Empty', - metadata: { - 'mapbox:autocomposite': true - }, - glyphs: this.offlineBasemaps.getGlyphs(), - sources: {}, - layers: [ - { - id: 'backgrounds', - type: 'background', - paint: { - 'background-color': 'rgba(0,0,0,0)' - } - } - ] - } as mapboxgl.Style; + return of(b.styleFile); } } } diff --git a/projects/arlas-components/src/lib/components/mapgl/basemaps/basemaps.ts b/projects/arlas-components/src/lib/components/mapgl/basemaps/basemaps.ts index 6e5e9ec8..f611b64e 100644 --- a/projects/arlas-components/src/lib/components/mapgl/basemaps/basemaps.ts +++ b/projects/arlas-components/src/lib/components/mapgl/basemaps/basemaps.ts @@ -1,50 +1,65 @@ -import { BasemapStyle, BasemapsConfig, OfflineBasemapsConfig } from './basemap.config'; -import { OfflineBasemap } from './offline-basemap'; -import { OnlineBasemap } from './online-basemap'; +import { BasemapStyle } from './basemap.config'; export class ArlasBasemaps { - private config: BasemapsConfig; - public isOnline; - public onlineBasemaps: OnlineBasemap; - public offlineBasemaps: OfflineBasemap; - public constructor(config: BasemapsConfig, defaultBasemapStyle?: BasemapStyle, basemapStyles?: BasemapStyle[]) { - if (defaultBasemapStyle && basemapStyles && !config) { - /** Retrocompatibility code. To be removed in v25.0.0 */ - this.isOnline = true; - this.onlineBasemaps = new OnlineBasemap({ - styles: basemapStyles, - defaultStyle: defaultBasemapStyle - }); + private LOCAL_STORAGE_BASEMAPS = 'arlas_last_base_map'; + public _selectedStyle: BasemapStyle; + public _styles: BasemapStyle[]; + private defaultBasemapStyle: BasemapStyle; + private basemapStyles?: BasemapStyle[]; + + public constructor(defaultBasemapStyle?: BasemapStyle, basemapStyles?: BasemapStyle[]) { + if (defaultBasemapStyle && basemapStyles) { + this.defaultBasemapStyle = defaultBasemapStyle; + this.basemapStyles = basemapStyles; } else { - this.config = config; - this.throwErrorBasemapAbscense(); - this.throwErrorOnlineAbscense(); - this.throwErrorOfflineAbscense(); - this.isOnline = config.isOnline; - if (this.isOnline) { - this.onlineBasemaps = new OnlineBasemap(this.config.onlineConfig); - } else { - this.offlineBasemaps = new OfflineBasemap(this.config.offlineConfig); - } + // todo throw error ? } } - private throwErrorBasemapAbscense() { - if (!this.config) { - throw new Error('Basemap configuration is not set.'); + public styles(): BasemapStyle[] { + if (!this._styles) { + this._styles = this.getAllBasemapStyles(this.defaultBasemapStyle, this.basemapStyles); } + return this._styles; + } + + public setSelected(styele: BasemapStyle) { + this._selectedStyle = styele; + return this; } - private throwErrorOnlineAbscense() { - if (this.config.isOnline && !this.config.onlineConfig) { - throw new Error('Online basemap configuration is not set.'); + public getSelected(): BasemapStyle { + if (!this._selectedStyle) { + const styles = this.styles(); + const localStorageBasemapStyle: BasemapStyle = JSON.parse(localStorage.getItem(this.LOCAL_STORAGE_BASEMAPS)); + if (localStorageBasemapStyle && styles.filter(b => b.name === localStorageBasemapStyle.name + && b.styleFile === localStorageBasemapStyle.styleFile).length > 0) { + this._selectedStyle = localStorageBasemapStyle; + return this._selectedStyle; + } + if (styles && styles.length > 0) { + this._selectedStyle = styles[0]; + } else { + throw new Error('No Style is defined for the online basemap'); + } } + return this._selectedStyle; } - private throwErrorOfflineAbscense() { - if (this.config.isOnline && !this.config.offlineConfig) { - throw new Error('Offline basemap configuration is not set.'); + + private getAllBasemapStyles(defaultBasemapTheme: BasemapStyle, basemapStyles: BasemapStyle[]): Array { + const allBasemapStyles = new Array(); + if (basemapStyles) { + basemapStyles.forEach(b => allBasemapStyles.push(b)); + if (defaultBasemapTheme) { + if (basemapStyles.map(b => b.name).filter(n => n === defaultBasemapTheme.name).length === 0) { + allBasemapStyles.push(defaultBasemapTheme); + } + } + } else if (defaultBasemapTheme) { + allBasemapStyles.push(defaultBasemapTheme); } + return allBasemapStyles; } } diff --git a/projects/arlas-components/src/lib/components/mapgl/basemaps/offline-basemap.ts b/projects/arlas-components/src/lib/components/mapgl/basemaps/offline-basemap.ts deleted file mode 100644 index 9841910e..00000000 --- a/projects/arlas-components/src/lib/components/mapgl/basemaps/offline-basemap.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { OfflineBasemapTheme, OfflineBasemapsConfig } from './basemap.config'; - -export class OfflineBasemap { - - private config: OfflineBasemapsConfig; - public _selectedTheme: OfflineBasemapTheme; - public _themes: OfflineBasemapTheme[]; - - public constructor(config: OfflineBasemapsConfig) { - this.config = config; - this.getSelected(); - } - - public themes(): OfflineBasemapTheme[] { - if (!this._themes) { - this._themes = this.getAllBasemapThemes(this.config.defaultTheme, this.config.themes); - } - return this._themes; - } - - public setSelected(theme: OfflineBasemapTheme) { - this._selectedTheme = theme; - return this; - } - - public getSelected(): OfflineBasemapTheme { - if (!this._selectedTheme) { - const themes = this.themes(); - if (themes && themes.length > 0) { - this._selectedTheme = themes[0]; - } else { - throw new Error('No theme is defined for the offline basemap'); - } - } - return this._selectedTheme; - } - - public getGlyphs() { - return this.config.glyphsUrl; - } - - public getUrl() { - return this.config.url; - } - - private getAllBasemapThemes(defaultBasemapTheme: OfflineBasemapTheme, basemapThemes: OfflineBasemapTheme[]): Array { - const allBasemapThemes = new Array(); - if (basemapThemes) { - basemapThemes.forEach(b => allBasemapThemes.push(b)); - if (defaultBasemapTheme) { - if (basemapThemes.map(b => b.name).filter(n => n === defaultBasemapTheme.name).length === 0) { - allBasemapThemes.push(defaultBasemapTheme); - } - } - } else if (defaultBasemapTheme) { - allBasemapThemes.push(defaultBasemapTheme); - } - return allBasemapThemes; - } -} diff --git a/projects/arlas-components/src/lib/components/mapgl/basemaps/online-basemap.ts b/projects/arlas-components/src/lib/components/mapgl/basemaps/online-basemap.ts deleted file mode 100644 index 2f3b5e6f..00000000 --- a/projects/arlas-components/src/lib/components/mapgl/basemaps/online-basemap.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { BasemapStyle, OnlineBasemapConfig } from './basemap.config'; - -export class OnlineBasemap { - - private LOCAL_STORAGE_BASEMAPS = 'arlas_last_base_map'; - - private config: OnlineBasemapConfig; - public _selectedStyle: BasemapStyle; - public _styles: BasemapStyle[]; - - public constructor(config: OnlineBasemapConfig) { - this.config = config; - this.getSelected(); - } - - public styles(): BasemapStyle[] { - if (!this._styles) { - this._styles = this.getAllBasemapStyles(this.config.defaultStyle, this.config.styles); - } - return this._styles; - } - - public setSelected(styele: BasemapStyle) { - this._selectedStyle = styele; - return this; - } - - public getSelected(): BasemapStyle { - if (!this._selectedStyle) { - const styles = this.styles(); - const localStorageBasemapStyle: BasemapStyle = JSON.parse(localStorage.getItem(this.LOCAL_STORAGE_BASEMAPS)); - if (localStorageBasemapStyle && styles.filter(b => b.name === localStorageBasemapStyle.name - && b.styleFile === localStorageBasemapStyle.styleFile).length > 0) { - this._selectedStyle = localStorageBasemapStyle; - return this._selectedStyle; - } - if (styles && styles.length > 0) { - this._selectedStyle = styles[0]; - } else { - throw new Error('No Style is defined for the online basemap'); - } - } - return this._selectedStyle; - } - - - private getAllBasemapStyles(defaultBasemapTheme: BasemapStyle, basemapStyles: BasemapStyle[]): Array { - const allBasemapStyles = new Array(); - if (basemapStyles) { - basemapStyles.forEach(b => allBasemapStyles.push(b)); - if (defaultBasemapTheme) { - if (basemapStyles.map(b => b.name).filter(n => n === defaultBasemapTheme.name).length === 0) { - allBasemapStyles.push(defaultBasemapTheme); - } - } - } else if (defaultBasemapTheme) { - allBasemapStyles.push(defaultBasemapTheme); - } - return allBasemapStyles; - } -} diff --git a/projects/arlas-components/src/lib/components/mapgl/mapgl.component.ts b/projects/arlas-components/src/lib/components/mapgl/mapgl.component.ts index 814e3576..55763b4e 100644 --- a/projects/arlas-components/src/lib/components/mapgl/mapgl.component.ts +++ b/projects/arlas-components/src/lib/components/mapgl/mapgl.component.ts @@ -24,7 +24,7 @@ import { } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Subject, Subscription, fromEvent } from 'rxjs'; -import { debounceTime } from 'rxjs/operators'; +import { debounceTime, finalize } from 'rxjs/operators'; import { ElementIdentifier } from '../results/utils/results.utils'; import { ControlButton, PitchToggle, DrawControl } from './mapgl.component.control'; import { paddedBounds, MapExtend, LegendData } from './mapgl.component.util'; @@ -50,7 +50,7 @@ import * as styles from './model/theme'; import { getLayerName } from '../componentsUtils'; import { MapboxAoiDrawService } from './draw/draw.service'; import { AoiDimensions } from './draw/draw.models'; -import { BasemapStyle, BasemapsConfig } from './basemaps/basemap.config'; +import { BasemapStyle } from './basemaps/basemap.config'; import { MapboxBasemapService } from './basemaps/basemap.service'; import { ArlasBasemaps } from './basemaps/basemaps'; @@ -172,20 +172,17 @@ export class MapglComponent implements OnInit, AfterViewInit, OnChanges, OnDestr /** * @Input : Angular * @description Default style of the base map - * @deprecated Use [basemapConfig] instead */ @Input() public defaultBasemapStyle: BasemapStyle = { name: 'Positron Style', - styleFile: 'http://demo.arlas.io:82/styles/positron/style.json' + styleFile: 'http://demo.arlas.io:82/styles/positron/style.json', }; /** * @Input : Angular * @description List of styles to apply to the base map - * @deprecated Use [basemapConfig] instead */ @Input() public basemapStyles = new Array(); - @Input() public basemapConfig: BasemapsConfig; /** * @Input : Angular * @description Zoom of the map when it's initialized @@ -557,7 +554,7 @@ export class MapglComponent implements OnInit, AfterViewInit, OnChanges, OnDestr } public ngOnInit() { - this.offlineBasemapChangeSubscription = this.basemapService.offlineBasemapChanged$.subscribe(() => this.reorderLayers()); + this.offlineBasemapChangeSubscription = this.basemapService.protomapBasemapAdded$.subscribe(() => this.reorderLayers()); } /** puts the visualisation set list in the new order after dropping */ @@ -689,10 +686,16 @@ export class MapglComponent implements OnInit, AfterViewInit, OnChanges, OnDestr if (this.minZoom === undefined || this.minZoom === null) { this.maxZoom = 0; } - this.basemapService.setBasemaps(new ArlasBasemaps(this.basemapConfig, this.defaultBasemapStyle, this.basemapStyles)); + this.basemapService.setBasemaps(new ArlasBasemaps(this.defaultBasemapStyle, this.basemapStyles)); + this.basemapService.fetchSources$() + .pipe(finalize(() => this.declareMap())) + .subscribe(); + } + + public declareMap() { this.map = new mapboxgl.Map({ container: this.id, - style: this.basemapService.getInitStyle(), + style: this.basemapService.getInitStyle(this.basemapService.basemaps.getSelected()), center: this.initCenter, zoom: this.initZoom, maxZoom: this.maxZoom, @@ -761,7 +764,8 @@ export class MapglComponent implements OnInit, AfterViewInit, OnChanges, OnDestr }; this.map.boxZoom.disable(); this.map.on('load', () => { - this.basemapService.addOfflineBasemap(this.map); + this.basemapService.declareProtomapProtocol(this.map); + this.basemapService.addProtomapBasemap(this.map); this.draw.changeMode('static'); if (this.icons) { this.icons.forEach(icon => { diff --git a/projects/arlas-components/src/public-api.ts b/projects/arlas-components/src/public-api.ts index a2654282..1e956ee8 100644 --- a/projects/arlas-components/src/public-api.ts +++ b/projects/arlas-components/src/public-api.ts @@ -18,9 +18,7 @@ export { MapLayers, ARLAS_VSET, LayerEvents, FILLSTROKE_LAYER_PREFIX, ARLAS_ID, PaintValue, ExternalEventLayer, ExternalEvent, SCROLLABLE_ARLAS_ID, FillStroke, LayerMetadata, PaintColor, HOVER_LAYER_PREFIX, SELECT_LAYER_PREFIX } from './lib/components/mapgl/model/mapLayers'; -export { - BasemapStyle, BasemapsConfig, OfflineBasemapTheme, OfflineBasemapsConfig, OnlineBasemapConfig -} from './lib/components/mapgl/basemaps/basemap.config'; +export { BasemapStyle } from './lib/components/mapgl/basemaps/basemap.config'; export { MapSource } from './lib/components/mapgl/model/mapSource'; export { MapExtend, LegendData, Legend, PROPERTY_SELECTOR_SOURCE } from './lib/components/mapgl/mapgl.component.util'; export { AoiDimensions as AoiEdition } from './lib/components/mapgl/draw/draw.models'; diff --git a/projects/arlas-components/tsconfig.lib.json b/projects/arlas-components/tsconfig.lib.json index a9abcb3e..ad24bf84 100644 --- a/projects/arlas-components/tsconfig.lib.json +++ b/projects/arlas-components/tsconfig.lib.json @@ -8,7 +8,6 @@ "declarationMap": true, "inlineSources": true, "types": [], - "allowJs": true, "lib": [ "dom", "es2018"