diff --git a/demo/js/esri-datasets.js b/demo/js/esri-datasets.js index 7591a512..a8200c8a 100644 --- a/demo/js/esri-datasets.js +++ b/demo/js/esri-datasets.js @@ -8,20 +8,81 @@ import { vtsMapStyles27700 } from './mapStyles.js' import { transformGeocodeRequest, transformVtsRequest3857, setupEsriConfig } from './auth.js' const datasets = [ + { + id: 'flood-zones-cc', + label: 'Flood Zones Climate Change', + groupLabel: 'Datasets', + esriGroupId: 'flood-zones', + tiles: `https://tiles.arcgis.com/tiles/JZM7qJpmv7vJ0Hzx/arcgis/rest/services/Flood_Zones_2_and_3_Rivers_and_Sea_CCP1_NON_PRODUCTION/VectorTileServer`, + showInKey: true, + showInMenu: true, + visible: true, + sourceLayer: 'Flood Zones 2 and 3 Rivers and Sea CCP1', + sublayers: [ + { + id: 'climate-change', + label: 'Climate change (2070 to 2125)', + esriStyleLayerId: 'Flood Zones 2 and 3 Rivers and Sea CCP1/Flood Zones plus climate change/1', + showInKey: true, + showInMenu: false, + style: { + fill: { outdoor: '#F4A582', dark: '#BF3D4A' }, + stroke: 'none' + }, + }, + { + id: 'data-unavailable', + label: 'Climate change data unavailable', + style: { // This is used just for the key - so that it renders the pattern correctly. + fillPattern: 'dot', + fillPatternForegroundColor: { outdoor: '#000000', dark: '#ffffff' }, + stroke: { outdoor: '#000000', dark: '#FFFFFF' }, + }, + showInKey: true, + showInMenu: false, + }, + { + id: 'data-unavailable-outline', + style: { + stroke: { outdoor: '#000000', dark: '#FFFFFF' }, + }, + esriStyleLayerId: 'Flood Zones 2 and 3 Rivers and Sea CCP1/Unavailable/0', + showInKey: false, + showInMenu: false, + }, + { + id: 'data-unavailable-light', + visibleWhen: { mapStyleId: ['outdoor', 'black-and-white'] }, + esriStyleLayerId: 'Flood Zones 2 and 3 Rivers and Sea CCP1/Unavailable/1', + esriUseServerStyle: true, + showInKey: false, + showInMenu: false, + }, + { + id: 'data-unavailable-dark', + visibleWhen: { mapStyleId: ['dark'] }, + esriStyleLayerId: 'Flood Zones 2 and 3 Rivers and Sea CCP1/Unavailable/2', + esriUseServerStyle: true, + showInKey: false, + showInMenu: false, + } + ] + }, { id: 'flood-zones', label: 'Flood Zones', groupLabel: 'Datasets', + esriGroupId: 'flood-zones', tiles: `https://tiles.arcgis.com/tiles/JZM7qJpmv7vJ0Hzx/arcgis/rest/services/Flood_Zones_2_and_3_Rivers_and_Sea_NON_PRODUCTION/VectorTileServer`, showInKey: true, - showInMenu: true, + // showInMenu: true, + sourceLayer: 'Flood Zones 2 and 3 Rivers and Sea', sublayers: [ { id: 'flood-zone-2', label: 'Flood Zone 2', - styleLayerId: 'Flood Zones 2 and 3 Rivers and Sea/Flood Zone 2/1', - showInKey: true, - showInMenu: false, + esriStyleLayerId: 'Flood Zones 2 and 3 Rivers and Sea/Flood Zone 2/1', + showInMenu: true, style: { fill: { outdoor: '#1d70b8', dark: '#7fcdbb' }, stroke: 'none' @@ -30,9 +91,8 @@ const datasets = [ { id: 'flood-zone-3', label: 'Flood Zone 3', - styleLayerId: 'Flood Zones 2 and 3 Rivers and Sea/Flood Zone 3/1', - showInKey: true, - showInMenu: false, + esriStyleLayerId: 'Flood Zones 2 and 3 Rivers and Sea/Flood Zone 3/1', + showInMenu: true, style: { fill: { outdoor: '#003078', dark: '#e5f5e0' }, stroke: 'none' @@ -51,8 +111,6 @@ const datasetsPlugin = createDatasetsPlugin({ datasets }) - - const interactiveMap = new InteractiveMap('map', { behaviour: 'mapOnly', mapProvider: esriProvider({ setupConfig: setupEsriConfig }), @@ -79,4 +137,13 @@ const interactiveMap = new InteractiveMap('map', { } }) ] +}) + +const testGlobalVisibility = () => { + setTimeout(() => datasetsPlugin.setDatasetVisibility(false), 3000) + setTimeout(() => datasetsPlugin.setDatasetVisibility(true), 6000) +} + +interactiveMap.on('datasets:ready', function () { + testGlobalVisibility() }) \ No newline at end of file diff --git a/plugins/beta/datasets/src/adapters/esri/esriLayerAdapter.js b/plugins/beta/datasets/src/adapters/esri/esriLayerAdapter.js index 94526656..05e36b01 100644 --- a/plugins/beta/datasets/src/adapters/esri/esriLayerAdapter.js +++ b/plugins/beta/datasets/src/adapters/esri/esriLayerAdapter.js @@ -1,69 +1,197 @@ import VectorTileLayer from '@arcgis/core/layers/VectorTileLayer.js' +import GroupLayer from '@arcgis/core/layers/GroupLayer.js' import { datasetRegistry } from '../../registry/datasetRegistry.js' +import { EsriDataset } from './registry/esriDataset.js' export default class EsriLayerAdapter { constructor (mapProvider, symbolRegistry, patternRegistry) { this._mapProvider = mapProvider this._map = mapProvider.map // TODO: Implement symbolRegistry and patternRegistry usage in the adapter + + // _vectorTileLayers is a map of datasetId to VectorTileLayer instances + // it includes stand alone vectorTileLayers and vectorTileLayers that are part of a groupLayer + // but does not include group layers themselves, which are tracked in _groupLayers + this._vectorTileLayers = {} + + // _vectorTileOpacityLayers is a map of datasetId to VectorTileLayer/GroupLayer where opacity is applied + // it includes stand alone vectorTileLayers and groupLayers that contain vectorTileLayers + // but does not include vectorTileLayers that are part of a groupLayer + this._vectorTileOpacityLayers = {} + + // _groupLayers is a map of esriGroupId to GroupLayer + this._groupLayers = {} + } + + createDataset (datasetDefinition) { + return new EsriDataset(datasetDefinition) } async init (mapStyle) { - console.log('EsriLayerAdapter init', mapStyle) - datasetRegistry.forEachDataset(registryDataset => this._addLayers(registryDataset, mapStyle)) + const topLevelDatasets = datasetRegistry.topLevelDatasets() + // ensure the datasets are added in order + for await (const registryDataset of topLevelDatasets) { + await this._addLayers(registryDataset, mapStyle) + } + + // onMapStyleChange: handles showing and hiding sublayers based on the mapStyle + // and updating the paint properties of the layers based on the dataset/mapStyle style + await this.onMapStyleChange(datasetRegistry.mapStyle, null) + + // Apply opacity to all layers + await this.applyGlobalOpacity() + + // Finally show all layers that are visible based on the dataset/mapStyle visibility + await Promise.all(topLevelDatasets.map(registryDataset => this.applyDatasetVisibility(registryDataset.id))) + + // Log the layers for debugging + // this.logLayers('_vectorTileLayers') + // console.log('this._vectorTileOpacityLayers', this._vectorTileOpacityLayers) + // console.log('this._groupLayers', this._groupLayers) + } + + logLayers (name) { + const obj = this[name] + console.log(`${name}:`) + Object.entries(obj).forEach(([datasetId, layer]) => { + console.log(` ${datasetId}`) + layer.styleRepository.layers.forEach(styleLayer => { + console.log(` ${styleLayer.id}`) + }) + }) + } + + _addGroupLayer (esriGroupId) { + // Either adds a new group layer to the map, or returns an existing one if it already exists + if (!this._groupLayers[esriGroupId]) { + const groupLayer = new GroupLayer({ + id: esriGroupId, + opacity: 1, + visible: true + }) + this._groupLayers[esriGroupId] = groupLayer + this._map.add(groupLayer) + } + return this._groupLayers[esriGroupId] } - _addLayers (registryDataset, mapStyle) { + async _addLayers (registryDataset, mapStyle) { + const { esriGroupId } = registryDataset + const vectorTileParent = esriGroupId ? this._addGroupLayer(esriGroupId) : this._map const vectorTileLayer = new VectorTileLayer({ id: registryDataset.id, url: registryDataset.tiles, opacity: 1, - visible: registryDataset.visible + visible: false }) - this._map.add(vectorTileLayer) + this._vectorTileLayers[registryDataset.id] = vectorTileLayer + this._vectorTileOpacityLayers[registryDataset.id] = esriGroupId ? vectorTileParent : vectorTileLayer + vectorTileParent.add(vectorTileLayer) + return vectorTileLayer.when() } async removeDataset (...args) { - console.log('ESRI: removeDataset', args) + console.log('TODO: removeDataset', args) } async setData (...args) { - console.log('ESRI: setData', args) + console.log('TODO: setData', args) } async applyStyle (...args) { - console.log('ESRI: applyStyle', args) + console.log('TODO: applyStyle', args) } - async applyDatasetVisibility (...args) { - console.log('ESRI: applyDatasetVisibility', args) + _applyStyleLayerVisibility (sublayer, vectorTileLayer) { + const { esriStyleLayerId } = sublayer + if (!esriStyleLayerId) { + return + } + vectorTileLayer.setStyleLayerVisibility(esriStyleLayerId, sublayer.visibility) + } + + _applyRegistryDatasetVisibility (registryDataset) { + // if this is a sublayer, we need to apply the visibility to the vectorTileLayers style sheet + // if this is a top level dataset, we need to apply the visibility to the vectorTileLayer/ groupLayer itself + const { id, isSublayer, visible, parentId } = registryDataset + const vectorTileLayer = this._vectorTileLayers[isSublayer ? parentId : id] + + if (isSublayer) { + this._applyStyleLayerVisibility(registryDataset, vectorTileLayer) + // Don't apply the visibility change to the parent, since the parent may have other sublayers that are visible + return + } else if (visible) { + // No need to apply style layer visibility for datasets that are hidden + registryDataset.sublayers.forEach(sublayer => this._applyStyleLayerVisibility(sublayer, vectorTileLayer)) + } + vectorTileLayer.visible = visible } - async applyGlobalVisibility (...args) { - console.log('ESRI: applyGlobalVisibility', args) + async applyDatasetVisibility (datasetId) { + const registryDataset = datasetRegistry.getDataset(datasetId) + if (registryDataset) { + this._applyRegistryDatasetVisibility(registryDataset) + } } - async applyDatasetOpacity (...args) { - console.log('ESRI: applyDatasetOpacity', args) + async applyGlobalVisibility () { + datasetRegistry.forEachDataset(registryDataset => this._applyRegistryDatasetVisibility(registryDataset)) } - async applyGlobalOpacity (...args) { - console.log('ESRI: applyGlobalOpacity', args) + async applyDatasetOpacity (datasetId) { + const vectorTileLayer = this._vectorTileOpacityLayers[datasetId] + const registryDataset = datasetRegistry.getDataset(datasetId) + if (vectorTileLayer && registryDataset) { + vectorTileLayer.opacity = registryDataset.opacity + } + } + + async applyGlobalOpacity () { + Object.entries(this._vectorTileOpacityLayers).forEach(([datasetId, vectorTileLayer]) => { + const registryDataset = datasetRegistry.getDataset(datasetId) + if (registryDataset) { + vectorTileLayer.opacity = registryDataset.opacity + } + }) } async addDataset (...args) { - console.log('ESRI: addDataset', args) + console.log('TODO: addDataset', args) } async applyFeatureFilter (...args) { - console.log('ESRI: applyFeatureFilter', args) + console.log('TODO: applyFeatureFilter', args) } - async onMapStyleChange (...args) { - console.log('ESRI: onMapStyleChange', args) + async onMapStyleChange (newMapStyle, dynamicSources) { + if (datasetRegistry.mapStyle.id !== newMapStyle.id) { + // Ensure the datasetRegistry is aware of the new mapStyle so that the visibility and style properties of the datasets can be correctly applied + // TODO - this is a bit of a hack, we should probably have a better way to handle this + // such as having DatasetsInit listen for a mapStyle change event and then call datasetRegistry.attach with the new mapStyle + // and finally trigger this method + datasetRegistry.attach(datasetRegistry.datasets, datasetRegistry._orderedDatasets, newMapStyle) + } + datasetRegistry.forEach(registryDataset => { + const { id, isSublayer, esriStyleLayerId, parent } = registryDataset + const vectorTileLayer = this._vectorTileLayers[isSublayer ? parent.id : id] + if (vectorTileLayer && esriStyleLayerId) { + // Show hide the style layer based on the dataset's mapStyle visibility + vectorTileLayer.setStyleLayerVisibility(esriStyleLayerId, registryDataset.visibility) + if (registryDataset.useServerStyle) { + // If the dataset is using the server style, we don't need to apply any paint properties + return + } + // Update the paint properties of the style layer based on the dataset's mapStyle style + const layerPaintProperties = vectorTileLayer.getPaintProperties(esriStyleLayerId) + if (layerPaintProperties) { + registryDataset.applyLayerPaintProperties(layerPaintProperties) + vectorTileLayer.setPaintProperties(esriStyleLayerId, registryDataset.applyLayerPaintProperties(layerPaintProperties)) + } + } + }) + // TODO - handle dynamic sources } - async onMapSizeChange (...args) { - console.log('ESRI: onMapSizeChange', args) - } + // onMapSizeChange is not applicable to the esriLayerAdapter + async onMapSizeChange (_mapStyle) {} } diff --git a/plugins/beta/datasets/src/adapters/esri/registry/esriDataset.js b/plugins/beta/datasets/src/adapters/esri/registry/esriDataset.js new file mode 100644 index 00000000..e3466716 --- /dev/null +++ b/plugins/beta/datasets/src/adapters/esri/registry/esriDataset.js @@ -0,0 +1,27 @@ +import { Dataset } from '../../../registry/dataset.js' +import { datasetRegistry } from '../../../registry/datasetRegistry.js' +import { getValueForStyle } from '../../../../../../../src/utils/getValueForStyle.js' + +export class EsriDataset extends Dataset { + applyLayerPaintProperties (layerPaintProperties) { + const { mapStyle } = datasetRegistry + if (this.hasStroke) { + layerPaintProperties['line-color'] = getValueForStyle(this.style.stroke, mapStyle.id) + } + if (this.hasFill) { + layerPaintProperties['fill-color'] = getValueForStyle(this.style.fill, mapStyle.id) + } + return layerPaintProperties + } + + get esriGroupId () { + if (this._datasetDefinition.esriGroupId === undefined) { + return this.parent?.esriGroupId + } + return this._datasetDefinition.esriGroupId + } + + get useServerStyle () { + return Boolean(this._datasetDefinition.esriUseServerStyle) + } +} diff --git a/plugins/beta/datasets/src/adapters/maplibre/registry/mapLibreDataset.js b/plugins/beta/datasets/src/adapters/maplibre/registry/mapLibreDataset.js index 0bd1e77d..a274fe37 100644 --- a/plugins/beta/datasets/src/adapters/maplibre/registry/mapLibreDataset.js +++ b/plugins/beta/datasets/src/adapters/maplibre/registry/mapLibreDataset.js @@ -5,8 +5,6 @@ import { logger } from '../../../../../../../src/services/logger.js' const MAX_TILE_ZOOM = 22 export class MapLibreDataset extends Dataset { - get visibility () { return this.visible ? 'visible' : 'none' } - get fillLayerId () { if (this.hasSublayers) { return null diff --git a/plugins/beta/datasets/src/components/Key/KeyItem.jsx b/plugins/beta/datasets/src/components/Key/KeyItem.jsx index f931a7dc..b47a1ccc 100644 --- a/plugins/beta/datasets/src/components/Key/KeyItem.jsx +++ b/plugins/beta/datasets/src/components/Key/KeyItem.jsx @@ -2,6 +2,9 @@ import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle.j import { KeySvg } from './KeySvg.jsx' export const KeyItem = ({ registryDataset, symbolRegistry, patternRegistry, mapStyle }) => { + if (!registryDataset.showInKey) { + return null + } return (
diff --git a/plugins/beta/datasets/src/initialise/DatasetsInit.jsx b/plugins/beta/datasets/src/initialise/DatasetsInit.jsx index 418ed7de..0f45026a 100755 --- a/plugins/beta/datasets/src/initialise/DatasetsInit.jsx +++ b/plugins/beta/datasets/src/initialise/DatasetsInit.jsx @@ -49,8 +49,8 @@ export function DatasetsInit ({ pluginConfig, pluginState, appState, mapState, m initDatasets() }, [isBaseMapReady, appState.mode]) - useEffect(() => datasetRegistry.attach(pluginState.mappedDatasets, pluginState.orderedDatasets), - [pluginState.mappedDatasets, pluginState.orderedDatasets]) + useEffect(() => datasetRegistry.attach(pluginState.mappedDatasets, pluginState.orderedDatasets, mapState.mapStyle), + [pluginState.mappedDatasets, pluginState.orderedDatasets, mapState.mapStyle]) useEffect(() => attachGlobalState(pluginState.globals), [pluginState.globals]) diff --git a/plugins/beta/datasets/src/initialise/initialiseDatasets.js b/plugins/beta/datasets/src/initialise/initialiseDatasets.js index 069c1683..7772866a 100644 --- a/plugins/beta/datasets/src/initialise/initialiseDatasets.js +++ b/plugins/beta/datasets/src/initialise/initialiseDatasets.js @@ -27,7 +27,7 @@ export const initialiseDatasets = ({ if (adapter.createDataset) { datasetRegistry.attachCreateDataset(adapter.createDataset) } - datasetRegistry.attach(mappedDatasets) + datasetRegistry.attach(mappedDatasets, orderedDatasets, mapStyle) adapter.init(mapStyle).then(() => { datasetRegistry.forEachDataset(registryDataset => { if (!registryDataset.hasDynamicGeoJSON) { diff --git a/plugins/beta/datasets/src/reducers/datasetsToMenu.js b/plugins/beta/datasets/src/reducers/datasetsToMenu.js index fc6521e2..52307929 100644 --- a/plugins/beta/datasets/src/reducers/datasetsToMenu.js +++ b/plugins/beta/datasets/src/reducers/datasetsToMenu.js @@ -10,8 +10,10 @@ export const datasetsToMenu = (state) => { const visibleSublayers = dataset.sublayers.filter(sublayer => dataset.showInMenu ? sublayer.showInMenu !== false : sublayer.showInMenu ) - if (!visibleSublayers.length) { return } - menu.push({ + if (dataset.showInMenu === false && !visibleSublayers.length) { + return + } + const groupObject = { id: dataset.id, groupLabel: dataset.label, visibleWhen: true, @@ -20,7 +22,17 @@ export const datasetsToMenu = (state) => { id: `${dataset.id}-${sublayer.id}`, label: sublayer.label })) - }) + } + // Temporary change until we handle multiple datasets with sublayers, that have a groupLabel + // So that the esri datasets with sublayers are displayed in the menu, even though they have a groupLabel + if (groupObject.items.length === 0) { + delete groupObject.groupLabel + groupObject.items.push({ + id: dataset.id, + label: dataset.label + }) + } + menu.push(groupObject) } else if (dataset.groupLabel) { // Check for existing group object for this groupLabel, or create it if it doesn't exist, // then add the dataset to its items and push it to the menu if it's new diff --git a/plugins/beta/datasets/src/reducers/datasetsToMenu.test.js b/plugins/beta/datasets/src/reducers/datasetsToMenu.test.js index 3da636b1..3c3a68a5 100644 --- a/plugins/beta/datasets/src/reducers/datasetsToMenu.test.js +++ b/plugins/beta/datasets/src/reducers/datasetsToMenu.test.js @@ -76,9 +76,9 @@ describe('datasetsToMenu', () => { expect(result[0].items).toEqual([{ id: 'test-a', label: 'A' }]) }) - it('does not add a menu entry when dataset has showInMenu: true but all sublayers opt out', () => { + it('Should have a single menu entry for the parent dataset when showInMenu: true but all sublayers opt out', () => { const result = datasetsToMenu({ datasets: [sublayerDataset(true, false)] }) - expect(result).toHaveLength(0) + expect(result).toEqual([{ id: 'test', items: [{ id: 'test', label: 'Test' }], type: 'checkbox', visibleWhen: true }]) }) }) }) diff --git a/plugins/beta/datasets/src/registry/dataset.js b/plugins/beta/datasets/src/registry/dataset.js index 2793ca96..dce6f78f 100644 --- a/plugins/beta/datasets/src/registry/dataset.js +++ b/plugins/beta/datasets/src/registry/dataset.js @@ -22,12 +22,23 @@ export class Dataset { get parentId () { return this._datasetDefinition.parentId } get minZoom () { return this._datasetDefinition.minZoom || this.parent?.minZoom } get maxZoom () { return this._datasetDefinition.maxZoom || this.parent?.maxZoom } + get showInKey () { const own = this._datasetDefinition.showInKey if (own !== undefined) { return own } return this.parent?.showInKey ?? false } + // Note visibleWhen is used in combination with visible. + // both must be true for the dataset to be visible. + // visibleWhen is used to show/hide datasets based on mapStyle. + get visibleWhen () { + if (this._datasetDefinition.visibleWhen === undefined) { + return this.parent?.visibleWhen + } + return this._datasetDefinition.visibleWhen + } + get groupLabel () { return this._datasetDefinition.groupLabel } get opacity () { @@ -83,6 +94,15 @@ export class Dataset { return this._datasetDefinition.visible && getGlobalVisibility() } + get esriStyleLayerId () { return this._datasetDefinition.esriStyleLayerId } + get visibility () { + const visible = this.visible + if (visible && this.visibleWhen?.mapStyleId) { + return this.visibleWhen?.mapStyleId.includes(datasetRegistry.mapStyle.id) ? 'visible' : 'none' + } + return visible ? 'visible' : 'none' + } + get symbolAnchor () { if (this.style?.symbolAnchor) { return this.style.symbolAnchor diff --git a/plugins/beta/datasets/src/registry/datasetRegistry.js b/plugins/beta/datasets/src/registry/datasetRegistry.js index a8fcbfd8..f7939a58 100644 --- a/plugins/beta/datasets/src/registry/datasetRegistry.js +++ b/plugins/beta/datasets/src/registry/datasetRegistry.js @@ -2,27 +2,38 @@ import { createDataset } from './createDataset.js' import { DatasetDefinitionCache } from './datasetDefinitionCache.js' const datasetRegistry = { - attach (datasetsRef, orderedDatasetsRef) { + attach (datasetsRef, orderedDatasetsRef, mapStyle) { this._datasets = datasetsRef this._orderedDatasets = orderedDatasetsRef + if (mapStyle) { + this._mapStyle = mapStyle + } this._invalidateChangedDatasets() }, + _definitionCache: new DatasetDefinitionCache(), + _invalidateCache () { // used in tests to clear the cache between runs this._definitionCache = new DatasetDefinitionCache() }, - _invalidateChangedDatasets () { // used in tests to clear the cache between runs + + _invalidateChangedDatasets () { if (this._datasets) { this._definitionCache.invalidateChangedDatasets(Object.values(this._datasets)) } else { this._invalidateCache() } }, + // createDataset defaults to a generic dataset factory function, but can be overridden by calling // attachCreateDataset, which allows the layer adapter to provide its own createDataset function, attachCreateDataset (createDataset) { this._createDataset = createDataset }, _createDataset: (datasetDefinition) => createDataset(datasetDefinition), + get mapStyle () { + return this._mapStyle + }, + // getDataset retrieves a dataset by id, creating a new Dataset instance that wraps the definition getDataset (id) { const definition = this.datasets[id]