change mapStore.layers from object to array to get rid of redundant l…

…ayer uuids

src/stores/map.store.ts

@@ -67,14 +67,14 @@ interface MapProps {
 
 export interface LayerOrderItem {
  uuid: string;
- layers?: LayerOrderItem[];
+ layers?:  LayerOrderItem[];
 }
 
 interface MapConfig {
- uuid: string;
+ /*uuid: string;*/
  name: string;
  mapProps: MapProps;
- layers: { [uuid: string]: LayerConfig };
+ layers: LayerConfig[];
  layerOrder: LayerOrderItem[];
 }
 
@@ -107,20 +107,21 @@ const mapConfigSlice = createSlice({
  initialState,
  reducers: {
  // Add or update a MapConfig
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- //@ts-ignore
- setMapConfig: (state, action: PayloadAction<{ key: string; mapConfig: MapConfig }>) => {
+ setMapConfig: (
+ state,
+ action: PayloadAction<{ key: string; mapConfig: MapConfig }>
+ ) => {
  const mapConfig = action.payload.mapConfig;
  const key = action.payload.key;
  state.mapConfigs[key] = mapConfig;
  },
  // Remove a MapConfig by its uuid
- removeMapConfig: (state, action: PayloadAction<{ key: string }>) => {
+ removeMapConfig: (state: MapState, action: PayloadAction<{ key: string }>) => {
  delete state.mapConfigs[action.payload.key];
  },
  // Add or update a layer within a MapConfig
  setLayerInMapConfig: (
- state,
+ state: MapState,
  action: PayloadAction<{
  mapConfigKey: string;
  layer: LayerConfig;
@@ -129,37 +130,39 @@ const mapConfigSlice = createSlice({
  const { mapConfigKey, layer: updatedLayer } = action.payload;
  const mapConfig = state.mapConfigs[mapConfigKey];
  if (mapConfig) {
- const layerKeys = Object.keys(mapConfig.layers);
- for (const key of layerKeys) {
- const layer = mapConfig.layers[key];
- if (layer.uuid === updatedLayer.uuid) {
- mapConfig.layers[key] = updatedLayer;
+ for (let i = 0;i < mapConfig.layers.length; i++) {
+ if (mapConfig.layers[i].uuid === updatedLayer.uuid) {
+ mapConfig.layers[i] = updatedLayer;
  break;
  }
  }
  }
  },
  // Remove a layer from a MapConfig
  removeLayerFromMapConfig: (
- state,
+ state: MapState,
  action: PayloadAction<{
  mapConfigKey: string;
  layerUuid: string;
  }>
  ) => {
  const { mapConfigKey, layerUuid } = action.payload;
  const mapConfig = state.mapConfigs[mapConfigKey];
- if (mapConfig && mapConfig.layers[layerUuid]) {
- delete mapConfig.layers[layerUuid];
- processLayerOrderItems(function (_, parent?: LayerOrderItem): void {
- if (parent && parent.layers) {
- parent.layers = parent.layers.filter((child) => child.uuid !== layerUuid);
- }
- }, mapConfig.layerOrder);
+
+ if (mapConfig) {
+ const targetLayerIndex = mapConfig.layers.findIndex((el) => el.uuid === layerUuid);
+ if (targetLayerIndex !== -1) {
+ delete mapConfig.layers[targetLayerIndex];
+ processLayerOrderItems(function (_, parent?: LayerOrderItem): void {
+ if (parent && parent.layers) {
+ parent.layers = parent.layers.filter((child) => child.uuid !== layerUuid);
+ }
+ }, mapConfig.layerOrder);
+ }
  }
  },
  updateLayerOrder: (
- state,
+ state: MapState,
  action: PayloadAction<{ mapConfigKey: string; newOrder: LayerOrderItem[] }>
  ) => {
  const { mapConfigKey, newOrder } = action.payload;
@@ -168,22 +171,30 @@ const mapConfigSlice = createSlice({
  mapConfig.layerOrder = newOrder;
  }
  },
+ // masterVisible property will be applied to all children of a folder that is set to be not visible
+ // masterVisible will over rule the actual layer config if set to false
+ // if masterVisible is true the actual layerConfig visibility setting is respected
  setMasterVisible(
- state,
+ state: MapState,
  action: PayloadAction<{ mapConfigKey: string; layerId: string; masterVisible: boolean }>
  ) {
  const { mapConfigKey, layerId, masterVisible } = action.payload;
  const mapConfig = state.mapConfigs[mapConfigKey];
  if (mapConfig) {
- const layerConfig = mapConfig.layers[layerId];
+ const targetLayerIndex = mapConfig.layers.findIndex((el) => el.uuid === layerId);
+ if (targetLayerIndex !== -1) {
+ const layerConfig = mapConfig.layers[targetLayerIndex];
  if (layerConfig) {
  const updatedLayers = { ...mapConfig.layers };
  if (layerConfig.type === 'folder') {
  mapConfig.layerOrder.forEach((folder) => {
  if (folder.uuid === layerId) {
- folder.layers?.forEach((child) => {
- const childLayer = updatedLayers[child.uuid];
- updatedLayers[child.uuid] = {
+ folder.layers?.forEach((childUuid) => {
+ const childLayerIndex = mapConfig.layers.findIndex((el) => el.uuid === childUuid.uuid);
+
+ const childLayer = updatedLayers[childLayerIndex];
+
+ updatedLayers[childLayerIndex] = {
  ...childLayer,
  masterVisible,
  };
@@ -206,6 +217,7 @@ const mapConfigSlice = createSlice({
  state.mapConfigs[mapConfigKey].layers = updatedLayers;
  }
  }
+ }
  },
  },
 });
@@ -214,7 +226,8 @@ export const getLayerByUuid = (state: MapState, uuid: string): LayerConfig | nul
 
  for (const key in mapConfigs) {
  const mapConfig = mapConfigs[key];
- const foundLayer = mapConfig.layers[uuid];
+ const targetLayerIndex = mapConfig.layers.findIndex((el) => el.uuid === uuid);
+ const foundLayer = mapConfig.layers[targetLayerIndex];
  if (foundLayer) return foundLayer;
  }
  return null;

src/ui_components/LayerTree/LayerOnMap.tsx

@@ -1,6 +1,11 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useSelector } from 'react-redux';
-import { extractUuidsFromLayerOrder, LayerOrderItem, RootState } from '../../stores/map.store';
+import {
+ extractUuidsFromLayerOrder,
+ LayerOrderItem,
+ RootState,
+ getLayerByUuid,
+} from '../../stores/map.store';
 import MlGeoJsonLayer from '../../components/MlGeoJsonLayer/MlGeoJsonLayer';
 import useMap from '../../hooks/useMap';
 import MlVectorTileLayer, {
@@ -67,7 +72,8 @@ function LayerOnMap(props: LayerOnMapProps) {
  }, [layerStoreOrderIds]);
 
  function renderLayer(layer: LayerOrderItem): React.ReactNode {
- const layerConfig = layers[layer.uuid];
+ const targetLayerIndex = layers.findIndex((el) => el.uuid === layer.uuid);
+ const layerConfig = layers[targetLayerIndex]
 
  switch (layerConfig?.type) {
  case 'geojson':

src/ui_components/LayerTree/LayerTree.stories.tsx

@@ -22,20 +22,19 @@ const LayerTreeMultipleLayertypes = () => {
  const demoData: MapState = {
  mapConfigs: {
  mapConfig1: {
- uuid: 'dc272150-8f04-44e2-97c5-d8f266a04cf8',
  name: 'Demo Map',
  mapProps: {
  center: [7.0851268, 50.73884],
  zoom: 12,
  },
- layers: {
- 'acd3d99f-2f82-40a5-a5c9-f303d54f5606': {
+ layers: [
+ {
  type: 'folder',
  uuid: 'acd3d99f-2f82-40a5-a5c9-f303d54f5606',
  name: 'layers in a folder',
  visible: true,
  },
- 'fec837fa-1d5d-432b-89c2-b416c9773523': {
+ {
  type: 'geojson',
  uuid: 'fec837fa-1d5d-432b-89c2-b416c9773523',
  name: 'Example Point Layer',
@@ -44,7 +43,7 @@ const LayerTreeMultipleLayertypes = () => {
  geojson: sample_points_inside_polygon as FeatureCollection,
  },
  },
- '346ced38-142c-4b57-8193-d689ffc7dfc2': {
+ {
  type: 'vt',
  uuid: '346ced38-142c-4b57-8193-d689ffc7dfc2',
  name: 'Vector Layer',
@@ -81,7 +80,7 @@ const LayerTreeMultipleLayertypes = () => {
  },
  },
  },
- '0e8cd91b-bd49-419d-a19a-5b15dec17542': {
+ {
  type: 'wms',
  uuid: '0e8cd91b-bd49-419d-a19a-5b15dec17542',
  name: 'Example WMS Layer',
@@ -92,7 +91,7 @@ const LayerTreeMultipleLayertypes = () => {
  },
  },
  },
- },
+ ],
  layerOrder: [
  {
  uuid: 'acd3d99f-2f82-40a5-a5c9-f303d54f5606',
@@ -112,7 +111,7 @@ const LayerTreeMultipleLayertypes = () => {
  return (
  <>
  <Sidebar open={true}>
- <Typography variant="h2">Example Layertree</Typography>
+ <Typography variant="h5">Example Layertree</Typography>
  <LayerTree mapConfigKey={Object.keys(demoData.mapConfigs)[0]}></LayerTree>
  </Sidebar>
  <LayerOnMap mapConfigKey={Object.keys(demoData.mapConfigs)[0]}></LayerOnMap>
@@ -128,21 +127,20 @@ const MultipleLayerTrees = () => {
  const demoData: MapState = {
  mapConfigs: {
  mapConfig1: {
- uuid: 'dc272150-8f04-44e2-97c5-d8f266a04cf8',
  name: 'Demo Map',
  mapProps: {
  center: [7.0851268, 50.73884],
  zoom: 12,
  },
- layers: {
- 'acd3d99f-2f82-40a5-a5c9-f303d54f5606': {
+ layers: [
+ {
  type: 'folder',
  uuid: 'acd3d99f-2f82-40a5-a5c9-f303d54f5606',
  name: 'layers in a folder',
  visible: true,
  config: undefined,
  },
- 'fec837fa-1d5d-432b-89c2-b416c9773523': {
+ {
  type: 'geojson',
  uuid: 'fec837fa-1d5d-432b-89c2-b416c9773523',
  name: 'Example Point Layer',
@@ -158,15 +156,21 @@ const MultipleLayerTrees = () => {
  },
  },
  },
- '0587c0ed-aaa0-4315-bb77-a40937a684d7': {
+ {
  type: 'geojson',
  uuid: '0587c0ed-aaa0-4315-bb77-a40937a684d7',
  name: 'Example Polygon Layer',
+ configurable: true,
  config: {
  geojson: sample_polygon_1 as FeatureCollection,
+ options: {
+ paint: {
+ 'fill-color': 'red',
+ },
+ },
  },
  },
- },
+ ],
  layerOrder: [
  {
  uuid: 'acd3d99f-2f82-40a5-a5c9-f303d54f5606',
@@ -185,9 +189,9 @@ const MultipleLayerTrees = () => {
  return (
  <>
  <Sidebar open={true}>
- <Typography variant="h4">Layertree 1</Typography>
+ <Typography variant="h5">Layertree 1</Typography>
  <LayerTree mapConfigKey={Object.keys(demoData.mapConfigs)[0]}></LayerTree>
- <Typography variant="h4">Layertree 2</Typography>
+ <Typography variant="h5">Layertree 2</Typography>
  <LayerTree mapConfigKey={Object.keys(demoData.mapConfigs)[0]}></LayerTree>
  </Sidebar>
  <LayerOnMap mapConfigKey={Object.keys(demoData.mapConfigs)[0]}></LayerOnMap>

src/ui_components/LayerTree/LayerTreeListItem.tsx

@@ -235,38 +235,40 @@ function LayerTreeListItem(props: LayerTreeListItemProps) {
  key={layer.uuid}
  sx={{ ...props.listItemSx }}
  secondaryAction={
- layer.configurable ? (
- <>
- {props?.buttons}
- <IconButtonStyled
- disabled={false}
- onClick={() => {
- moveDown(layer.uuid);
- }}
- >
- <ArrowCircleDownIcon />
- </IconButtonStyled>
- <IconButtonStyled
- disabled={false}
- onClick={() => {
- moveUp(layer.uuid);
- }}
- >
- <ArrowCircleUpIcon />
- </IconButtonStyled>
- <TuneIconButton
- edge={'end'}
- aria-label="settings"
- onClick={() => {
- setPaintPropsFormVisible((current) => {
- return !current;
- });
- }}
- >
- <TuneIcon />
- </TuneIconButton>
- </>
- ) : undefined
+ <>
+ {props?.buttons}
+ <IconButtonStyled
+ disabled={false}
+ onClick={() => {
+ moveDown(layer.uuid);
+ }}
+ >
+ <ArrowCircleDownIcon />
+ </IconButtonStyled>
+ <IconButtonStyled
+ disabled={false}
+ onClick={() => {
+ moveUp(layer.uuid);
+ }}
+ >
+ <ArrowCircleUpIcon />
+ </IconButtonStyled>
+ {layer.configurable && (
+ <>
+ <TuneIconButton
+ edge={'end'}
+ aria-label="settings"
+ onClick={() => {
+ setPaintPropsFormVisible((current) => {
+ return !current;
+ });
+ }}
+ >
+ <TuneIcon />
+ </TuneIconButton>
+ </>
+ )}
+ </>
  }
  >
  <CheckboxListItemIcon>