From 2e54e76a506d06b0ce29dc65e54bd742e3f50bee Mon Sep 17 00:00:00 2001 From: Max Tobias Weber Date: Sun, 18 Jan 2026 12:42:34 +0100 Subject: [PATCH 01/12] fix MlWmsLayer url update --- .../src/components/MlWmsLayer/MlWmsLayer.tsx | 23 ++++--------------- 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx b/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx index 5c88eee6..2b591c18 100644 --- a/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx +++ b/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx @@ -123,28 +123,15 @@ const MlWmsLayer = (props: MlWmsLayerProps) => { }, [mapHook.map, props, tileUrl]); useEffect(() => { - if (initializedRef.current) return; - - createLayer(); - }, [createLayer]); - - useEffect(() => { + //@ts-ignore if ( - !mapHook.map || - !mapHook.map?.map?.style?.sourceCaches?.[layerId.current] || - !initializedRef.current + initializedRef.current && + mapHook?.map?.map?.getSource?.(layerId.current)?.tiles?.[0] === tileUrl ) return; - const source = mapHook.map.map.getSource(layerId.current) as RasterSourceSpecification; - source.tiles = [tileUrl]; - - mapHook.map.map.style.sourceCaches[layerId.current].clearTiles(); - - mapHook.map.map.style.sourceCaches[layerId.current].update(mapHook.map.map.transform); - - mapHook.map.map.triggerRepaint(); - }, [mapHook.map, tileUrl]); + createLayer(); + }, [createLayer]); useEffect(() => { if (!mapHook.map || !initializedRef.current) return; From 235730aea0ae93a207fe42e37ac2906bfda9caf7 Mon Sep 17 00:00:00 2001 From: Max Tobias Weber Date: Sun, 18 Jan 2026 12:42:45 +0100 Subject: [PATCH 02/12] fix: update maplibre-gl dependency to version 5.16.0 --- packages/react-maplibre/package.json | 2 +- pnpm-lock.yaml | 69 +++++++++++++++++++++++++++- 2 files changed, 68 insertions(+), 3 deletions(-) diff --git a/packages/react-maplibre/package.json b/packages/react-maplibre/package.json index a02fb1e3..301a3ede 100644 --- a/packages/react-maplibre/package.json +++ b/packages/react-maplibre/package.json @@ -52,7 +52,7 @@ "redux-thunk": "^3.1.0", "topojson-client": "^3.1.0", "uuid": "^11.1.0", - "maplibre-gl": "^5.7.0", + "maplibre-gl": "^5.16.0", "wms-capabilities": "^0.6.0" }, "peerDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b5e78338..0bc1d090 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -382,8 +382,8 @@ importers: specifier: ^3.0.2 version: 3.0.2 maplibre-gl: - specifier: ^5.7.0 - version: 5.7.1 + specifier: ^5.16.0 + version: 5.16.0 osm2geojson-lite: specifier: ^1.1.2 version: 1.1.2 @@ -2659,9 +2659,19 @@ packages: resolution: {integrity: sha512-IGJtuBbaGzOUgODdBRg66p8stnwj9iDXkgbYKoYcNiiQmaez5WVRfXm4b03MCDwmZyX93csbfHFWEJJYHnn5oA==} hasBin: true + '@maplibre/maplibre-gl-style-spec@24.4.1': + resolution: {integrity: sha512-UKhA4qv1h30XT768ccSv5NjNCX+dgfoq2qlLVmKejspPcSQTYD4SrVucgqegmYcKcmwf06wcNAa/kRd0NHWbUg==} + hasBin: true + + '@maplibre/mlt@1.1.2': + resolution: {integrity: sha512-SQKdJ909VGROkA6ovJgtHNs9YXV4YXUPS+VaZ50I2Mt951SLlUm2Cv34x5Xwc1HiFlsd3h2Yrs5cn7xzqBmENw==} + '@maplibre/vt-pbf@4.0.3': resolution: {integrity: sha512-YsW99BwnT+ukJRkseBcLuZHfITB4puJoxnqPVjo72rhW/TaawVYsgQHcqWLzTxqknttYoDpgyERzWSa/XrETdA==} + '@maplibre/vt-pbf@4.2.0': + resolution: {integrity: sha512-bxrk/kQUwWXZgmqYgwOCnZCMONCRi3MJMqJdza4T3E4AeR5i+VyMnaJ8iDWtWxdfEAJRtrzIOeJtxZSy5mFrFA==} + '@math.gl/core@4.1.0': resolution: {integrity: sha512-FrdHBCVG3QdrworwrUSzXIaK+/9OCRLscxI2OUy6sLOHyHgBMyfnEGs99/m3KNvs+95BsnQLWklVfpKfQzfwKA==} @@ -9032,6 +9042,10 @@ packages: mapbox-gl@3.14.0: resolution: {integrity: sha512-KYhi9ZOQL4BB0J061admPH8O5ZZhhxsyiJ6DQCOkCaps0JEB4HF3SbJwu8S0pJKaQUxNS33sSbzW8iDSSauHPQ==} + maplibre-gl@5.16.0: + resolution: {integrity: sha512-/VDY89nr4jgLJyzmhy325cG6VUI02WkZ/UfVuDbG/piXzo6ODnM+omDFIwWY8tsEsBG26DNDmNMn3Y2ikHsBiA==} + engines: {node: '>=16.14.0', npm: '>=8.1.0'} + maplibre-gl@5.7.1: resolution: {integrity: sha512-iCOQB6W/EGgQx8aU4SyfU5a5/GR2E+ELF92NMsqYfs3x+vnY+8mARmz4gor6XZHCz3tv19mnotVDRlRTMNKyGw==} engines: {node: '>=16.14.0', npm: '>=8.1.0'} @@ -9514,6 +9528,7 @@ packages: osm2geojson-lite@1.1.2: resolution: {integrity: sha512-6s1uW548fdyLTJ4Cp/hQTKvdgCl/E8nUvBMEzUXnAJPHAFHoIhwMqZ3KGdph2A1g48rsCeA6gVnkPruWGiwupw==} hasBin: true + bundledDependencies: [] ospath@1.2.2: resolution: {integrity: sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==} @@ -14037,6 +14052,20 @@ snapshots: rw: 1.3.3 tinyqueue: 3.0.0 + '@maplibre/maplibre-gl-style-spec@24.4.1': + dependencies: + '@mapbox/jsonlint-lines-primitives': 2.0.2 + '@mapbox/unitbezier': 0.0.1 + json-stringify-pretty-compact: 4.0.0 + minimist: 1.2.8 + quickselect: 3.0.0 + rw: 1.3.3 + tinyqueue: 3.0.0 + + '@maplibre/mlt@1.1.2': + dependencies: + '@mapbox/point-geometry': 1.1.0 + '@maplibre/vt-pbf@4.0.3': dependencies: '@mapbox/point-geometry': 1.1.0 @@ -14047,6 +14076,16 @@ snapshots: pbf: 4.0.1 supercluster: 8.0.1 + '@maplibre/vt-pbf@4.2.0': + dependencies: + '@mapbox/point-geometry': 1.1.0 + '@mapbox/vector-tile': 2.0.4 + '@types/geojson-vt': 3.2.5 + '@types/supercluster': 7.1.3 + geojson-vt: 4.0.2 + pbf: 4.0.1 + supercluster: 8.0.1 + '@math.gl/core@4.1.0': dependencies: '@math.gl/types': 4.1.0 @@ -22937,6 +22976,32 @@ snapshots: supercluster: 8.0.1 tinyqueue: 3.0.0 + maplibre-gl@5.16.0: + dependencies: + '@mapbox/geojson-rewind': 0.5.2 + '@mapbox/jsonlint-lines-primitives': 2.0.2 + '@mapbox/point-geometry': 1.1.0 + '@mapbox/tiny-sdf': 2.0.7 + '@mapbox/unitbezier': 0.0.1 + '@mapbox/vector-tile': 2.0.4 + '@mapbox/whoots-js': 3.1.0 + '@maplibre/maplibre-gl-style-spec': 24.4.1 + '@maplibre/mlt': 1.1.2 + '@maplibre/vt-pbf': 4.2.0 + '@types/geojson': 7946.0.16 + '@types/geojson-vt': 3.2.5 + '@types/supercluster': 7.1.3 + earcut: 3.0.2 + geojson-vt: 4.0.2 + gl-matrix: 3.4.4 + kdbush: 4.0.2 + murmurhash-js: 1.0.0 + pbf: 4.0.1 + potpack: 2.1.0 + quickselect: 3.0.0 + supercluster: 8.0.1 + tinyqueue: 3.0.0 + maplibre-gl@5.7.1: dependencies: '@mapbox/geojson-rewind': 0.5.2 From 8838e59efb378269c45a2fc11de7ff71911222d8 Mon Sep 17 00:00:00 2001 From: Max Tobias Weber Date: Sun, 18 Jan 2026 13:20:27 +0100 Subject: [PATCH 03/12] fix MlTerrainLayer for maplibre api changes (removal of sourceCaches prop) --- .../src/components/MlTerrainLayer/MlTerrainLayer.cy.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-maplibre/src/components/MlTerrainLayer/MlTerrainLayer.cy.tsx b/packages/react-maplibre/src/components/MlTerrainLayer/MlTerrainLayer.cy.tsx index 5bc1ed77..ebe7668d 100644 --- a/packages/react-maplibre/src/components/MlTerrainLayer/MlTerrainLayer.cy.tsx +++ b/packages/react-maplibre/src/components/MlTerrainLayer/MlTerrainLayer.cy.tsx @@ -17,7 +17,7 @@ describe('MlTerrainLayer Tests', () => { const { _map }: any = win; cy.wrap(_map).should((_map: any) => { // eslint-disable-next-line @typescript-eslint/no-unused-expressions - expect(_map?.style?.sourceCaches?.terrain).to.not.be.undefined; + expect(_map?.style?.getSource('terrain')).to.not.be.undefined; // eslint-disable-next-line @typescript-eslint/no-unused-expressions expect(_map?.style?._layers?.hills).to.not.be.undefined; }); @@ -33,7 +33,7 @@ describe('MlTerrainLayer Tests', () => { const { _map }: any = win; cy.wrap(_map).should((_map: any) => { // eslint-disable-next-line @typescript-eslint/no-unused-expressions - expect(_map?.style?.sourceCaches?.terrain).to.be.undefined; + expect(_map?.style?.getSource('terrain')).to.be.undefined; // eslint-disable-next-line @typescript-eslint/no-unused-expressions expect(_map?.style?._layers?.hills).to.be.undefined; }); From 46096ddb2c9baecced7ce356b6488312d0757c16 Mon Sep 17 00:00:00 2001 From: Max Tobias Weber Date: Sun, 18 Jan 2026 13:26:35 +0100 Subject: [PATCH 04/12] add prop onFeatureInfoSuccess and featureInfoMarkerEnabled to MlWmsLoader --- .../src/components/MlWmsLoader/MlWmsLoader.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx index cf08a0cb..ebfbad8d 100644 --- a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx +++ b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx @@ -100,6 +100,14 @@ export interface MlWmsLoaderProps { * A function to set the feature info active state */ setFeatureInfoActive?: (val: boolean | ((current: boolean) => boolean)) => void; + /** + * Callback function that is called after the featureInfoRequest has succeeded + */ + featureInfoSuccess?: (content: string, lngLat: { lng: number; lat: number }) => void; + /** + * If true, displays a marker at the feature info location + */ + featureInfoMarkerEnabled?: boolean; /** * The WMS configuration object */ @@ -170,6 +178,7 @@ const defaultProps = { TRANSPARENT: 'TRUE', }, featureInfoEnabled: true, + featureInfoMarkerEnabled: true, zoomToExtent: false, showDeleteButton: false, }; @@ -327,6 +336,7 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => { .then((text) => { setFeatureInfoLngLat(ev.lngLat); setFeatureInfoContent(text); + props.featureInfoSuccess?.(text, ev.lngLat); }) .catch((error) => console.log(error)); }, @@ -577,7 +587,7 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => { )} - {props.featureInfoEnabled && featureInfoLngLat && ( + {props.featureInfoEnabled && props.featureInfoMarkerEnabled && featureInfoLngLat && ( )} From 145a09a23fde347d206f8604e87e5052ab9d2c22 Mon Sep 17 00:00:00 2001 From: Max Tobias Weber Date: Sun, 18 Jan 2026 13:32:45 +0100 Subject: [PATCH 05/12] add STYLES param to featureInfo request of MlWmsLoader --- .../react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx index ebfbad8d..bb8c43e9 100644 --- a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx +++ b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx @@ -298,6 +298,7 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => { QUERY_LAYERS: layers .map((layer: LayerType) => (layer.visible && layer.queryable ? layer.Name : undefined)) .filter((n) => n), + STYLES: '', WIDTH: 100, HEIGHT: 100, srs: 'EPSG:3857', From b97754ebe6a93960ca4c3f5afe4110a525a668a4 Mon Sep 17 00:00:00 2001 From: Max Tobias Weber Date: Sun, 18 Jan 2026 13:38:13 +0100 Subject: [PATCH 06/12] MlWmsLoader make all WMS layers visible by default. --- .../react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx index bb8c43e9..61861d23 100644 --- a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx +++ b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx @@ -395,7 +395,7 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => { _LatLonBoundingBox = layer.EX_GeographicBoundingBox || layer?.LatLonBoundingBox || []; } return { - visible: capabilities?.Capability?.Layer?.Layer?.length > 2 ? idx > 1 : true, + visible: true, Attribution: { Title: '' }, // eslint-disable-next-line @typescript-eslint/no-unused-vars ...(({ CRS, ..._layer }) => _layer)(layer), From 18164040bb13aa1a4025396be79ef917b1dee426 Mon Sep 17 00:00:00 2001 From: Max Tobias Weber Date: Sun, 18 Jan 2026 13:43:54 +0100 Subject: [PATCH 07/12] add Transparent: true to MlWmsLayer default props --- .../react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx b/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx index 2b591c18..198c61c3 100644 --- a/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx +++ b/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx @@ -13,6 +13,7 @@ const defaultProps: MlWmsLayerProps = { srs: 'EPSG:3857', width: '256', height: '256', + Transparent: 'true', styles: '', }, }; @@ -123,10 +124,9 @@ const MlWmsLayer = (props: MlWmsLayerProps) => { }, [mapHook.map, props, tileUrl]); useEffect(() => { - //@ts-ignore if ( initializedRef.current && - mapHook?.map?.map?.getSource?.(layerId.current)?.tiles?.[0] === tileUrl + (mapHook?.map?.map?.getSource?.(layerId.current) as RasterSourceSpecification)?.tiles?.[0] === tileUrl ) return; From 78fc574843559bd641f945faafe4da1cb9f05a75 Mon Sep 17 00:00:00 2001 From: Max Tobias Weber Date: Sun, 18 Jan 2026 13:47:02 +0100 Subject: [PATCH 08/12] add visibleLayersAtStart prop to MlWmsLoader for initial layer visibility control --- .../src/components/MlWmsLoader/MlWmsLoader.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx index 61861d23..38f1b5ec 100644 --- a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx +++ b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx @@ -129,6 +129,10 @@ export interface MlWmsLoaderProps { */ buttons?: React.JSX.Element; sortable?: boolean; + /** + * Array of layer Names (IDs) that should be visible at start. If not provided, default visibility logic applies. + */ + visibleLayersAtStart?: string[]; } export interface WmsLayer { @@ -394,8 +398,11 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => { if (idx === 0) { _LatLonBoundingBox = layer.EX_GeographicBoundingBox || layer?.LatLonBoundingBox || []; } + const isVisible = props.visibleLayersAtStart + ? props.visibleLayersAtStart.includes(layer.Name || '') + : true; return { - visible: true, + visible: isVisible, Attribution: { Title: '' }, // eslint-disable-next-line @typescript-eslint/no-unused-vars ...(({ CRS, ..._layer }) => _layer)(layer), @@ -409,8 +416,11 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => { if (idx === 0) { _LatLonBoundingBox = layer.EX_GeographicBoundingBox || layer?.LatLonBoundingBox || []; } + const isVisible = props.visibleLayersAtStart && layer.Name + ? props.visibleLayersAtStart.includes(layer.Name) + : false; return { - visible: false, + visible: isVisible, Attribution: { Title: '' }, // eslint-disable-next-line @typescript-eslint/no-unused-vars ...(({ CRS, ..._layer }) => _layer)(layer), From 85245e1eb06ef1b07c56f07b7ab36876403c5c1d Mon Sep 17 00:00:00 2001 From: Max Tobias Weber Date: Sun, 18 Jan 2026 14:00:59 +0100 Subject: [PATCH 09/12] make MlWmsLoader:layerId optional and make sure it is passed to MlWmsLayer --- .../src/components/MlWmsLoader/MlWmsLoader.tsx | 7 ++++--- .../src/ui_components/LayerList/LayerListItem.tsx | 2 +- .../ui_components/LayerList/util/SortableContainer.tsx | 8 +++----- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx index 38f1b5ec..cf4736fc 100644 --- a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx +++ b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx @@ -548,10 +548,10 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => { )} {wmsUrl && ( <> - {props.layerId && props.sortable && ( - {listContent} + {props.sortable && ( + {listContent} )} - {props.layerId && !props.sortable && listContent} + {!props.sortable && listContent} {wmsUrl && @@ -582,6 +582,7 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => { {wmsUrl && layers?.length && ( {props.sortable && props.layerId && !layerComponent?.props?.layers && ( - {listContent} + {listContent} )} {!props.sortable && !layerComponent?.props?.layers && listContent} {_layerComponent} diff --git a/packages/react-maplibre/src/ui_components/LayerList/util/SortableContainer.tsx b/packages/react-maplibre/src/ui_components/LayerList/util/SortableContainer.tsx index 007901fe..f4210159 100644 --- a/packages/react-maplibre/src/ui_components/LayerList/util/SortableContainer.tsx +++ b/packages/react-maplibre/src/ui_components/LayerList/util/SortableContainer.tsx @@ -1,16 +1,14 @@ import { ReactNode } from 'react'; import { useSortable } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; +import { v4 as uuid } from 'uuid'; interface SortableContainerProps { children: ReactNode; - layerId: string; } -function SortableContainer({ children, layerId }: SortableContainerProps) { - const { attributes, listeners, setNodeRef, transform } = useSortable({ - id: layerId, - }); +function SortableContainer({ children }: SortableContainerProps) { + const { attributes, listeners, setNodeRef, transform } = useSortable({id: uuid()}); const style = { transform: CSS.Transform.toString(transform), }; From 2466f0214be2764c9987cdedb3c7bb3024ddb209 Mon Sep 17 00:00:00 2001 From: Max Tobias Weber Date: Sun, 18 Jan 2026 14:07:30 +0100 Subject: [PATCH 10/12] add showLayerList prop to MlWmsLoader for conditional layer list rendering --- .../components/MlWmsLoader/MlWmsLoader.tsx | 73 +++++++++++-------- 1 file changed, 41 insertions(+), 32 deletions(-) diff --git a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx index cf4736fc..ecf2b2ea 100644 --- a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx +++ b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx @@ -133,6 +133,10 @@ export interface MlWmsLoaderProps { * Array of layer Names (IDs) that should be visible at start. If not provided, default visibility logic applies. */ visibleLayersAtStart?: string[]; + /** + * If true, renders the layer list UI. If false, only the WMS layer is rendered without UI controls. + */ + showLayerList?: boolean; } export interface WmsLayer { @@ -185,6 +189,7 @@ const defaultProps = { featureInfoMarkerEnabled: true, zoomToExtent: false, showDeleteButton: false, + showLayerList: true, }; /** * Loads a WMS getCapabilities xml document and adds a MlWmsLayer component for each layer that is @@ -548,38 +553,43 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => { )} {wmsUrl && ( <> - {props.sortable && ( - {listContent} + {props.showLayerList && ( + <> + {props.sortable && ( + {listContent} + )} + {!props.sortable && listContent} + + + {wmsUrl && + layers?.map?.((layer, idx) => { + return layer?.Name ? ( + {layer?.queryable && }} + > + + { + const _layers: Array = [...layers]; + _layers[idx].visible = !_layers[idx].visible; + setLayers([..._layers]); + }} + /> + + + + ) : ( + <> + ); + })} + + + )} - {!props.sortable && listContent} - - - {wmsUrl && - layers?.map?.((layer, idx) => { - return layer?.Name ? ( - {layer?.queryable && }} - > - - { - const _layers: Array = [...layers]; - _layers[idx].visible = !_layers[idx].visible; - setLayers([..._layers]); - }} - /> - - - - ) : ( - <> - ); - })} - - {wmsUrl && layers?.length && ( + {wmsUrl && layers?.length && ( { insertBeforeLayer={props?.insertBeforeLayer} /> )} - {props.featureInfoEnabled && props.featureInfoMarkerEnabled && featureInfoLngLat && ( From 753e4c59c38d9551a9c7f4b660c1eb8fd565eb2f Mon Sep 17 00:00:00 2001 From: Max Tobias Weber Date: Sun, 18 Jan 2026 14:32:32 +0100 Subject: [PATCH 11/12] fix review items --- .../src/components/MlWmsLoader/MlWmsLoader.tsx | 2 +- .../src/ui_components/LayerList/util/SortableContainer.tsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx index ecf2b2ea..2f79a0eb 100644 --- a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx +++ b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx @@ -592,7 +592,7 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => { {wmsUrl && layers?.length && ( Date: Sun, 18 Jan 2026 14:37:05 +0100 Subject: [PATCH 12/12] fix formatting --- .../src/components/MlWmsLayer/MlWmsLayer.tsx | 3 +- .../components/MlWmsLoader/MlWmsLoader.tsx | 45 +++++++++---------- .../LayerList/util/SortableContainer.tsx | 2 +- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx b/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx index 198c61c3..5ce229a5 100644 --- a/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx +++ b/packages/react-maplibre/src/components/MlWmsLayer/MlWmsLayer.tsx @@ -126,7 +126,8 @@ const MlWmsLayer = (props: MlWmsLayerProps) => { useEffect(() => { if ( initializedRef.current && - (mapHook?.map?.map?.getSource?.(layerId.current) as RasterSourceSpecification)?.tiles?.[0] === tileUrl + (mapHook?.map?.map?.getSource?.(layerId.current) as RasterSourceSpecification)?.tiles?.[0] === + tileUrl ) return; diff --git a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx index 2f79a0eb..8b3b5ef1 100644 --- a/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx +++ b/packages/react-maplibre/src/components/MlWmsLoader/MlWmsLoader.tsx @@ -421,9 +421,10 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => { if (idx === 0) { _LatLonBoundingBox = layer.EX_GeographicBoundingBox || layer?.LatLonBoundingBox || []; } - const isVisible = props.visibleLayersAtStart && layer.Name - ? props.visibleLayersAtStart.includes(layer.Name) - : false; + const isVisible = + props.visibleLayersAtStart && layer.Name + ? props.visibleLayersAtStart.includes(layer.Name) + : false; return { visible: isVisible, Attribution: { Title: '' }, @@ -555,9 +556,7 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => { <> {props.showLayerList && ( <> - {props.sortable && ( - {listContent} - )} + {props.sortable && {listContent}} {!props.sortable && listContent} @@ -590,23 +589,23 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => { )} {wmsUrl && layers?.length && ( - layer.visible) - .map((el) => el.Name) - .reverse() - .join(','), - }} - insertBeforeLayer={props?.insertBeforeLayer} - /> - )} + layer.visible) + .map((el) => el.Name) + .reverse() + .join(','), + }} + insertBeforeLayer={props?.insertBeforeLayer} + /> + )} {props.featureInfoEnabled && props.featureInfoMarkerEnabled && featureInfoLngLat && ( diff --git a/packages/react-maplibre/src/ui_components/LayerList/util/SortableContainer.tsx b/packages/react-maplibre/src/ui_components/LayerList/util/SortableContainer.tsx index f19abb94..07f426c8 100644 --- a/packages/react-maplibre/src/ui_components/LayerList/util/SortableContainer.tsx +++ b/packages/react-maplibre/src/ui_components/LayerList/util/SortableContainer.tsx @@ -9,7 +9,7 @@ interface SortableContainerProps { function SortableContainer({ children }: SortableContainerProps) { const idRef = useRef(uuid()); - const { attributes, listeners, setNodeRef, transform } = useSortable({id: idRef.current}); + const { attributes, listeners, setNodeRef, transform } = useSortable({ id: idRef.current }); const style = { transform: CSS.Transform.toString(transform), };