LayerSwitcher: Add support for wms layers from the layer index

src/components/LayerSwitcher/AddCustomLayer.tsx

@@ -62,7 +62,8 @@ const LayerDataInput: React.FC<{
         setLayerIndex(result);
         setLayerIndexState('success');
       })
-      .catch(() => {
+      .catch((err) => {
+        console.error(err); // eslint-disable-line no-console
         setLayerIndex([]);
         setLayerIndexState('error');
       });

src/components/LayerSwitcher/AddLayerButton.tsx

@@ -31,13 +31,15 @@ export const AddUserLayerButton = () => {
             url,
             name,
             max_zoom: maxzoom,
+            min_zoom: minzoom,
             attribution,
             bbox: bboxes,
           } = layer;
 
           const newLayer: Layer = {
             type: 'user',
             maxzoom,
+            minzoom,
             name,
             url,
             bboxes,

src/components/LayerSwitcher/helpers/loadLayers.ts

@@ -24,7 +24,7 @@ export interface LayerIndex {
    */
   id: string;
   bbox?: number[][];
-  type: 'tms';
+  type: 'tms' | 'wms';
   /**
    * A URL template for imagery tilesA URL template for imagery tiles
    */
@@ -156,8 +156,23 @@ export async function loadLayer() {
 
       const boxes = coordinates?.map(getBoundingBox);
 
-      return { ...properties, bbox: boxes };
+      return {
+        ...properties,
+        bbox: boxes,
+        url: properties.url
+          .replace('{proj}', 'EPSG:3857')
+          .replace('{width}', '256')
+          .replace('{height}', '256')
+          .replace('{bbox}', '{bbox-epsg-3857}'),
+      };
+    })
+    .filter(({ type, available_projections }) => {
+      if (type === 'tms') {
+        return true;
+      }
+      return (
+        type === 'wms' && (available_projections ?? []).includes('EPSG:3857')
+      );
     })
-    .filter(({ type }) => type === 'tms')
     .filter(({ url }) => isValidLayerUrl(url, false)) as LayerIndex[];
 }

src/components/Map/behaviour/useUpdateStyle.tsx

@@ -83,9 +83,12 @@ export const useUpdateStyle = createMapEffectHook(
 
     const osmappLayerMaxZoom = osmappLayers[key]?.maxzoom;
     const userLayerMaxZoom = userLayers.find(({ url }) => url === key)?.maxzoom;
-
     map.setMaxZoom(osmappLayerMaxZoom ?? userLayerMaxZoom ?? 24); // TODO find a way how to zoom bing further (now it stops at 19)
 
+    const osmappLayerMinZoom = osmappLayers[key]?.minzoom;
+    const userLayerMinZoom = userLayers.find(({ url }) => url === key)?.minzoom;
+    map.setMinZoom(osmappLayerMinZoom ?? userLayerMinZoom ?? 0);
+
     const style = cloneDeep(getBaseStyle(key));
     addOverlaysToStyle(map, style, overlays);
     map.setStyle(style, { diff: mapLoaded });

src/components/utils/MapStateContext.tsx

@@ -21,6 +21,7 @@ export interface Layer {
   Icon?: LayerIcon;
   attribution?: string[]; // missing in spacer TODO refactor ugly
   maxzoom?: number;
+  minzoom?: number;
   bboxes?: number[][];
 }