@mapcomponents/react-maplibre 0.1.29 → 0.1.32

package/dist/index.esm.js

@@ -1,12 +1,13 @@
 import React__default, { useRef, useContext, useEffect, useState, useCallback, useMemo, createElement } from 'react';
 import PropTypes from 'prop-types';
 import { MapContext } from '@mapcomponents/react-core';
-import maplibregl, { Popup } from 'maplibre-gl';
+import maplibregl from '!maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { v4 } from 'uuid';
 import Button from '@mui/material/Button';
 import GpsFixedIcon from '@mui/icons-material/GpsFixed';
-import { point, circle, lineArc, bbox, lineOffset, distance } from '@turf/turf';
+import { point, circle, lineArc, bbox, lineOffset, distance, lineString as lineString$1, length, lineChunk, featureCollection } from '@turf/turf';
+import maplibregl$1, { Popup } from 'maplibre-gl';
 import jsPDF from 'jspdf';
 import PrinterIcon from '@mui/icons-material/Print';
 import ButtonGroup from '@mui/material/ButtonGroup';
@@ -30,6 +31,8 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import { lineString, polygon } from '@turf/helpers';
+import Paper from '@mui/material/Paper';
+import WMSCapabilities from 'wms-capabilities';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -118,6 +121,24 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -1715,7 +1736,7 @@ var createPdf = function createPdf(map, locationValue, setLoading) {
   container.style.height = toPixels(height);
   hidden.appendChild(container); //Render map
 
-  var renderMap = new maplibregl.Map({
+  var renderMap = new maplibregl$1.Map({
     container: container,
     center: map.getCenter(),
     zoom: map.getZoom(),
@@ -1914,10 +1935,10 @@ var MlImageMarkerLayer = function MlImageMarkerLayer(props) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 
 function SvgRotateRight(props) {
-  return /*#__PURE__*/createElement("svg", _extends({
+  return /*#__PURE__*/createElement("svg", _extends$1({
     width: "39.675098mm",
     height: "104.27064mm",
     viewBox: "0 0 39.675098 104.27064"
@@ -1934,10 +1955,10 @@ function SvgRotateRight(props) {
 
 var _g;
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 
 function SvgRotateLeft(props) {
-  return /*#__PURE__*/createElement("svg", _extends$1({
+  return /*#__PURE__*/createElement("svg", _extends$2({
     width: "39.675098mm",
     height: "104.27064mm",
     viewBox: "0 0 39.675098 104.27064"
@@ -1950,10 +1971,10 @@ function SvgRotateLeft(props) {
 
 var _g$1;
 
-function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 
 function SvgNeedle(props) {
-  return /*#__PURE__*/createElement("svg", _extends$2({
+  return /*#__PURE__*/createElement("svg", _extends$3({
     width: "75.967445mm",
     height: "234.71339mm",
     viewBox: "0 0 75.967445 234.71339"
@@ -5554,5 +5575,546 @@ MlSpatialElevationProfile.propTypes = {
   insertBeforeLayer: PropTypes.string
 };
 
-export { GeoJsonContext, GeoJsonProvider, MapLibreMap, MlBasicComponent, MlComponentTemplate, MlCreatePdfButton, MlFeatureEditor, MlFillExtrusionLayer, MlFollowGps, MlGPXViewer, MlGeoJsonLayer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlNavigationCompass, MlNavigationTools, MlOsmLayer, MlSpatialElevationProfile, MlVectorTileLayer, MlWmsLayer, useMap, useMapState };
+var _showNextTransitionSegment = function _showNextTransitionSegment(props, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef, setDisplayGeojson) {
+  var _arguments = arguments;
+
+  if (typeof transitionGeojsonDataRef.current[currentTransitionStepRef.current] !== "undefined") {
+    // if at last transition step set to target geojson
+    // else to an assembled LineString from common geometry and the current transition step geometry
+    var newData = currentTransitionStepRef.current + 1 === transitionGeojsonDataRef.current.length ? props.geojson : lineString$1([].concat(_toConsumableArray(transitionGeojsonCommonDataRef.current), _toConsumableArray(transitionGeojsonDataRef.current[currentTransitionStepRef.current].geometry.coordinates)));
+    setDisplayGeojson(newData);
+
+    if (typeof props.onTransitionFrame === "function") {
+      props.onTransitionFrame(newData);
+    }
+
+    currentTransitionStepRef.current++;
+
+    if (transitionInProgressRef.current && currentTransitionStepRef.current < transitionGeojsonDataRef.current.length) {
+      transitionTimeoutRef.current = setTimeout(function () {
+        return _showNextTransitionSegment.apply(void 0, _toConsumableArray(_arguments));
+      }, msPerStep);
+    } else {
+      if (typeof props.onTransitionEnd === "function") {
+        props.onTransitionEnd(props.geojson);
+      }
+
+      transitionInProgressRef.current = false;
+    }
+  }
+};
+
+var _transitionToGeojson = function _transitionToGeojson(props, transitionGeojsonCommonDataRef, transitionGeojsonDataRef, transitionInProgressRef, oldGeojsonRef, msPerStep, currentTransitionStepRef, map, transitionTimeoutRef, setDisplayGeojson) {
+  // create the transition geojson between oldGeojsonRef.current and props.geojson
+  // create a geojson that contains no common point between the two line features
+  var transitionCoordinatesShort = [];
+  var transitionCoordinatesLong = [];
+  var targetCoordinates = [];
+  var srcCoordinates = [];
+  transitionGeojsonCommonDataRef.current = [];
+  var sourceGeojson = oldGeojsonRef.current || {
+    geometry: {
+      type: "LineString",
+      coordinates: []
+    },
+    properties: {},
+    type: "Feature"
+  };
+  var targetGeojson = props.geojson;
+  var longerGeojson = targetGeojson;
+  var shorterGeojson = sourceGeojson;
+  var reverseOrder = false; // In case one geojson is missing completely use the first two coordinates of the other geojson
+
+  if (typeof longerGeojson.geometry === "undefined" && typeof shorterGeojson.geometry !== "undefined" && shorterGeojson.geometry.coordinates.length > 1) {
+    longerGeojson = lineString$1(shorterGeojson.geometry.coordinates.slice(0, 2));
+  } else if (typeof shorterGeojson.geometry === "undefined" && typeof longerGeojson.geometry !== "undefined" && longerGeojson.geometry.coordinates.length > 1) {
+    shorterGeojson = lineString$1(longerGeojson.geometry.coordinates.slice(0, 2));
+  } else if (typeof shorterGeojson.geometry === "undefined" && typeof longerGeojson.geometry === "undefined") {
+    return;
+  }
+
+  if (longerGeojson.geometry.coordinates.length < shorterGeojson.geometry.coordinates.length) {
+    longerGeojson = sourceGeojson;
+    shorterGeojson = targetGeojson;
+    reverseOrder = true;
+  }
+
+  if (longerGeojson && shorterGeojson) {
+    for (var i = 0, len = longerGeojson.geometry.coordinates.length; i < len; i++) {
+      if (typeof shorterGeojson.geometry.coordinates[i] !== "undefined" && longerGeojson.geometry.coordinates[i][0] === shorterGeojson.geometry.coordinates[i][0] && longerGeojson.geometry.coordinates[i][1] === shorterGeojson.geometry.coordinates[i][1]) {
+        // if coordinates are equal
+        transitionGeojsonCommonDataRef.current.push(longerGeojson.geometry.coordinates[i]);
+      } else {
+        if (typeof longerGeojson.geometry.coordinates[i] !== "undefined") {
+          transitionCoordinatesLong.push(longerGeojson.geometry.coordinates[i]);
+        }
+
+        if (typeof shorterGeojson.geometry.coordinates[i] !== "undefined") {
+          transitionCoordinatesShort.push(shorterGeojson.geometry.coordinates[i]);
+        }
+      }
+    }
+  }
+
+  if (reverseOrder) {
+    targetCoordinates = transitionCoordinatesShort;
+    srcCoordinates = transitionCoordinatesLong;
+  } else {
+    targetCoordinates = transitionCoordinatesLong;
+    srcCoordinates = transitionCoordinatesShort;
+  }
+
+  if (targetCoordinates.length < 2 && srcCoordinates < 2) return; // create props.transitionTime / msPerStep (=: transitionSteps) Versions of transitionGeojsonCommonDataRef.current + transitionCoordinates making the transitionCoordinates transitionCoordinatesDistance / transitionSteps longer on each step
+
+  var transitionSteps = props.transitionTime / msPerStep;
+  var srcCoordinatesDistance = srcCoordinates.length > 1 ? Math.round(length(lineString$1(srcCoordinates))) : 0;
+  var targetCoordinatesDistance = targetCoordinates.length > 1 ? Math.round(length(lineString$1(targetCoordinates))) : 0;
+  var transitionDistance = targetCoordinatesDistance + srcCoordinatesDistance;
+  var srcCoordinatesShare = srcCoordinatesDistance / transitionDistance;
+  var srcTransitionSteps = Math.round(transitionSteps * srcCoordinatesShare);
+  var srcPerStepDistance = Math.round(srcCoordinatesDistance / srcTransitionSteps * 100) / 100;
+  var targetCoordinatesShare = targetCoordinatesDistance / transitionDistance;
+  var targetTransitionSteps = Math.round(transitionSteps * targetCoordinatesShare);
+  var targetPerStepDistance = Math.round(targetCoordinatesDistance / targetTransitionSteps * 100) / 100; // use srcPerStepDistance as src coordinates are always animated backwards
+
+
+  var transitionStepData;
+  transitionStepData = _toConsumableArray(createTransitionSteps(srcCoordinates, srcPerStepDistance, srcTransitionSteps));
+  transitionStepData.reverse();
+  transitionStepData = [].concat(_toConsumableArray(transitionStepData), _toConsumableArray(createTransitionSteps(targetCoordinates, targetPerStepDistance, targetTransitionSteps)));
+  transitionStepData.push(targetGeojson);
+  transitionGeojsonDataRef.current = transitionStepData;
+  currentTransitionStepRef.current = 1;
+  transitionInProgressRef.current = true;
+  transitionTimeoutRef.current = setTimeout(function () {
+    return _showNextTransitionSegment(props, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef, setDisplayGeojson);
+  }, msPerStep);
+};
+
+var createTransitionSteps = function createTransitionSteps(linestringCoordinates, perStepDistance, stepCnt) {
+  var transitionSteps = [];
+
+  if (linestringCoordinates.length > 1) {
+    var tmpChunks = lineChunk(lineString$1(linestringCoordinates), perStepDistance); // tmpLineString contains all coordinates of all previous plus current loop iteration
+
+    var tmpLinestring = tmpChunks.features[0];
+
+    for (var i = 0; i < stepCnt; i++) {
+      transitionSteps.push(tmpLinestring);
+
+      if (typeof tmpChunks.features[i] !== "undefined") {
+        tmpLinestring = lineString$1([].concat(_toConsumableArray(tmpLinestring.geometry.coordinates), _toConsumableArray(tmpChunks.features[i].geometry.coordinates)));
+      } else {
+        break;
+      }
+    }
+  }
+
+  return transitionSteps;
+};
+
+var _excluded$2 = ["geojson"];
+var msPerStep = 50;
+/**
+ * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
+ *
+ * @component
+ */
+
+var MlTransitionGeoJsonLayer = function MlTransitionGeoJsonLayer(props) {
+  var geojson = props.geojson,
+      restProps = _objectWithoutProperties(props, _excluded$2); // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+
+
+  var mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer
+  });
+  var initializedRef = useRef(false); // transition effect variables
+
+  var oldGeojsonRef = useRef(null);
+  var transitionInProgressRef = useRef(false);
+  var transitionTimeoutRef = useRef(undefined);
+  var currentTransitionStepRef = useRef(false);
+  var transitionGeojsonDataRef = useRef([]);
+  var transitionGeojsonCommonDataRef = useRef([]);
+
+  var _useState = useState(featureCollection([])),
+      _useState2 = _slicedToArray(_useState, 2),
+      displayGeojson = _useState2[0],
+      setDisplayGeojson = _useState2[1];
+
+  useEffect(function () {
+    return function () {
+      // This is the cleanup function, it is called when this react component is removed from react-dom
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current);
+      }
+    };
+  }, []);
+  var transitionToGeojson = useCallback(function () {
+    _transitionToGeojson(props, transitionGeojsonCommonDataRef, transitionGeojsonDataRef, transitionInProgressRef, oldGeojsonRef, msPerStep, currentTransitionStepRef, mapHook.map, transitionTimeoutRef, setDisplayGeojson);
+  }, [props, mapHook.map]);
+  useEffect(function () {
+    if (!mapHook.map || !initializedRef.current) return;
+
+    if (typeof props.transitionTime !== "undefined" && props.type === "line" && oldGeojsonRef.current) {
+      transitionInProgressRef.current = false;
+      currentTransitionStepRef.current = false;
+      transitionGeojsonDataRef.current = [];
+      transitionGeojsonCommonDataRef.current = [];
+      transitionToGeojson();
+    }
+
+    oldGeojsonRef.current = props.geojson;
+  }, [mapHook.map, transitionToGeojson, props]);
+  var startTransition = useCallback(function () {
+    if (props.type === "line" && typeof props.transitionTime !== "undefined" && props.transitionTime && typeof props.geojson.geometry !== "undefined" && JSON.stringify(oldGeojsonRef.current) !== JSON.stringify(props.geojson)) {
+      transitionToGeojson(props.geojson);
+      oldGeojsonRef.current = props.geojson;
+    }
+  }, [props, transitionToGeojson]);
+  useEffect(function () {
+    if (!mapHook.mapIsReady || !props.geojson) return;
+    initializedRef.current = true;
+    startTransition();
+  }, [mapHook.mapIsReady, startTransition, props]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MlGeoJsonLayer, _extends({}, restProps, {
+    geojson: displayGeojson
+  })));
+};
+
+MlTransitionGeoJsonLayer.propTypes = {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  mapId: PropTypes.string,
+
+  /**
+   * Type of the layer that will be added to the MapLibre instance.
+   * Possible values: "line", "circle", "fill"
+   */
+  type: PropTypes.string,
+
+  /**
+   * Layout property object, that is passed to the addLayer call.
+   * Possible props depend on the layer type.
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+   */
+  layout: PropTypes.object,
+
+  /**
+   * Paint property object, that is passed to the addLayer call.
+   * Possible props depend on the layer type.
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+   */
+  paint: PropTypes.object,
+
+  /**
+   * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
+   */
+  defaultPaintOverrides: PropTypes.object,
+
+  /**
+   * Javascript object that is spread into the addLayer commands first parameter.
+   */
+  options: PropTypes.object,
+
+  /**
+   * GeoJSON data that is supposed to be rendered by this component.
+   */
+  geojson: PropTypes.object,
+
+  /**
+   * Id of an existing layer in the mapLibre instance to help specify the layer order
+   * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
+   */
+  insertBeforeLayer: PropTypes.string,
+
+  /**
+   * Click event handler that is executed whenever a geometry rendered by this component is clicked.
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
+   */
+  onHover: PropTypes.func,
+
+  /**
+   * Leave event handler that is executed whenever a geometry rendered by this component is
+   * left/unhovered.
+   */
+  onLeave: PropTypes.func,
+
+  /**
+   * Creates transition animation whenever the geojson prop changes.
+   * Only works with layer type "line" and LineString GeoJSON data.
+   */
+  transitionTime: PropTypes.number
+};
+
+/**
+ * Adds a marker to the map and displays a marker description next to it
+ *
+ * @param {object} props
+ * @param {string} props.mapId Id of the target MapLibre instance in mapContext
+ * @param {number} props.lng
+ * @param {number} props.lat
+ * @param {string} props.content
+ *
+ * @component
+ */
+
+var MlMarker = function MlMarker(props) {
+  var mapContext = useContext(MapContext);
+  var mapState = useMapState({
+    mapId: props.mapId,
+    watch: {
+      viewport: true
+    }
+  });
+  var iframe = useRef(undefined);
+  var initializedRef = useRef(false);
+  var mapRef = useRef(undefined);
+  var componentId = useRef((props.idPrefix ? props.idPrefix : "MlMarker-") + v4());
+
+  var _useState = useState({
+    width: "400px",
+    height: "500px"
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      iframeDimensions = _useState2[0],
+      setIframeDimensions = _useState2[1];
+
+  var _useState3 = useState(undefined),
+      _useState4 = _slicedToArray(_useState3, 2),
+      markerPixelPos = _useState4[0],
+      setMarkerPixelPos = _useState4[1];
+
+  useEffect(function () {
+    var _componentId = componentId.current;
+    return function () {
+      // This is the cleanup function, it is called when this react component is removed from react-dom
+      // try to remove anything this component has added to the MapLibre-gl instance
+      // e.g.: remove the layer
+      // mapContext.getMap(props.mapId).removeLayer(layerRef.current);
+      // check for the existence of map.style before calling getLayer or getSource
+      if (mapRef.current) {
+        mapRef.current.cleanup(_componentId);
+        mapRef.current = undefined;
+      }
+
+      initializedRef.current = false;
+    };
+  }, []);
+  useEffect(function () {
+    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return; // the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
+    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
+
+    initializedRef.current = true;
+    mapRef.current = mapContext.getMap(props.mapId);
+  }, [mapContext.mapIds, mapContext, props.mapId]);
+  useEffect(function () {
+    var _mapRef$current;
+
+    if (!((_mapRef$current = mapRef.current) !== null && _mapRef$current !== void 0 && _mapRef$current.project)) return;
+
+    var _pixelPos = mapRef.current.project([props.lng, props.lat]);
+
+    setMarkerPixelPos(_pixelPos);
+  }, [props.lng, props.lat, mapState.viewport]);
+  useEffect(function () {
+    var _iframe$current, _iframe$current$conte, _iframe$current$conte2, _iframe$current$conte3;
+
+    if (mapRef.current && (_iframe$current = iframe.current) !== null && _iframe$current !== void 0 && (_iframe$current$conte = _iframe$current.contentWindow) !== null && _iframe$current$conte !== void 0 && (_iframe$current$conte2 = _iframe$current$conte.document) !== null && _iframe$current$conte2 !== void 0 && (_iframe$current$conte3 = _iframe$current$conte2.body) !== null && _iframe$current$conte3 !== void 0 && _iframe$current$conte3.scrollHeight) {
+      setTimeout(function () {
+        var _iframe$current2, _iframe$current2$cont, _iframe$current2$cont2, _iframe$current2$cont3, _iframe$current3, _iframe$current3$cont, _iframe$current3$cont2, _iframe$current3$cont3;
+
+        var mapHeight = mapRef.current._container.clientHeight;
+
+        var _pixelPos = mapRef.current.project([props.lng, props.lat]);
+
+        var pixelToBottom = mapHeight - _pixelPos.y;
+        var iframeHeight = (_iframe$current2 = iframe.current) === null || _iframe$current2 === void 0 ? void 0 : (_iframe$current2$cont = _iframe$current2.contentWindow) === null || _iframe$current2$cont === void 0 ? void 0 : (_iframe$current2$cont2 = _iframe$current2$cont.document) === null || _iframe$current2$cont2 === void 0 ? void 0 : (_iframe$current2$cont3 = _iframe$current2$cont2.body) === null || _iframe$current2$cont3 === void 0 ? void 0 : _iframe$current2$cont3.scrollHeight;
+        var iframeWidth = (_iframe$current3 = iframe.current) === null || _iframe$current3 === void 0 ? void 0 : (_iframe$current3$cont = _iframe$current3.contentWindow) === null || _iframe$current3$cont === void 0 ? void 0 : (_iframe$current3$cont2 = _iframe$current3$cont.document) === null || _iframe$current3$cont2 === void 0 ? void 0 : (_iframe$current3$cont3 = _iframe$current3$cont2.body) === null || _iframe$current3$cont3 === void 0 ? void 0 : _iframe$current3$cont3.scrollWidth;
+        setIframeDimensions({
+          width: iframeWidth,
+          height: pixelToBottom < iframeHeight ? pixelToBottom : iframeHeight
+        });
+      }, 100);
+    }
+  }, [props.lng, props.lat, props.content]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MlGeoJsonLayer, {
+    geojson: {
+      type: "Feature",
+      geometry: {
+        type: "Point",
+        coordinates: [props.lng, props.lat]
+      },
+      properties: {}
+    },
+    paint: {
+      "circle-radius": 14,
+      "circle-color": "rgba(40,200,20,0.5)"
+    },
+    type: "circle",
+    mapId: props.mapId
+  }), markerPixelPos && /*#__PURE__*/React__default.createElement(Paper, {
+    sx: {
+      opacity: 0.7,
+      position: "fixed",
+      display: "flex",
+
+      /** TODO: fix positioning delay when moving the map */
+      left: markerPixelPos.x,
+      top: markerPixelPos.y,
+      width: iframeDimensions.width,
+      height: iframeDimensions.height,
+      "&:hover": {
+        opacity: 1
+      },
+      zIndex: -1
+    }
+  }, /*#__PURE__*/React__default.createElement("iframe", {
+    style: {
+      width: "100%"
+    },
+    srcDoc: props.content,
+    ref: iframe,
+    sandbox: "allow-same-origin allow-popups-to-escape-sandbox",
+    frameBorder: "0",
+    title: componentId.current
+  })));
+};
+
+MlMarker.defaultProps = {
+  mapId: undefined
+};
+MlMarker.propTypes = {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  mapId: PropTypes.string,
+
+  /**
+   * Longitude of the marker position
+   */
+  lng: PropTypes.number,
+
+  /**
+   * Latitude of the marker position
+   */
+  lat: PropTypes.number,
+
+  /**
+   * Content of the description popup
+   */
+  content: PropTypes.string
+};
+
+function useWms(props) {
+  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+  var _useState = useState(undefined),
+      _useState2 = _slicedToArray(_useState, 2),
+      getFeatureInfoUrl = _useState2[0],
+      setGetFeatureInfoUrl = _useState2[1];
+
+  var _useState3 = useState(props.url),
+      _useState4 = _slicedToArray(_useState3, 2),
+      url = _useState4[0],
+      setUrl = _useState4[1];
+
+  var _useState5 = useState(""),
+      _useState6 = _slicedToArray(_useState5, 2),
+      wmsUrl = _useState6[0],
+      setWmsUrl = _useState6[1];
+
+  var _useState7 = useState(undefined),
+      _useState8 = _slicedToArray(_useState7, 2),
+      capabilities = _useState8[0],
+      setCapabilities = _useState8[1];
+
+  var _useState9 = useState(undefined),
+      _useState10 = _slicedToArray(_useState9, 2),
+      error = _useState10[0],
+      setError = _useState10[1];
+
+  var clearState = function clearState() {
+    setGetFeatureInfoUrl(undefined);
+    setCapabilities(undefined); //setLayers([]);
+
+    setWmsUrl("");
+  };
+
+  useEffect(function () {
+    var _propsUrlParams2;
+
+    // extract URL parameters from the given URL
+    clearState();
+    setError(undefined);
+    if (!url) return;
+
+    var _propsUrlParams;
+
+    var _wmsUrl = url;
+
+    if (url.indexOf("?") !== -1) {
+      _propsUrlParams = url.split("?");
+      _wmsUrl = _propsUrlParams[0];
+    }
+
+    var _urlParamsFromUrl = new URLSearchParams((_propsUrlParams2 = _propsUrlParams) === null || _propsUrlParams2 === void 0 ? void 0 : _propsUrlParams2[1]);
+
+    var urlParamsObj = _objectSpread2(_objectSpread2({}, Object.fromEntries(_urlParamsFromUrl)), props.urlParameters); // create URLSearchParams object to assemble the URL Parameters
+
+
+    var urlParams = new URLSearchParams(urlParamsObj);
+    var urlParamsStr = decodeURIComponent(urlParams.toString()) + "".replace(/%2F/g, "/").replace(/%3A/g, ":");
+    fetch(_wmsUrl + "?" + urlParamsStr).then(function (res) {
+      if (!res.ok) {
+        throw Error(res.statusText + " (" + res.status + " - " + res.type + ")");
+      } else {
+        return res.text();
+      }
+    }).then(function (data) {
+      setCapabilities(new WMSCapabilities(data).toJSON());
+    }).catch(function (error) {
+      //reset local state
+      clearState();
+      console.log(error);
+      setError(error.message);
+    });
+  }, [url, props.urlParameters]);
+  useEffect(function () {
+    var _capabilities$Capabil, _capabilities$Capabil2, _capabilities$Capabil3, _capabilities$Capabil4, _capabilities$Capabil5, _capabilities$Capabil6, _capabilities$Capabil7, _capabilities$Capabil8, _capabilities$Capabil9, _capabilities$Capabil10, _capabilities$Capabil11, _capabilities$Capabil12, _capabilities$Capabil13, _capabilities$Capabil14;
+
+    if (!(capabilities !== null && capabilities !== void 0 && capabilities.Service)) return;
+    setWmsUrl((_capabilities$Capabil = capabilities.Capability) === null || _capabilities$Capabil === void 0 ? void 0 : (_capabilities$Capabil2 = _capabilities$Capabil.Request) === null || _capabilities$Capabil2 === void 0 ? void 0 : (_capabilities$Capabil3 = _capabilities$Capabil2.GetMap) === null || _capabilities$Capabil3 === void 0 ? void 0 : (_capabilities$Capabil4 = _capabilities$Capabil3.DCPType) === null || _capabilities$Capabil4 === void 0 ? void 0 : (_capabilities$Capabil5 = _capabilities$Capabil4[0]) === null || _capabilities$Capabil5 === void 0 ? void 0 : (_capabilities$Capabil6 = _capabilities$Capabil5.HTTP) === null || _capabilities$Capabil6 === void 0 ? void 0 : (_capabilities$Capabil7 = _capabilities$Capabil6.Get) === null || _capabilities$Capabil7 === void 0 ? void 0 : _capabilities$Capabil7.OnlineResource); // set getFeatureInfo url
+
+    setGetFeatureInfoUrl((_capabilities$Capabil8 = capabilities.Capability) === null || _capabilities$Capabil8 === void 0 ? void 0 : (_capabilities$Capabil9 = _capabilities$Capabil8.Request) === null || _capabilities$Capabil9 === void 0 ? void 0 : (_capabilities$Capabil10 = _capabilities$Capabil9.GetFeatureInfo) === null || _capabilities$Capabil10 === void 0 ? void 0 : (_capabilities$Capabil11 = _capabilities$Capabil10.DCPType) === null || _capabilities$Capabil11 === void 0 ? void 0 : (_capabilities$Capabil12 = _capabilities$Capabil11[0]) === null || _capabilities$Capabil12 === void 0 ? void 0 : (_capabilities$Capabil13 = _capabilities$Capabil12.HTTP) === null || _capabilities$Capabil13 === void 0 ? void 0 : (_capabilities$Capabil14 = _capabilities$Capabil13.Get) === null || _capabilities$Capabil14 === void 0 ? void 0 : _capabilities$Capabil14.OnlineResource);
+  }, [capabilities]);
+  return {
+    capabilities: capabilities,
+    getFeatureInfoUrl: getFeatureInfoUrl,
+    wmsUrl: wmsUrl,
+    error: error,
+    setUrl: setUrl
+  };
+}
+
+useWms.defaultProps = {
+  url: "",
+  urlParameters: {
+    SERVICE: "WMS",
+    VERSION: "1.3.0",
+    REQUEST: "getCapabilities"
+  }
+};
+
+export { GeoJsonContext, GeoJsonProvider, MapLibreMap, MlBasicComponent, MlComponentTemplate, MlCreatePdfButton, MlFeatureEditor, MlFillExtrusionLayer, MlFollowGps, MlGPXViewer, MlGeoJsonLayer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlMarker, MlNavigationCompass, MlNavigationTools, MlOsmLayer, MlSpatialElevationProfile, MlTransitionGeoJsonLayer, MlVectorTileLayer, MlWmsLayer, useMap, useMapState, useWms };
 //# sourceMappingURL=index.esm.js.map