react-spatial 2.0.0-beta.1 → 2.0.0-beta.2

package/README.md

@@ -2,22 +2,21 @@
 
 [![npm](https://img.shields.io/npm/v/react-spatial.svg?style=flat-square)](https://www.npmjs.com/package/react-spatial)
 [![build](https://github.com/geops/react-spatial/workflows/main/badge.svg)](https://github.com/geops/react-spatial/actions?query=workflow%3Amain)
-[![Renovate](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
-[![Netlify Status](https://api.netlify.com/api/v1/badges/8f7b7082-8998-4e1f-9a34-4d8cd18e6003/deploy-status)](https://app.netlify.com/sites/react-spatial/deploys)
+![Vercel](https://vercelbadge.vercel.app/api/geops/react-spatial)
 
-This library provides React components to build web applications and to visualize real-time geographical information based on [OpenLayers](https://openlayers.org/) and [Mapbox GL](https://docs.mapbox.com/mapbox-gl-js/api/).
+This library provides React components to build web applications and to visualize real-time geographical information based on [OpenLayers](https://openlayers.org/) and [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/).
 
-This library uses the [mobility-toolbox-js](https://mobility-toolbox-js.geops.io/) library.
+This library uses the [mobility-toolbox-js](https://mobility-toolbox-js.geops.io/) library for some components.
 
-Documentation and examples at https://react-spatial.geops.de.
+Documentation and examples at https://react-spatial.geops.io.
 
 ## Getting Started
 
 Install the [react-spatial](https://www.npmjs.com/package/react-spatial) package:
 
 ```bash
-yarn add mobility-toolbox-js mapbox-gl ol react-spatial
+yarn add maplibre-gl ol mobility-toolbox-js react-spatial
 ```
 
 Your build pipeline needs to support ES6 modules and SASS.
@@ -37,7 +36,3 @@ import 'react-spatial/themes/default/index.scss';
 ## Bugs
 
 Please use the [GitHub issue tracker](https://github.com/geops/react-spatial/issues) for all bugs and feature requests. Before creating a new issue, do a quick search to see if the problem has been reported already.
-
-## Version 1.x.x
-
-The master branch is now open for the version 2 development. The version 1 is now available in 1.x.x branch.

package/components/BaseLayerSwitcher/BaseLayerSwitcher.js

@@ -1,276 +1,299 @@
-/* eslint-disable jsx-a11y/interactive-supports-focus */
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { FaChevronLeft } from 'react-icons/fa';
-import { Layer } from 'mobility-toolbox-js/ol';
-
-import './BaseLayerSwitcher.scss';
-
-var propTypes = {
+import Layer from "ol/layer/Layer";
+import { unByKey } from "ol/Observable";
+import PropTypes from "prop-types";
+import React, { useEffect, useState } from "react";
+import { FaChevronLeft } from "react-icons/fa";
+const propTypes = {
   /**
-   * An array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers).
+   * CSS class to apply on the container.
    */
-  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,
-
+  className: PropTypes.string,
+  /**
+   * Image (node) rendered in the switcher close button.
+   */
+  closeButtonImage: PropTypes.node,
+  /**
+   * Function that returns the alternative text if the layer's image is not found.
+   */
+  getAltText: PropTypes.func,
+  /**
+   * Function that returns the label to display att the bootm of the layer's image and as title attribute.
+   */
+  getLayerLabel: PropTypes.func,
   /**
    * Object containing relative paths to the base layer images. Object
    * keys need to correspond to layer keys
    */
   layerImages: PropTypes.objectOf(PropTypes.string),
-
   /**
-   * CSS class to apply on the container.
+   * An array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers).
    */
-  className: PropTypes.string,
-
+  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,
   /**
-   * Alternative text rendered if layer images can't be loaded
+   * Callback function on close button click.
+   * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.
    */
-  altText: PropTypes.string,
-
+  onCloseButtonClick: PropTypes.func,
   /**
-   * Button titles.
+   * Callback function on layer button click.
+   * @param {function} Callback function triggered when a switcher button is clicked. Takes the event and the layer as arguments.
    */
-  titles: PropTypes.shape({
-    button: PropTypes.string,
-    openSwitcher: PropTypes.string,
-    closeSwitcher: PropTypes.string,
-  }),
-
+  onLayerButtonClick: PropTypes.func,
   /**
-   * Image (node) rendered in the switcher close button.
+   * Callback function on main switcher button click.
+   * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.
    */
-  closeButtonImage: PropTypes.node,
-
+  onSwitcherButtonClick: PropTypes.func,
   /**
-   * Translation function.
-   * @param {function} Translation function returning the translated string.
+   * Button titles.
    */
-  t: PropTypes.func,
-};
-
-var defaultProps = {
-  className: 'rs-base-layer-switcher',
-  altText: 'Source not found',
-  titles: {
-    button: 'Base layers',
-    openSwitcher: 'Open Baselayer-Switcher',
-    closeSwitcher: 'Close Baselayer-Switcher',
-  },
-  closeButtonImage: React.createElement( FaChevronLeft, null ),
-  layerImages: undefined,
-  t: function (s) {
-    return s;
-  },
+  titles: PropTypes.shape({
+    button: PropTypes.string,
+    closeSwitcher: PropTypes.string,
+    openSwitcher: PropTypes.string
+  })
 };
-
-var getVisibleLayer = function (layers) {
-  return layers.find(function (layer) {
-    return layer.visible;
+const getVisibleLayer = (layers) => {
+  return layers.find((layer) => {
+    return layer.getVisible ? layer.getVisible() : layer.visible;
   });
 };
-
-var getNextImage = function (currentLayer, layers, layerImages) {
-  var currentIndex = layers.indexOf(
-    layers.find(function (layer) {
+const getNextImage = (currentLayer, layers, layerImages) => {
+  const currentIndex = layers.indexOf(
+    layers.find((layer) => {
       return layer === currentLayer;
     })
   );
-  var nextIndex = currentIndex + 1 === layers.length ? 0 : currentIndex + 1;
+  const nextIndex = currentIndex + 1 === layers.length ? 0 : currentIndex + 1;
   return layerImages[nextIndex];
 };
-
-var getImageStyle = function (url) {
-  return url
-    ? {
-        backgroundImage: ("url(" + url + ")"),
-        backgroundSize: 'cover',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-      }
-    : null;
+const getImageStyle = (url) => {
+  return url ? {
+    backgroundImage: `url(${url})`,
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "cover"
+  } : null;
 };
-
-/**
- * The BaseLayerSwitcher component renders a button interface for switching the visible
- * [mobility-toolbox-js layer](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)
- * when defined as base layer.
- */
-
-function BaseLayerSwitcher(ref) {
-  var layers = ref.layers;
-  var layerImages = ref.layerImages;
-  var className = ref.className;
-  var altText = ref.altText;
-  var titles = ref.titles;
-  var closeButtonImage = ref.closeButtonImage;
-  var t = ref.t;
-
-  var baseLayers = layers.filter(function (layer) {
-    return layer.isBaseLayer;
-  });
-  var ref$1 = useState(false);
-  var switcherOpen = ref$1[0];
-  var setSwitcherOpen = ref$1[1];
-  var ref$2 = useState(true);
-  var isClosed = ref$2[0];
-  var setIsClosed = ref$2[1];
-  var ref$3 = useState(
-    getVisibleLayer(baseLayers) || baseLayers[0]
+function CloseButton({ children, onClick, tabIndex, title }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "aria-label": title,
+      className: "rs-base-layer-switcher-close-btn",
+      onClick,
+      onKeyPress: (e) => {
+        return e.which === 13 && onClick();
+      },
+      role: "button",
+      tabIndex,
+      title
+    },
+    children
   );
-  var currentLayer = ref$3[0];
-  var setCurrentLayer = ref$3[1];
-
-  /* Images are loaded from props if provided, fallback from layer */
-  var images = layerImages
-    ? Object.keys(layerImages).map(function (layerImage) {
-        return layerImages[layerImage];
-      })
-    : baseLayers.map(function (layer) {
-        return layer.get('previewImage');
-      });
-
-  var openClass = switcherOpen ? ' rs-open' : '';
-  var hiddenStyle = switcherOpen && !isClosed ? 'visible' : 'hidden';
-
-  var handleSwitcherClick = function () {
-    if (baseLayers.length === 2) {
-      /* On only two layer options the opener becomes a layer toggle button */
-      var nextLayer = baseLayers.find(function (layer) {
-        return !layer.visible;
-      });
-      currentLayer.setVisible(false);
+}
+CloseButton.propTypes = {
+  children: PropTypes.node.isRequired,
+  onClick: PropTypes.func.isRequired,
+  tabIndex: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired
+};
+const defaultTitles = {
+  button: "Base layers",
+  closeSwitcher: "Close Baselayer-Switcher",
+  openSwitcher: "Open Baselayer-Switcher"
+};
+const getDefaultLabel = (layer) => {
+  return layer?.get("name") || "";
+};
+const getDefaultAltText = () => {
+  return "Source not found";
+};
+function BaseLayerSwitcher({
+  className = "rs-base-layer-switcher",
+  closeButtonImage = /* @__PURE__ */ React.createElement(FaChevronLeft, null),
+  getAltText = getDefaultAltText,
+  getLayerLabel = getDefaultLabel,
+  layerImages,
+  layers,
+  onCloseButtonClick,
+  onLayerButtonClick,
+  onSwitcherButtonClick,
+  titles = defaultTitles
+}) {
+  const [switcherOpen, setSwitcherOpen] = useState(false);
+  const [isClosed, setIsClosed] = useState(true);
+  const [currentLayer, setCurrentLayer] = useState(
+    getVisibleLayer(layers) || layers[0]
+  );
+  const images = layerImages ? Object.keys(layerImages).map((layerImage) => {
+    return layerImages[layerImage];
+  }) : layers.map((layer) => {
+    return layer.get("previewImage");
+  });
+  const openClass = switcherOpen ? " rs-open" : "";
+  const hiddenStyle = switcherOpen && !isClosed ? "visible" : "hidden";
+  const handleSwitcherClick = (evt) => {
+    const nextLayer = layers.find((layer) => {
+      return !(layer.getVisible ? layer.getVisible() : layer.visible);
+    });
+    const onButtonClick = layers.length === 2 ? onLayerButtonClick : onSwitcherButtonClick;
+    if (onButtonClick) {
+      onButtonClick(evt, nextLayer);
+    }
+    if (layers.length === 2) {
+      if (currentLayer.setVisible) {
+        currentLayer.setVisible(false);
+      } else {
+        currentLayer.visible = false;
+      }
       setCurrentLayer(nextLayer);
-      nextLayer.setVisible(true);
+      if (nextLayer.setVisible) {
+        nextLayer.setVisible(true);
+      } else {
+        nextLayer.visible = true;
+      }
       return;
     }
-    // eslint-disable-next-line consistent-return
     return setSwitcherOpen(true) && setIsClosed(false);
   };
-
-  var onLayerSelect = function (layer) {
+  const onLayerSelect = (layer, evt) => {
+    if (onLayerButtonClick) {
+      onLayerButtonClick(evt, layer);
+    }
     if (!switcherOpen) {
       setSwitcherOpen(true);
       return;
     }
     setCurrentLayer(layer);
-    layer.setVisible(true);
-    baseLayers
-      .filter(function (l) {
-        return l !== layer;
-      })
-      .forEach(function (l) {
-        return l.setVisible(false);
-      });
+    if (layer.setVisible) {
+      layer.setVisible(true);
+    } else {
+      layer.visible = true;
+    }
+    layers.filter((l) => {
+      return l !== layer;
+    }).forEach((l) => {
+      if (l.setVisible) {
+        l.setVisible(false);
+      } else {
+        l.visible = false;
+      }
+    });
     setSwitcherOpen(false);
   };
-
-  /* Get next image for closed button */
-  var nextImage = getNextImage(currentLayer, baseLayers, images);
-
-  useEffect(function () {
-    /* Ensure correct layer is active on app load */
-    if (currentLayer !== getVisibleLayer(baseLayers)) {
-      setCurrentLayer(getVisibleLayer(baseLayers) || baseLayers[0]);
+  const nextImage = getNextImage(currentLayer, layers, images);
+  useEffect(() => {
+    if (currentLayer !== getVisibleLayer(layers)) {
+      setCurrentLayer(getVisibleLayer(layers) || layers[0]);
     }
-  }, [currentLayer, baseLayers]);
-
-  useEffect(function () {
-    /* Used for correct layer image render with animation */
-    var timeout;
+  }, [currentLayer, layers]);
+  useEffect(() => {
+    let timeout;
     if (!switcherOpen) {
-      timeout = setTimeout(function () {
+      timeout = setTimeout(() => {
         setIsClosed(true);
       }, 200);
     } else {
-      timeout = setTimeout(function () {
+      timeout = setTimeout(() => {
         setIsClosed(false);
       }, 800);
     }
-    return function () {
+    return () => {
       return clearTimeout(timeout);
     };
   }, [switcherOpen]);
-
-  if (!baseLayers || baseLayers.length < 2 || !currentLayer) {
+  useEffect(() => {
+    const olKeys = (layers || []).map((layer) => {
+      return layer.on("change:visible", (evt) => {
+        const vis = evt.target.getVisible ? evt.target.getVisible() : evt.target.visible;
+        if (vis && currentLayer !== evt.target) {
+          setCurrentLayer(evt.target);
+        }
+      });
+    });
+    return () => {
+      unByKey(olKeys);
+    };
+  }, [currentLayer, layers]);
+  if (!layers || layers.length < 2 || !currentLayer) {
     return null;
   }
-
-  var toggleBtn = (
-    React.createElement( 'div', { className: "rs-base-layer-switcher-btn-wrapper" },
-      React.createElement( 'div', {
-        className: "rs-base-layer-switcher-close-btn", role: "button", onClick: function () {
-          return setSwitcherOpen(false);
-        }, onKeyPress: function (e) {
-          return e.which === 13 && setSwitcherOpen(false);
-        }, tabIndex: switcherOpen ? '0' : '-1', 'aria-label': titles.closeSwitcher, title: titles.closeSwitcher },
-        closeButtonImage
+  const firstNonVisibleLayer = layers.find((layer) => {
+    return !(layer.getVisible ? layer.getVisible() : layer.visible);
+  });
+  return /* @__PURE__ */ React.createElement("div", { className: `${className}${openClass}` }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "aria-label": titles.openSwitcher,
+      className: `rs-base-layer-switcher-button rs-opener${openClass}`,
+      onClick: handleSwitcherClick,
+      onKeyPress: (e) => {
+        if (e.which === 13) {
+          handleSwitcherClick();
+        }
+      },
+      role: "button",
+      style: getImageStyle(nextImage),
+      tabIndex: "0",
+      title: titles.openSwitcher
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "rs-base-layer-switcher-title" }, layers.length !== 2 ? titles.button : firstNonVisibleLayer && getLayerLabel(firstNonVisibleLayer)),
+    nextImage ? null : /* @__PURE__ */ React.createElement("span", { className: "rs-alt-text" }, getAltText(firstNonVisibleLayer))
+  ), layers.map((layer, idx) => {
+    const layerName = getLayerLabel(layer);
+    const activeClass = layerName === currentLayer.get("name") ? " rs-active" : "";
+    const imageStyle = getImageStyle(
+      layerImages ? layerImages[`${layer.get("key") || layer.key}`] : layer.get("previewImage")
+    );
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "rs-base-layer-switcher-btn-wrapper",
+        key: layer.key,
+        style: {
+          /* stylelint-disable-next-line value-keyword-case */
+          overflow: hiddenStyle,
+          /* stylelint-disable-next-line value-keyword-case */
+          zIndex: layers.length - idx
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          "aria-label": layerName,
+          className: `rs-base-layer-switcher-button${openClass}`,
+          onClick: (evt) => {
+            return onLayerSelect(layer, evt);
+          },
+          onKeyPress: (evt) => {
+            if (evt.which === 13) {
+              onLayerSelect(layer, evt);
+            }
+          },
+          role: "button",
+          style: imageStyle,
+          tabIndex: switcherOpen ? "0" : "-1",
+          title: layerName
+        },
+        /* @__PURE__ */ React.createElement("div", { className: `rs-base-layer-switcher-title${activeClass}` }, layerName),
+        imageStyle ? null : /* @__PURE__ */ React.createElement("span", { className: "rs-alt-text" }, getAltText(layer))
       )
-    )
-  );
-
-  return (
-    React.createElement( 'div', { className: ("" + className + openClass) },
-      React.createElement( 'div', {
-        className: ("rs-base-layer-switcher-button rs-opener" + openClass), role: "button", title: titles.openSwitcher, 'aria-label': titles.openSwitcher, onClick: handleSwitcherClick, onKeyPress: function (e) {
-          if (e.which === 13) {
-            handleSwitcherClick();
-          }
-        }, style: getImageStyle(nextImage), tabIndex: "0" },
-        React.createElement( 'div', { className: "rs-base-layer-switcher-title" },
-          baseLayers.length !== 2
-            ? titles.button
-            : baseLayers.find(function (layer) {
-                return !layer.visible;
-              }) &&
-              t(
-                baseLayers.find(function (layer) {
-                  return !layer.visible;
-                }).name
-              )
-        ),
-        nextImage ? null : React.createElement( 'span', { className: "rs-alt-text" }, t(altText))
-      ),
-      baseLayers.map(function (layer, idx) {
-        var layerName = layer.name;
-        var activeClass = layerName === currentLayer.name ? ' rs-active' : '';
-        var imageStyle = getImageStyle(
-          layerImages ? layerImages[("" + (layer.key))] : layer.get('previewImage')
-        );
-        return (
-          React.createElement( 'div', {
-            key: layer.key, className: "rs-base-layer-switcher-btn-wrapper", style: {
-              /* stylelint-disable-next-line value-keyword-case */
-              overflow: hiddenStyle,
-              /* stylelint-disable-next-line value-keyword-case */
-              zIndex: baseLayers.length - idx,
-            } },
-            React.createElement( 'div', {
-              className: ("rs-base-layer-switcher-button" + openClass), role: "button", title: t(layerName), 'aria-label': t(layerName), onClick: function () {
-                return onLayerSelect(layer);
-              }, onKeyPress: function (e) {
-                if (e.which === 13) {
-                  onLayerSelect(layer);
-                }
-              }, style: imageStyle, tabIndex: switcherOpen ? '0' : '-1' },
-              React.createElement( 'div', { className: ("rs-base-layer-switcher-title" + activeClass) },
-                t(layerName)
-              ),
-              imageStyle ? null : (
-                React.createElement( 'span', { className: "rs-alt-text" }, t(altText))
-              )
-            )
-          )
-        );
-      }),
-      toggleBtn
-    )
-  );
+    );
+  }), /* @__PURE__ */ React.createElement(
+    CloseButton,
+    {
+      onClick: (evt) => {
+        if (onCloseButtonClick) {
+          onCloseButtonClick(evt);
+        }
+        setSwitcherOpen(false);
+      },
+      tabIndex: switcherOpen ? "0" : "-1",
+      title: titles.closeSwitcher
+    },
+    closeButtonImage
+  ));
 }
-
 BaseLayerSwitcher.propTypes = propTypes;
-BaseLayerSwitcher.defaultProps = defaultProps;
-
 export default BaseLayerSwitcher;
-
-//# sourceMappingURL=BaseLayerSwitcher.js.map

package/components/BaseLayerSwitcher/BaseLayerSwitcher.js.map

@@ -1 +1,7 @@
-{"version":3,"file":"BaseLayerSwitcher.js","sources":["../../../src/components/BaseLayerSwitcher/BaseLayerSwitcher.js"],"sourcesContent":["/* eslint-disable jsx-a11y/interactive-supports-focus */\nimport React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { FaChevronLeft } from 'react-icons/fa';\nimport { Layer } from 'mobility-toolbox-js/ol';\n\nimport './BaseLayerSwitcher.scss';\n\nconst propTypes = {\n  /**\n   * An array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers).\n   */\n  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,\n\n  /**\n   * Object containing relative paths to the base layer images. Object\n   * keys need to correspond to layer keys\n   */\n  layerImages: PropTypes.objectOf(PropTypes.string),\n\n  /**\n   * CSS class to apply on the container.\n   */\n  className: PropTypes.string,\n\n  /**\n   * Alternative text rendered if layer images can't be loaded\n   */\n  altText: PropTypes.string,\n\n  /**\n   * Button titles.\n   */\n  titles: PropTypes.shape({\n    button: PropTypes.string,\n    openSwitcher: PropTypes.string,\n    closeSwitcher: PropTypes.string,\n  }),\n\n  /**\n   * Image (node) rendered in the switcher close button.\n   */\n  closeButtonImage: PropTypes.node,\n\n  /**\n   * Translation function.\n   * @param {function} Translation function returning the translated string.\n   */\n  t: PropTypes.func,\n};\n\nconst defaultProps = {\n  className: 'rs-base-layer-switcher',\n  altText: 'Source not found',\n  titles: {\n    button: 'Base layers',\n    openSwitcher: 'Open Baselayer-Switcher',\n    closeSwitcher: 'Close Baselayer-Switcher',\n  },\n  closeButtonImage: <FaChevronLeft />,\n  layerImages: undefined,\n  t: (s) => {\n    return s;\n  },\n};\n\nconst getVisibleLayer = (layers) => {\n  return layers.find((layer) => {\n    return layer.visible;\n  });\n};\n\nconst getNextImage = (currentLayer, layers, layerImages) => {\n  const currentIndex = layers.indexOf(\n    layers.find((layer) => {\n      return layer === currentLayer;\n    }),\n  );\n  const nextIndex = currentIndex + 1 === layers.length ? 0 : currentIndex + 1;\n  return layerImages[nextIndex];\n};\n\nconst getImageStyle = (url) => {\n  return url\n    ? {\n        backgroundImage: `url(${url})`,\n        backgroundSize: 'cover',\n        backgroundRepeat: 'no-repeat',\n        backgroundPosition: 'center',\n      }\n    : null;\n};\n\n/**\n * The BaseLayerSwitcher component renders a button interface for switching the visible\n * [mobility-toolbox-js layer](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)\n * when defined as base layer.\n */\n\nfunction BaseLayerSwitcher({\n  layers,\n  layerImages,\n  className,\n  altText,\n  titles,\n  closeButtonImage,\n  t,\n}) {\n  const baseLayers = layers.filter((layer) => {\n    return layer.isBaseLayer;\n  });\n  const [switcherOpen, setSwitcherOpen] = useState(false);\n  const [isClosed, setIsClosed] = useState(true);\n  const [currentLayer, setCurrentLayer] = useState(\n    getVisibleLayer(baseLayers) || baseLayers[0],\n  );\n\n  /* Images are loaded from props if provided, fallback from layer */\n  const images = layerImages\n    ? Object.keys(layerImages).map((layerImage) => {\n        return layerImages[layerImage];\n      })\n    : baseLayers.map((layer) => {\n        return layer.get('previewImage');\n      });\n\n  const openClass = switcherOpen ? ' rs-open' : '';\n  const hiddenStyle = switcherOpen && !isClosed ? 'visible' : 'hidden';\n\n  const handleSwitcherClick = () => {\n    if (baseLayers.length === 2) {\n      /* On only two layer options the opener becomes a layer toggle button */\n      const nextLayer = baseLayers.find((layer) => {\n        return !layer.visible;\n      });\n      currentLayer.setVisible(false);\n      setCurrentLayer(nextLayer);\n      nextLayer.setVisible(true);\n      return;\n    }\n    // eslint-disable-next-line consistent-return\n    return setSwitcherOpen(true) && setIsClosed(false);\n  };\n\n  const onLayerSelect = (layer) => {\n    if (!switcherOpen) {\n      setSwitcherOpen(true);\n      return;\n    }\n    setCurrentLayer(layer);\n    layer.setVisible(true);\n    baseLayers\n      .filter((l) => {\n        return l !== layer;\n      })\n      .forEach((l) => {\n        return l.setVisible(false);\n      });\n    setSwitcherOpen(false);\n  };\n\n  /* Get next image for closed button */\n  const nextImage = getNextImage(currentLayer, baseLayers, images);\n\n  useEffect(() => {\n    /* Ensure correct layer is active on app load */\n    if (currentLayer !== getVisibleLayer(baseLayers)) {\n      setCurrentLayer(getVisibleLayer(baseLayers) || baseLayers[0]);\n    }\n  }, [currentLayer, baseLayers]);\n\n  useEffect(() => {\n    /* Used for correct layer image render with animation */\n    let timeout;\n    if (!switcherOpen) {\n      timeout = setTimeout(() => {\n        setIsClosed(true);\n      }, 200);\n    } else {\n      timeout = setTimeout(() => {\n        setIsClosed(false);\n      }, 800);\n    }\n    return () => {\n      return clearTimeout(timeout);\n    };\n  }, [switcherOpen]);\n\n  if (!baseLayers || baseLayers.length < 2 || !currentLayer) {\n    return null;\n  }\n\n  const toggleBtn = (\n    <div className=\"rs-base-layer-switcher-btn-wrapper\">\n      <div\n        className=\"rs-base-layer-switcher-close-btn\"\n        role=\"button\"\n        onClick={() => {\n          return setSwitcherOpen(false);\n        }}\n        onKeyPress={(e) => {\n          return e.which === 13 && setSwitcherOpen(false);\n        }}\n        tabIndex={switcherOpen ? '0' : '-1'}\n        aria-label={titles.closeSwitcher}\n        title={titles.closeSwitcher}\n      >\n        {closeButtonImage}\n      </div>\n    </div>\n  );\n\n  return (\n    <div className={`${className}${openClass}`}>\n      <div\n        className={`rs-base-layer-switcher-button rs-opener${openClass}`}\n        role=\"button\"\n        title={titles.openSwitcher}\n        aria-label={titles.openSwitcher}\n        onClick={handleSwitcherClick}\n        onKeyPress={(e) => {\n          if (e.which === 13) {\n            handleSwitcherClick();\n          }\n        }}\n        style={getImageStyle(nextImage)}\n        tabIndex=\"0\"\n      >\n        <div className=\"rs-base-layer-switcher-title\">\n          {baseLayers.length !== 2\n            ? titles.button\n            : baseLayers.find((layer) => {\n                return !layer.visible;\n              }) &&\n              t(\n                baseLayers.find((layer) => {\n                  return !layer.visible;\n                }).name,\n              )}\n        </div>\n        {nextImage ? null : <span className=\"rs-alt-text\">{t(altText)}</span>}\n      </div>\n      {baseLayers.map((layer, idx) => {\n        const layerName = layer.name;\n        const activeClass = layerName === currentLayer.name ? ' rs-active' : '';\n        const imageStyle = getImageStyle(\n          layerImages ? layerImages[`${layer.key}`] : layer.get('previewImage'),\n        );\n        return (\n          <div\n            key={layer.key}\n            className=\"rs-base-layer-switcher-btn-wrapper\"\n            style={{\n              /* stylelint-disable-next-line value-keyword-case */\n              overflow: hiddenStyle,\n              /* stylelint-disable-next-line value-keyword-case */\n              zIndex: baseLayers.length - idx,\n            }}\n          >\n            <div\n              className={`rs-base-layer-switcher-button${openClass}`}\n              role=\"button\"\n              title={t(layerName)}\n              aria-label={t(layerName)}\n              onClick={() => {\n                return onLayerSelect(layer);\n              }}\n              onKeyPress={(e) => {\n                if (e.which === 13) {\n                  onLayerSelect(layer);\n                }\n              }}\n              style={imageStyle}\n              tabIndex={switcherOpen ? '0' : '-1'}\n            >\n              <div className={`rs-base-layer-switcher-title${activeClass}`}>\n                {t(layerName)}\n              </div>\n              {imageStyle ? null : (\n                <span className=\"rs-alt-text\">{t(altText)}</span>\n              )}\n            </div>\n          </div>\n        );\n      })}\n      {toggleBtn}\n    </div>\n  );\n}\n\nBaseLayerSwitcher.propTypes = propTypes;\nBaseLayerSwitcher.defaultProps = defaultProps;\n\nexport default BaseLayerSwitcher;\n"],"names":["const","let"],"mappings":"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"}
+{
+  "version": 3,
+  "sources": ["../../../src/components/BaseLayerSwitcher/BaseLayerSwitcher.js"],
+  "sourcesContent": ["import Layer from \"ol/layer/Layer\";\nimport { unByKey } from \"ol/Observable\";\nimport PropTypes from \"prop-types\";\n/* eslint-disable jsx-a11y/interactive-supports-focus */\nimport React, { useEffect, useState } from \"react\";\nimport { FaChevronLeft } from \"react-icons/fa\";\n\nconst propTypes = {\n  /**\n   * CSS class to apply on the container.\n   */\n  className: PropTypes.string,\n\n  /**\n   * Image (node) rendered in the switcher close button.\n   */\n  closeButtonImage: PropTypes.node,\n\n  /**\n   * Function that returns the alternative text if the layer's image is not found.\n   */\n  getAltText: PropTypes.func,\n\n  /**\n   * Function that returns the label to display att the bootm of the layer's image and as title attribute.\n   */\n  getLayerLabel: PropTypes.func,\n\n  /**\n   * Object containing relative paths to the base layer images. Object\n   * keys need to correspond to layer keys\n   */\n  layerImages: PropTypes.objectOf(PropTypes.string),\n\n  /**\n   * An array of [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers).\n   */\n  layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)).isRequired,\n\n  /**\n   * Callback function on close button click.\n   * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.\n   */\n  onCloseButtonClick: PropTypes.func,\n\n  /**\n   * Callback function on layer button click.\n   * @param {function} Callback function triggered when a switcher button is clicked. Takes the event and the layer as arguments.\n   */\n  onLayerButtonClick: PropTypes.func,\n\n  /**\n   * Callback function on main switcher button click.\n   * @param {function} Callback function triggered when a switcher button is clicked. Takes the event as argument.\n   */\n  onSwitcherButtonClick: PropTypes.func,\n\n  /**\n   * Button titles.\n   */\n  titles: PropTypes.shape({\n    button: PropTypes.string,\n    closeSwitcher: PropTypes.string,\n    openSwitcher: PropTypes.string,\n  }),\n};\n\nconst getVisibleLayer = (layers) => {\n  return layers.find((layer) => {\n    return layer.getVisible ? layer.getVisible() : layer.visible;\n  });\n};\n\nconst getNextImage = (currentLayer, layers, layerImages) => {\n  const currentIndex = layers.indexOf(\n    layers.find((layer) => {\n      return layer === currentLayer;\n    }),\n  );\n  const nextIndex = currentIndex + 1 === layers.length ? 0 : currentIndex + 1;\n  return layerImages[nextIndex];\n};\n\nconst getImageStyle = (url) => {\n  return url\n    ? {\n        backgroundImage: `url(${url})`,\n        backgroundPosition: \"center\",\n        backgroundRepeat: \"no-repeat\",\n        backgroundSize: \"cover\",\n      }\n    : null;\n};\n\nfunction CloseButton({ children, onClick, tabIndex, title }) {\n  return (\n    <div\n      aria-label={title}\n      className=\"rs-base-layer-switcher-close-btn\"\n      onClick={onClick}\n      onKeyPress={(e) => {\n        return e.which === 13 && onClick();\n      }}\n      role=\"button\"\n      tabIndex={tabIndex}\n      title={title}\n    >\n      {children}\n    </div>\n  );\n}\n\nCloseButton.propTypes = {\n  children: PropTypes.node.isRequired,\n  onClick: PropTypes.func.isRequired,\n  tabIndex: PropTypes.string.isRequired,\n  title: PropTypes.string.isRequired,\n};\n\nconst defaultTitles = {\n  button: \"Base layers\",\n  closeSwitcher: \"Close Baselayer-Switcher\",\n  openSwitcher: \"Open Baselayer-Switcher\",\n};\n\nconst getDefaultLabel = (layer) => {\n  return layer?.get(\"name\") || \"\";\n};\n\nconst getDefaultAltText = () => {\n  return \"Source not found\";\n};\n\n/**\n * The BaseLayerSwitcher component renders a button interface for switching the visible\n * when defined as base layer.\n */\n\nfunction BaseLayerSwitcher({\n  className = \"rs-base-layer-switcher\",\n  closeButtonImage = <FaChevronLeft />,\n  getAltText = getDefaultAltText,\n  getLayerLabel = getDefaultLabel,\n  layerImages,\n  layers,\n  onCloseButtonClick,\n  onLayerButtonClick,\n  onSwitcherButtonClick,\n  titles = defaultTitles,\n}) {\n  const [switcherOpen, setSwitcherOpen] = useState(false);\n  const [isClosed, setIsClosed] = useState(true);\n  const [currentLayer, setCurrentLayer] = useState(\n    getVisibleLayer(layers) || layers[0],\n  );\n\n  /* Images are loaded from props if provided, fallback from layer */\n  const images = layerImages\n    ? Object.keys(layerImages).map((layerImage) => {\n        return layerImages[layerImage];\n      })\n    : layers.map((layer) => {\n        return layer.get(\"previewImage\");\n      });\n\n  const openClass = switcherOpen ? \" rs-open\" : \"\";\n  const hiddenStyle = switcherOpen && !isClosed ? \"visible\" : \"hidden\";\n\n  const handleSwitcherClick = (evt) => {\n    const nextLayer = layers.find((layer) => {\n      return !(layer.getVisible ? layer.getVisible() : layer.visible);\n    });\n    const onButtonClick =\n      layers.length === 2 ? onLayerButtonClick : onSwitcherButtonClick;\n    if (onButtonClick) {\n      onButtonClick(evt, nextLayer);\n    }\n    if (layers.length === 2) {\n      /* On only two layer options the opener becomes a layer toggle button */\n      if (currentLayer.setVisible) {\n        currentLayer.setVisible(false);\n      } else {\n        currentLayer.visible = false;\n      }\n      setCurrentLayer(nextLayer);\n      if (nextLayer.setVisible) {\n        nextLayer.setVisible(true);\n      } else {\n        nextLayer.visible = true;\n      }\n      return;\n    }\n    // eslint-disable-next-line consistent-return\n    return setSwitcherOpen(true) && setIsClosed(false);\n  };\n\n  const onLayerSelect = (layer, evt) => {\n    if (onLayerButtonClick) {\n      onLayerButtonClick(evt, layer);\n    }\n    if (!switcherOpen) {\n      setSwitcherOpen(true);\n      return;\n    }\n    setCurrentLayer(layer);\n    if (layer.setVisible) {\n      layer.setVisible(true);\n    } else {\n      // eslint-disable-next-line no-param-reassign\n      layer.visible = true;\n    }\n    layers\n      .filter((l) => {\n        return l !== layer;\n      })\n      .forEach((l) => {\n        if (l.setVisible) {\n          l.setVisible(false);\n        } else {\n          // eslint-disable-next-line no-param-reassign\n          l.visible = false;\n        }\n      });\n    setSwitcherOpen(false);\n  };\n\n  /* Get next image for closed button */\n  const nextImage = getNextImage(currentLayer, layers, images);\n\n  useEffect(() => {\n    /* Ensure correct layer is active on app load */\n    if (currentLayer !== getVisibleLayer(layers)) {\n      setCurrentLayer(getVisibleLayer(layers) || layers[0]);\n    }\n  }, [currentLayer, layers]);\n\n  useEffect(() => {\n    /* Used for correct layer image render with animation */\n    let timeout;\n    if (!switcherOpen) {\n      timeout = setTimeout(() => {\n        setIsClosed(true);\n      }, 200);\n    } else {\n      timeout = setTimeout(() => {\n        setIsClosed(false);\n      }, 800);\n    }\n    return () => {\n      return clearTimeout(timeout);\n    };\n  }, [switcherOpen]);\n\n  useEffect(() => {\n    // Update the layer selected when a visibility changes.\n    const olKeys = (layers || []).map((layer) => {\n      return layer.on(\"change:visible\", (evt) => {\n        const vis = evt.target.getVisible\n          ? evt.target.getVisible()\n          : evt.target.visible;\n        if (vis && currentLayer !== evt.target) {\n          setCurrentLayer(evt.target);\n        }\n      });\n    });\n    return () => {\n      unByKey(olKeys);\n    };\n  }, [currentLayer, layers]);\n\n  if (!layers || layers.length < 2 || !currentLayer) {\n    return null;\n  }\n\n  const firstNonVisibleLayer = layers.find((layer) => {\n    return !(layer.getVisible ? layer.getVisible() : layer.visible);\n  });\n\n  return (\n    <div className={`${className}${openClass}`}>\n      <div\n        aria-label={titles.openSwitcher}\n        className={`rs-base-layer-switcher-button rs-opener${openClass}`}\n        onClick={handleSwitcherClick}\n        onKeyPress={(e) => {\n          if (e.which === 13) {\n            handleSwitcherClick();\n          }\n        }}\n        role=\"button\"\n        style={getImageStyle(nextImage)}\n        tabIndex=\"0\"\n        title={titles.openSwitcher}\n      >\n        <div className=\"rs-base-layer-switcher-title\">\n          {layers.length !== 2\n            ? titles.button\n            : firstNonVisibleLayer && getLayerLabel(firstNonVisibleLayer)}\n        </div>\n        {nextImage ? null : (\n          <span className=\"rs-alt-text\">\n            {getAltText(firstNonVisibleLayer)}\n          </span>\n        )}\n      </div>\n      {layers.map((layer, idx) => {\n        const layerName = getLayerLabel(layer);\n        const activeClass =\n          layerName === currentLayer.get(\"name\") ? \" rs-active\" : \"\";\n        const imageStyle = getImageStyle(\n          layerImages\n            ? layerImages[`${layer.get(\"key\") || layer.key}`]\n            : layer.get(\"previewImage\"),\n        );\n        return (\n          <div\n            className=\"rs-base-layer-switcher-btn-wrapper\"\n            key={layer.key}\n            style={{\n              /* stylelint-disable-next-line value-keyword-case */\n              overflow: hiddenStyle,\n              /* stylelint-disable-next-line value-keyword-case */\n              zIndex: layers.length - idx,\n            }}\n          >\n            <div\n              aria-label={layerName}\n              className={`rs-base-layer-switcher-button${openClass}`}\n              onClick={(evt) => {\n                return onLayerSelect(layer, evt);\n              }}\n              onKeyPress={(evt) => {\n                if (evt.which === 13) {\n                  onLayerSelect(layer, evt);\n                }\n              }}\n              role=\"button\"\n              style={imageStyle}\n              tabIndex={switcherOpen ? \"0\" : \"-1\"}\n              title={layerName}\n            >\n              <div className={`rs-base-layer-switcher-title${activeClass}`}>\n                {layerName}\n              </div>\n              {imageStyle ? null : (\n                <span className=\"rs-alt-text\">{getAltText(layer)}</span>\n              )}\n            </div>\n          </div>\n        );\n      })}\n      <CloseButton\n        onClick={(evt) => {\n          if (onCloseButtonClick) {\n            onCloseButtonClick(evt);\n          }\n          setSwitcherOpen(false);\n        }}\n        tabIndex={switcherOpen ? \"0\" : \"-1\"}\n        title={titles.closeSwitcher}\n      >\n        {closeButtonImage}\n      </CloseButton>\n    </div>\n  );\n}\n\nBaseLayerSwitcher.propTypes = propTypes;\n\nexport default BaseLayerSwitcher;\n"],
+  "mappings": "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",
+  "names": []
+}