diff --git a/demo/js/ml-datasets.js b/demo/js/ml-datasets.js index 454ed7d1..8c9aeae9 100644 --- a/demo/js/ml-datasets.js +++ b/demo/js/ml-datasets.js @@ -380,7 +380,7 @@ const testVisibility = () => { const testGlobalVisibility = () => { setTimeout(() => datasetsPlugin.setDatasetVisibility(false), 1000) - setTimeout(() => datasetsPlugin.setDatasetVisibility(true), 2000) + setTimeout(() => datasetsPlugin.setDatasetVisibility(true), 10000) // setTimeout(() => datasetsPlugin.setDatasetVisibility(true, { datasetId: 'hedge-control' }), 500) // setTimeout(() => datasetsPlugin.setStyle({ stroke: { outdoor: '#0000ff' }, }, { datasetId: 'hedge-control' }), 2000) } @@ -472,10 +472,10 @@ interactiveMap.on('datasets:ready', function () { // testGetters() // testInvalidApiCalls() // testFeatureVisibility() - testSetOpacity() + // testSetOpacity() // testSetStyle() // testVisibility() - // testGlobalVisibility() + testGlobalVisibility() // testRemoveAndAddDataset() // testSetData() }) diff --git a/plugins/beta/datasets/src/DatasetsInit.jsx b/plugins/beta/datasets/src/DatasetsInit.jsx index cc9df73f..23dc49e8 100755 --- a/plugins/beta/datasets/src/DatasetsInit.jsx +++ b/plugins/beta/datasets/src/DatasetsInit.jsx @@ -84,6 +84,7 @@ export function DatasetsInit ({ pluginConfig, pluginState, appState, mapState, m useLayerAdapterActions('applyStyle', dispatch, pluginState, [pluginState.layerAdapterActions.applyStyle]) useLayerAdapterActions('applyDatasetVisibility', dispatch, pluginState, [pluginState.layerAdapterActions.applyDatasetVisibility]) + useLayerAdapterActions('applyGlobalVisibility', dispatch, pluginState, [pluginState.layerAdapterActions.applyGlobalVisibility]) useLayerAdapterActions('applyDatasetOpacity', dispatch, pluginState, [pluginState.layerAdapterActions.applyDatasetOpacity]) useLayerAdapterActions('applyGlobalOpacity', dispatch, pluginState, [pluginState.layerAdapterActions.applyGlobalOpacity]) useLayerAdapterActions('addDataset', dispatch, pluginState, [pluginState.layerAdapterActions.addDataset]) diff --git a/plugins/beta/datasets/src/adapters/maplibre/datasets/mapLibreDataset.js b/plugins/beta/datasets/src/adapters/maplibre/datasets/mapLibreDataset.js index e52726c3..1689acba 100644 --- a/plugins/beta/datasets/src/adapters/maplibre/datasets/mapLibreDataset.js +++ b/plugins/beta/datasets/src/adapters/maplibre/datasets/mapLibreDataset.js @@ -68,6 +68,10 @@ export class MapLibreDataset extends Dataset { return response } + getLayersWithVisibility () { + return this.getLayersWithValue('visibility') + } + getLayersWithOpacity () { return this.getLayersWithValue('opacity') } diff --git a/plugins/beta/datasets/src/adapters/maplibre/datasets/mapLibreDataset.test.js b/plugins/beta/datasets/src/adapters/maplibre/datasets/mapLibreDataset.test.js index 5b6b75b8..807df7d3 100644 --- a/plugins/beta/datasets/src/adapters/maplibre/datasets/mapLibreDataset.test.js +++ b/plugins/beta/datasets/src/adapters/maplibre/datasets/mapLibreDataset.test.js @@ -104,6 +104,20 @@ describe('MapLibreDataset', () => { }) }) + describe('getLayersWithVisibility', () => { + it('returns layerIds and visibility for a layer with sublayers', () => { + const registryDataset = datasetRegistry.getDataset('land-covers') + const layersWithVisibility = registryDataset.getLayersWithVisibility() + expect(layersWithVisibility).toEqual([ + { layerIds: ['land-covers-130-131', 'land-covers-130-131-stroke'], visibility: 'visible' }, + { layerIds: ['land-covers-332', 'land-covers-332-stroke'], visibility: 'visible' }, + { layerIds: ['land-covers-110', 'land-covers-110-stroke'], visibility: 'visible' }, + { layerIds: ['land-covers-379', 'land-covers-379-stroke'], visibility: 'none' }, + { layerIds: ['land-covers-other', 'land-covers-other-stroke'], visibility: 'visible' } + ]) + }) + }) + describe('getLayersWithOpacity', () => { it('returns layerIds and opacity for a sublayer with no sublayers', () => { const dataset = datasetRegistry.getDataset('existing-fields') diff --git a/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js b/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js index 52083131..68cef5d3 100644 --- a/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js +++ b/plugins/beta/datasets/src/adapters/maplibre/maplibreLayerAdapter.js @@ -289,28 +289,34 @@ export default class MaplibreLayerAdapter { }) } + /** + * Apply visibility for all layers with datasetId + * @param {string} datasetId + */ applyDatasetVisibility (datasetId) { const registryDataset = datasetRegistry.getDataset(datasetId) - const style = this._map.getStyle() - if (!style?.layers) { - return - } - // Covers base fill layer (datasetId) and all suffixed layers - // (-stroke, -${sublayerId}, -${sublayerId}-stroke) without needing the dataset object. - if (registryDataset.hasSublayers) { - const { sublayerIds } = registryDataset - sublayerIds.forEach(sublayerId => { this.applyDatasetVisibility(sublayerId) }) - } else { - const { visibility } = registryDataset - const datasetId = registryDataset.id - style.layers.filter(layer => - layer.id === datasetId || layer.id.startsWith(`${datasetId}-`) - ).forEach(layer => { - this._map.setLayoutProperty(layer.id, 'visibility', visibility) - }) + if (registryDataset) { + this._applyRegistryDatasetVisibility(registryDataset) } } + /** + * Apply visibility for all layers belonging to a registryDataset. + * @param {Object} registryDataset + */ + _applyRegistryDatasetVisibility (registryDataset) { + registryDataset.getLayersWithVisibility().forEach(({ layerIds, visibility }) => { + layerIds.forEach(layerId => this._map.setLayoutProperty(layerId, 'visibility', visibility)) + }) + } + + /** + * Apply visibility for all layers + */ + applyGlobalVisibility () { + datasetRegistry.forEachDataset(registryDataset => this._applyRegistryDatasetVisibility(registryDataset)) + } + _applyFeatureFilter (registryDataset) { const layersWithFilters = registryDataset.getLayersWithFilters() layersWithFilters.forEach(({ layerIds, filter }) => { diff --git a/plugins/beta/datasets/src/components/menu/LayersMenuCheckbox.jsx b/plugins/beta/datasets/src/components/menu/LayersMenuCheckbox.jsx index 05d462c8..dc3e5164 100644 --- a/plugins/beta/datasets/src/components/menu/LayersMenuCheckbox.jsx +++ b/plugins/beta/datasets/src/components/menu/LayersMenuCheckbox.jsx @@ -7,7 +7,6 @@ export const LayersMenuCheckbox = ({ menuGroupItem, onChange }) => { } const datasetId = registryDataset.isSublayer ? registryDataset.parentId : registryDataset.id const sublayerId = registryDataset.isSublayer ? registryDataset.id : undefined - const itemClass = `im-c-datasets-layers__item govuk-checkboxes govuk-checkboxes--small${registryDataset.visible ? '' : ' im-c-datasets-layers__item--checked'}` return (