From 1b4f3d46552006288420dded795d3852fe38c2b8 Mon Sep 17 00:00:00 2001 From: Vijayan Balasubramanian Date: Mon, 30 Jan 2023 22:18:19 -0800 Subject: [PATCH] Refactor remove/hide layers Signed-off-by: Vijayan Balasubramanian --- .../layer_control_panel.tsx | 4 +-- public/model/OSMLayerFunctions.ts | 26 +++---------------- public/model/customLayerFunctions.ts | 25 ++++-------------- public/model/documentLayerFunctions.ts | 19 ++++++-------- 4 files changed, 19 insertions(+), 55 deletions(-) diff --git a/public/components/layer_control_panel/layer_control_panel.tsx b/public/components/layer_control_panel/layer_control_panel.tsx index 5cf22b65..310ecd91 100644 --- a/public/components/layer_control_panel/layer_control_panel.tsx +++ b/public/components/layer_control_panel/layer_control_panel.tsx @@ -48,7 +48,7 @@ import { } from '../../model/layerRenderController'; import { MapState } from '../../model/mapState'; import { ConfigSchema } from '../../../common/config'; -import {moveLayers, updateLayerVisibility} from "../../model/map/layer_operations"; +import {moveLayers, removeLayers, updateLayerVisibility} from "../../model/map/layer_operations"; interface MaplibreRef { current: Maplibre | null; @@ -300,7 +300,7 @@ export const LayerControlPanel = memo( const onDeleteLayerConfirm = () => { if (selectedDeleteLayer) { - layersFunctionMap[selectedDeleteLayer.type]?.remove(maplibreRef, selectedDeleteLayer); + removeLayers(maplibreRef.current!, selectedDeleteLayer.id, true); removeLayer(selectedDeleteLayer.id); setIsDeleteLayerModalVisible(false); setSelectedDeleteLayer(undefined); diff --git a/public/model/OSMLayerFunctions.ts b/public/model/OSMLayerFunctions.ts index f400d551..6f315d99 100644 --- a/public/model/OSMLayerFunctions.ts +++ b/public/model/OSMLayerFunctions.ts @@ -1,7 +1,7 @@ import { Map as Maplibre, LayerSpecification } from 'maplibre-gl'; import { OSMLayerSpecification } from './mapLayerType'; import { getMaplibreBeforeLayerId } from './layersFunctions'; -import { hasLayer } from './map/layer_operations'; +import { hasLayer, removeLayers } from './map/layer_operations'; interface MaplibreRef { current: Maplibre | null; @@ -99,26 +99,8 @@ export const OSMLayerFunctions = { ) => { // If layer already exist in maplibre source, update layer config // else add new layer. - if (hasLayer(maplibreRef.current!, layerConfig.id)) { - updateLayerConfig(layerConfig, maplibreRef); - } else { - addNewLayer(layerConfig, maplibreRef, beforeLayerId); - } - }, - remove: (maplibreRef: MaplibreRef, layerConfig: OSMLayerSpecification) => { - const layers = getCurrentStyleLayers(maplibreRef); - layers.forEach((mbLayer: { id: any }) => { - if (mbLayer.id.includes(layerConfig.id)) { - maplibreRef.current?.removeLayer(mbLayer.id); - } - }); - }, - hide: (maplibreRef: MaplibreRef, layerConfig: OSMLayerSpecification) => { - const layers = getCurrentStyleLayers(maplibreRef); - layers.forEach((mbLayer: { id: any }) => { - if (mbLayer.id.includes(layerConfig.id)) { - maplibreRef.current?.setLayoutProperty(mbLayer.id, 'visibility', layerConfig.visibility); - } - }); + return hasLayer(maplibreRef.current!, layerConfig.id) + ? updateLayerConfig(layerConfig, maplibreRef) + : addNewLayer(layerConfig, maplibreRef, beforeLayerId); }, }; diff --git a/public/model/customLayerFunctions.ts b/public/model/customLayerFunctions.ts index 15fda723..2c675434 100644 --- a/public/model/customLayerFunctions.ts +++ b/public/model/customLayerFunctions.ts @@ -1,7 +1,7 @@ import { Map as Maplibre, AttributionControl, RasterSourceSpecification } from 'maplibre-gl'; import { CustomLayerSpecification, OSMLayerSpecification } from './mapLayerType'; import { getMaplibreBeforeLayerId } from './layersFunctions'; -import { hasLayer } from './map/layer_operations'; +import { hasLayer, removeLayers } from './map/layer_operations'; interface MaplibreRef { current: Maplibre | null; @@ -98,26 +98,11 @@ export const CustomLayerFunctions = { layerConfig: CustomLayerSpecification, beforeLayerId: string | undefined ) => { - if (hasLayer(maplibreRef.current!, layerConfig.id)) { - updateLayerConfig(layerConfig, maplibreRef); - } else { - addNewLayer(layerConfig, maplibreRef, beforeLayerId); - } + return hasLayer(maplibreRef.current!, layerConfig.id) + ? updateLayerConfig(layerConfig, maplibreRef) + : addNewLayer(layerConfig, maplibreRef, beforeLayerId); }, remove: (maplibreRef: MaplibreRef, layerConfig: OSMLayerSpecification) => { - const layers = getCurrentStyleLayers(maplibreRef); - layers.forEach((mbLayer: { id: any }) => { - if (mbLayer.id.includes(layerConfig.id)) { - maplibreRef.current?.removeLayer(mbLayer.id); - } - }); - }, - hide: (maplibreRef: MaplibreRef, layerConfig: OSMLayerSpecification) => { - const layers = getCurrentStyleLayers(maplibreRef); - layers.forEach((mbLayer: { id: any }) => { - if (mbLayer.id.includes(layerConfig.id)) { - maplibreRef.current?.setLayoutProperty(mbLayer.id, 'visibility', layerConfig.visibility); - } - }); + removeLayers(maplibreRef.current!, layerConfig.id, true); }, }; diff --git a/public/model/documentLayerFunctions.ts b/public/model/documentLayerFunctions.ts index 8e03f68f..d803572c 100644 --- a/public/model/documentLayerFunctions.ts +++ b/public/model/documentLayerFunctions.ts @@ -191,21 +191,21 @@ const updateLayer = ( dataSource.setData(getLayerSource(data, layerConfig)); } updateCircleLayer(maplibreInstance, { - fillColor: layerConfig.style?.fillColor, + fillColor: layerConfig.style.fillColor, maxZoom: layerConfig.zoomRange[1], minZoom: layerConfig.zoomRange[0], opacity: layerConfig.opacity, - outlineColor: layerConfig.style?.borderColor, + outlineColor: layerConfig.style.borderColor, radius: layerConfig.style?.markerSize, sourceId: layerConfig.id, visibility: layerConfig.visibility, - width: layerConfig.style?.borderThickness, + width: layerConfig.style.borderThickness, }); const geoFieldType = getGeoFieldType(layerConfig); if (geoFieldType === 'geo_shape') { updateLineLayer(maplibreInstance, { - width: layerConfig.style?.borderThickness, - color: layerConfig.style?.fillColor, + width: layerConfig.style.borderThickness, + color: layerConfig.style.fillColor, maxZoom: layerConfig.zoomRange[1], minZoom: layerConfig.zoomRange[0], opacity: layerConfig.opacity, @@ -213,13 +213,13 @@ const updateLayer = ( visibility: layerConfig.visibility, }); updatePolygonLayer(maplibreInstance, { - width: layerConfig.style?.borderThickness, - fillColor: layerConfig.style?.fillColor, + width: layerConfig.style.borderThickness, + fillColor: layerConfig.style.fillColor, maxZoom: layerConfig.zoomRange[1], minZoom: layerConfig.zoomRange[0], opacity: layerConfig.opacity, sourceId: layerConfig.id, - outlineColor: layerConfig.style?.borderColor, + outlineColor: layerConfig.style.borderColor, visibility: layerConfig.visibility, }); } @@ -237,7 +237,4 @@ export const DocumentLayerFunctions = { ? updateLayer(layerConfig, maplibreRef, data) : addNewLayer(layerConfig, maplibreRef, data, beforeLayerId); }, - remove: (maplibreRef: MaplibreRef, layerConfig: DocumentLayerSpecification) => { - removeLayers(maplibreRef.current!, layerConfig.id, true); - }, };