@mapcomponents/react-maplibre 0.1.10 → 0.1.14

package/dist/index.esm.js

@@ -8,7 +8,7 @@ import Button from '@mui/material/Button';
 import maplibregl$1, { Popup } from 'maplibre-gl';
 import jsPDF from 'jspdf';
 import PrinterIcon from '@mui/icons-material/Print';
-import { lineString, length, lineChunk, point, bbox } from '@turf/turf';
+import { lineString, length, lineChunk, point, bbox, lineOffset, distance } from '@turf/turf';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import ControlPointIcon from '@mui/icons-material/ControlPoint';
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
@@ -16,6 +16,7 @@ import GpsFixedIcon from '@mui/icons-material/GpsFixed';
 import _styled from '@emotion/styled/base';
 import { css } from '@emotion/css';
 import RoomIcon from '@mui/icons-material/Room';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import Point from '@mapbox/point-geometry';
@@ -30,6 +31,7 @@ import FileCopy from '@mui/icons-material/FileCopy';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
+import { lineString as lineString$1, polygon } from '@turf/helpers';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -287,7 +289,7 @@ var MapLibreGlWrapper = function MapLibreGlWrapper(props) {
     on: function on(eventName, handler, options, componentId) {
       if (!self.eventHandlers[eventName]) return;
 
-      if (typeof options === 'string') {
+      if (typeof options === "string") {
         componentId = options;
         options = {};
       }
@@ -428,7 +430,7 @@ var MapLibreGlWrapper = function MapLibreGlWrapper(props) {
      */
     oldViewportStateString: "{}",
     getViewport: function getViewport() {
-      return typeof self.map.getCenter === 'function' ? {
+      return typeof self.map.getCenter === "function" ? {
         center: function (_ref) {
           var lng = _ref.lng,
               lat = _ref.lat,
@@ -444,24 +446,8 @@ var MapLibreGlWrapper = function MapLibreGlWrapper(props) {
         pitch: self.map.getPitch()
       } : {};
     },
-    viewportRefreshEnabled: true,
-    viewportRefreshWaiting: false,
-    refreshViewport: function refreshViewport(force) {
-      if (self.wrapper.viewportRefreshEnabled || force) {
-        self.wrapper.viewportRefreshEnabled = false;
-        self.wrapper.viewportState = self.wrapper.getViewport();
-        self.wrapper.viewportStateString = JSON.stringify(self.wrapper.viewportState);
-        setTimeout(function () {
-          self.wrapper.viewportRefreshEnabled = true;
-
-          if (self.wrapper.viewportRefreshWaiting) {
-            self.wrapper.viewportRefreshWaiting = false;
-            self.wrapper.refreshViewport();
-          }
-        }, 50);
-      } else {
-        self.wrapper.viewportRefreshWaiting = true;
-      }
+    refreshViewport: function refreshViewport() {
+      self.wrapper.viewportState = self.wrapper.getViewport();
     }
   };
   /**
@@ -738,7 +724,7 @@ var MapLibreGlWrapper = function MapLibreGlWrapper(props) {
                 if (response.ok) {
                   return response.json();
                 } else {
-                  throw new Error('error loading map style.json');
+                  throw new Error("error loading map style.json");
                 }
               }).then(function (styleJson) {
                 styleJson.layers.forEach(function (item) {
@@ -757,15 +743,11 @@ var MapLibreGlWrapper = function MapLibreGlWrapper(props) {
             case 3:
               self.map = new maplibregl.Map(props.mapOptions);
               self.addNativeMaplibreFunctionsAndProps();
-              self.wrapper.refreshViewport(true);
+              self.wrapper.refreshViewport();
               self.wrapper.fire("viewportchange");
               self.map.on("move", function () {
-                self.wrapper.refreshViewport();
-
-                if (self.wrapper.viewportStateString !== self.wrapper.oldViewportStateString) {
-                  self.wrapper.oldViewportStateString = self.wrapper.viewportStateString;
-                  self.wrapper.fire("viewportchange");
-                }
+                self.wrapper.viewportState = self.wrapper.getViewport();
+                self.wrapper.fire("viewportchange");
               });
               self.map.on("data", function () {
                 self.wrapper.refreshLayerState();
@@ -1244,18 +1226,25 @@ MlCreatePdfButton.propTypes = {
   mapId: PropTypes.string
 };
 
-var _showNextTransitionSegment = function _showNextTransitionSegment(props, layerId, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep) {
+var _showNextTransitionSegment = function _showNextTransitionSegment(props, layerId, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef) {
   var _arguments = arguments;
 
   if (typeof map.getSource(layerId) === "undefined" || !transitionInProgressRef.current) {
-    setTimeout(function () {
+    transitionTimeoutRef.current = setTimeout(function () {
       return _showNextTransitionSegment.apply(void 0, _toConsumableArray(_arguments));
     }, msPerStep);
     return;
   }
 
   if (typeof transitionGeojsonDataRef.current[currentTransitionStepRef.current] !== "undefined") {
+    var _map$getSource;
+
     var newData = currentTransitionStepRef.current + 1 === transitionGeojsonDataRef.current.length ? props.geojson : lineString([].concat(_toConsumableArray(transitionGeojsonCommonDataRef.current), _toConsumableArray(transitionGeojsonDataRef.current[currentTransitionStepRef.current].geometry.coordinates)));
+
+    if (!(map !== null && map !== void 0 && (_map$getSource = map.getSource) !== null && _map$getSource !== void 0 && _map$getSource.call(map, layerId))) {
+      return;
+    }
+
     map.getSource(layerId).setData(newData);
 
     if (typeof props.onTransitionFrame === "function") {
@@ -1265,7 +1254,7 @@ var _showNextTransitionSegment = function _showNextTransitionSegment(props, laye
     currentTransitionStepRef.current++;
 
     if (transitionInProgressRef.current && currentTransitionStepRef.current < transitionGeojsonDataRef.current.length) {
-      setTimeout(function () {
+      transitionTimeoutRef.current = setTimeout(function () {
         return _showNextTransitionSegment.apply(void 0, _toConsumableArray(_arguments));
       }, msPerStep);
     } else {
@@ -1278,7 +1267,7 @@ var _showNextTransitionSegment = function _showNextTransitionSegment(props, laye
   }
 };
 
-var _transitionToGeojson = function _transitionToGeojson(newGeojson, props, transitionGeojsonCommonDataRef, transitionGeojsonDataRef, transitionInProgressRef, oldGeojsonRef, msPerStep, currentTransitionStepRef, map, layerId) {
+var _transitionToGeojson = function _transitionToGeojson(newGeojson, props, transitionGeojsonCommonDataRef, transitionGeojsonDataRef, transitionInProgressRef, oldGeojsonRef, msPerStep, currentTransitionStepRef, map, layerId, transitionTimeoutRef) {
   // 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 = [];
@@ -1361,11 +1350,11 @@ var _transitionToGeojson = function _transitionToGeojson(newGeojson, props, tran
 
     tmpLinestring = tmpChunks.features[1];
 
-    for (i = 1; i < srcTransitionSteps; i++) {
+    for (i = 0; i < srcTransitionSteps; i++) {
       transitionGeojsonDataRef.current.push(tmpLinestring);
 
-      if (typeof tmpChunks.features[i + 1] !== "undefined") {
-        tmpLinestring = lineString([].concat(_toConsumableArray(tmpLinestring.geometry.coordinates), _toConsumableArray(tmpChunks.features[i + 1].geometry.coordinates)));
+      if (typeof tmpChunks.features[i] !== "undefined") {
+        tmpLinestring = lineString([].concat(_toConsumableArray(tmpLinestring.geometry.coordinates), _toConsumableArray(tmpChunks.features[i].geometry.coordinates)));
       } else {
         transitionGeojsonDataRef.current.push(tmpLinestring);
         break;
@@ -1380,11 +1369,11 @@ var _transitionToGeojson = function _transitionToGeojson(newGeojson, props, tran
 
     tmpLinestring = tmpChunks.features[1];
 
-    for (i = 1; i < targetTransitionSteps; i++) {
+    for (i = 0; i < targetTransitionSteps; i++) {
       transitionGeojsonDataRef.current.push(tmpLinestring);
 
-      if (typeof tmpChunks.features[i + 1] !== "undefined") {
-        tmpLinestring = lineString([].concat(_toConsumableArray(tmpLinestring.geometry.coordinates), _toConsumableArray(tmpChunks.features[i + 1].geometry.coordinates)));
+      if (typeof tmpChunks.features[i] !== "undefined") {
+        tmpLinestring = lineString([].concat(_toConsumableArray(tmpLinestring.geometry.coordinates), _toConsumableArray(tmpChunks.features[i].geometry.coordinates)));
       } else {
         transitionGeojsonDataRef.current.push(tmpLinestring);
         break;
@@ -1395,8 +1384,8 @@ var _transitionToGeojson = function _transitionToGeojson(newGeojson, props, tran
   transitionGeojsonDataRef.current.push(props.geojson);
   currentTransitionStepRef.current = 1;
   transitionInProgressRef.current = true;
-  setTimeout(function () {
-    return _showNextTransitionSegment(props, layerId, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep);
+  transitionTimeoutRef.current = setTimeout(function () {
+    return _showNextTransitionSegment(props, layerId, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef);
   }, msPerStep);
 };
 
@@ -1414,6 +1403,7 @@ var MlGeoJsonLayer = function MlGeoJsonLayer(props) {
   var mapRef = useRef(null);
   var initializedRef = useRef(false);
   var transitionInProgressRef = useRef(false);
+  var transitionTimeoutRef = useRef(undefined);
   var currentTransitionStepRef = useRef(false);
   var transitionGeojsonDataRef = useRef([]);
   var transitionGeojsonCommonDataRef = useRef([]);
@@ -1423,6 +1413,10 @@ var MlGeoJsonLayer = function MlGeoJsonLayer(props) {
     var _componentId = componentId.current;
     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);
+      }
+
       if (mapRef.current) {
         mapRef.current.cleanup(_componentId);
         mapRef.current = null;
@@ -1430,15 +1424,21 @@ var MlGeoJsonLayer = function MlGeoJsonLayer(props) {
     };
   }, []);
   useEffect(function () {
-    if (!mapRef.current || !initializedRef.current) return; // the MapLibre-gl instance (mapContext.map) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
+    if (!mapRef.current || !initializedRef.current) return;
+
+    for (var key in props.layout) {
+      mapContext.getMap(props.mapId).setLayoutProperty(layerId.current, key, props.layout[key]);
+    }
+  }, [props.layout, mapContext, props.mapId]);
+  useEffect(function () {
+    if (!mapRef.current || !initializedRef.current) return;
 
     for (var key in props.paint) {
-      mapContext.getMap(props.mapId).setPaintProperty(componentId.current, key, props.paint[key]);
+      mapContext.getMap(props.mapId).setPaintProperty(layerId.current, key, props.paint[key]);
     }
   }, [props.paint, mapContext, props.mapId]);
   var transitionToGeojson = useCallback(function (newGeojson) {
-    _transitionToGeojson(newGeojson, props, transitionGeojsonCommonDataRef, transitionGeojsonDataRef, transitionInProgressRef, oldGeojsonRef, msPerStep, currentTransitionStepRef, mapRef.current, componentId.current);
+    _transitionToGeojson(newGeojson, props, transitionGeojsonCommonDataRef, transitionGeojsonDataRef, transitionInProgressRef, oldGeojsonRef, msPerStep, currentTransitionStepRef, mapRef.current, componentId.current, transitionTimeoutRef);
   }, [props]);
   useEffect(function () {
     var _mapRef$current, _mapRef$current$getSo;
@@ -1482,7 +1482,8 @@ var MlGeoJsonLayer = function MlGeoJsonLayer(props) {
         paint: props.paint || {
           "line-color": "rgb(100,200,100)",
           "line-width": 10
-        }
+        },
+        layout: props.layout || {}
       }, props.insertBeforeLayer, componentId.current);
 
       if (typeof props.onHover !== "undefined") {
@@ -1499,9 +1500,7 @@ var MlGeoJsonLayer = function MlGeoJsonLayer(props) {
 
       if (props.type === "line" && typeof props.transitionTime !== "undefined" && typeof props.geojson.geometry !== "undefined") {
         transitionToGeojson(props.geojson);
-        setTimeout(function () {
-          oldGeojsonRef.current = props.geojson;
-        }, props.transitionTime / 2);
+        oldGeojsonRef.current = props.geojson;
       }
     }
   }, [mapContext.mapIds, mapContext, props, transitionToGeojson]);
@@ -1521,8 +1520,17 @@ MlGeoJsonLayer.propTypes = {
   type: PropTypes.string,
 
   /**
-   * Paint object, that is passed to the addLayer call.
-   * Possible propsdepend on the layer type.
+   * 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
@@ -1577,12 +1585,12 @@ MlGeoJsonLayer.propTypes = {
 var MlImageMarkerLayer = function MlImageMarkerLayer(props) {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
   var mapRef = useRef(null);
-  var componentId = useRef((props.idPrefix ? props.idPrefix : "MlOsmLayer-") + v4());
+  var componentId = useRef((props.idPrefix ? props.idPrefix : "MlImageMarkerLayer-") + v4());
   var mapContext = useContext(MapContext);
   var layerInitializedRef = useRef(false);
   var idSuffixRef = useRef(props.idSuffix || new Date().getTime());
   var imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
-  var layerId = useRef((props.layerId || "MlImageMarkerLayer-") + idSuffixRef.current);
+  var layerId = useRef(props.layerId || componentId.current);
   useEffect(function () {
     var _componentId = componentId.current;
     return function () {
@@ -1626,6 +1634,7 @@ var MlImageMarkerLayer = function MlImageMarkerLayer(props) {
 
     mapRef.current = mapContext.getMap(props.mapId);
     layerInitializedRef.current = true;
+    console.log(props.imgSrc);
 
     if (props.imgSrc) {
       mapRef.current.loadImage(props.imgSrc, function (error, image) {
@@ -1891,6 +1900,8 @@ MlNavigationCompass.propTypes = {
   rotateLeftStyle: PropTypes.object
 };
 
+var marker = "b556faa3bc6829d2.png";
+
 /**
  * Adds a button that makes the map follow the users GPS position using
  * navigator.geolocation.watchPosition if activated
@@ -1925,6 +1936,12 @@ var MlFollowGps = function MlFollowGps(props) {
   var initializedRef = useRef(false);
   var mapRef = useRef(undefined);
   var componentId = useRef((props.idPrefix ? props.idPrefix : "MlFollowGps-") + v4());
+
+  var _useState7 = useState(30),
+      _useState8 = _slicedToArray(_useState7, 2),
+      accuracyRadius = _useState8[0],
+      setAccuracyRadius = _useState8[1];
+
   useEffect(function () {
     var _componentId = componentId.current;
     return function () {
@@ -1957,6 +1974,7 @@ var MlFollowGps = function MlFollowGps(props) {
   var getLocationSuccess = function getLocationSuccess(pos) {
     if (!mapRef.current) return;
     mapRef.current.setCenter([pos.coords.longitude, pos.coords.latitude]);
+    setAccuracyRadius(pos.coords.accuracy);
     setGeoJson(point([pos.coords.longitude, pos.coords.latitude]));
   };
 
@@ -1969,7 +1987,10 @@ var MlFollowGps = function MlFollowGps(props) {
     geojson: geoJson,
     type: "circle",
     paint: {
-      "circle-radius": 30,
+      "circle-radius": {
+        stops: [[0, 0], [20, accuracyRadius / 0.075 / Math.cos(geoJson.geometry.coordinates[1] * Math.PI / 180)]],
+        base: 2
+      },
       "circle-color": "#ee7700",
       "circle-opacity": 0.5
     }
@@ -1985,7 +2006,7 @@ var MlFollowGps = function MlFollowGps(props) {
         "icon-offset": [0, -340]
       }
     },
-    imgSrc: "/assets/marker.png"
+    imgSrc: marker
   }), /*#__PURE__*/React__default.createElement(Button, {
     sx: _objectSpread2({
       zIndex: 1002,
@@ -2002,7 +2023,9 @@ var MlFollowGps = function MlFollowGps(props) {
       setIsFollowed(!isFollowed);
     }
   }, " ", /*#__PURE__*/React__default.createElement(RoomIcon, {
-    sx: {}
+    sx: {
+      fontSize: props.style.fontSize
+    }
   }), " "));
 };
 
@@ -2016,6 +2039,7 @@ MlFollowGps.defaultProps = {
     backgroundColor: "#414141",
     borderRadius: "23%",
     margin: 0.15,
+    fontSize: "1.3em",
     ":hover": {
       backgroundColor: "#515151",
       color: "#ececec"
@@ -2050,17 +2074,19 @@ var MlNavigationTools = function MlNavigationTools(props) {
       locationAccessDenied = _useState4[0],
       setLocationAccessDenied = _useState4[1];
 
+  var mediaIsMobile = useMediaQuery("(max-width:900px)");
   var buttonStyle = {
-    minWidth: "30px",
-    minHeight: "30px",
-    width: "30px",
-    height: "30px",
+    minWidth: "20px",
+    minHeight: "20px",
+    width: mediaIsMobile ? "50px" : "30px",
+    height: mediaIsMobile ? "50px" : "30px",
     color: "#bbb",
     backgroundColor: "#414141",
     borderRadius: "23%",
     //border: "1px solid #bbb",
     //boxShadow: "0px 0px 4px rgba(0,0,0,.5)",
     margin: 0.15,
+    fontSize: mediaIsMobile ? "1.5em" : "1.2em",
     ":hover": {
       backgroundColor: "#515151",
       color: "#ececec"
@@ -2144,8 +2170,8 @@ var MlNavigationTools = function MlNavigationTools(props) {
     style: {
       zIndex: 501,
       position: "absolute",
-      right: "20px",
-      bottom: "20px",
+      right: mediaIsMobile ? "15px" : "5px",
+      bottom: mediaIsMobile ? "40px" : "20px",
       display: "flex",
       flexDirection: "column"
     }
@@ -2153,15 +2179,15 @@ var MlNavigationTools = function MlNavigationTools(props) {
     style: {
       width: "31px",
       position: "relative",
-      height: "50px",
-      marginLeft: "-5px"
+      height: mediaIsMobile ? "55px" : "45px",
+      marginLeft: mediaIsMobile ? "3px" : "-5px",
+      transform: mediaIsMobile ? "scale(1.6)" : "scale(1)"
     },
     backgroundStyle: {
       boxShadow: "0px 0px 18px rgba(0,0,0,.5)"
     }
   }), /*#__PURE__*/React__default.createElement(Button, {
     sx: _objectSpread2(_objectSpread2({}, buttonStyle), {}, {
-      fontSize: ".9em",
       fontWeight: 600
     }),
     onClick: adjustPitch
@@ -2171,15 +2197,17 @@ var MlNavigationTools = function MlNavigationTools(props) {
     disabled: locationAccessDenied
   }, /*#__PURE__*/React__default.createElement(GpsFixedIcon, {
     sx: {
-      width: ".9em"
+      fontSize: mediaIsMobile ? "1.5em" : "1.2em"
     }
-  })), /*#__PURE__*/React__default.createElement(MlFollowGps, null), /*#__PURE__*/React__default.createElement(ButtonGroup, {
+  })), /*#__PURE__*/React__default.createElement(MlFollowGps, {
+    style: buttonStyle
+  }), /*#__PURE__*/React__default.createElement(ButtonGroup, {
     orientation: "vertical",
     sx: {
-      width: "30px",
+      width: "50px",
       border: "none",
       Button: {
-        minWidth: "30px !important",
+        minWidth: "20px !important",
         border: "none",
         padding: 0
       },
@@ -2190,10 +2218,18 @@ var MlNavigationTools = function MlNavigationTools(props) {
   }, /*#__PURE__*/React__default.createElement(Button, {
     sx: buttonStyle,
     onClick: zoomIn
-  }, /*#__PURE__*/React__default.createElement(ControlPointIcon, null)), /*#__PURE__*/React__default.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(ControlPointIcon, {
+    sx: {
+      fontSize: mediaIsMobile ? "1.5em" : "1.2em"
+    }
+  })), /*#__PURE__*/React__default.createElement(Button, {
     sx: buttonStyle,
     onClick: zoomOut
-  }, /*#__PURE__*/React__default.createElement(RemoveCircleOutlineIcon, null))));
+  }, /*#__PURE__*/React__default.createElement(RemoveCircleOutlineIcon, {
+    sx: {
+      fontSize: mediaIsMobile ? "1.5em" : "1.2em"
+    }
+  }))));
 };
 
 var MlLayer = function MlLayer(props) {
@@ -2203,7 +2239,7 @@ var MlLayer = function MlLayer(props) {
   var mapRef = useRef(null);
   var componentId = useRef((props.layerId ? props.layerId : "MlLayer-") + v4());
   var idSuffixRef = useRef(props.idSuffix || new Date().getTime());
-  var layerId = (props.layerId || "MlLayer-") + idSuffixRef.current;
+  var layerId = useRef(props.layerId || componentId.current);
   var layerPaintConfRef = useRef(undefined);
   var layerLayoutConfRef = useRef(undefined);
   useEffect(function () {
@@ -2251,7 +2287,7 @@ var MlLayer = function MlLayer(props) {
 
       layerInitializedRef.current = true;
       mapRef.current.addLayer(_objectSpread2({
-        id: layerId,
+        id: layerId.current,
         type: "background",
         paint: {
           "background-color": "rgba(0,0,0,0)"
@@ -2517,7 +2553,7 @@ var defaultProps = {
 
 var MlWmsLayer = function MlWmsLayer(props) {
   var mapContext = useContext(MapContext);
-  var componentId = useRef((props.idPrefix ? props.idPrefix : "MlWmsLayer-") + v4());
+  var componentId = useRef(props.layerId || "MlWmsLayer-" + v4());
   var mapRef = useRef(null);
   var initializedRef = useRef(false);
   var layerId = useRef(props.layerId || componentId.current);
@@ -4123,7 +4159,7 @@ var MlLayerMagnify = function MlLayerMagnify(props) {
       return false;
     }
 
-    if (!mapContext.mapExists(props.map1Id) || !mapContext.mapExists(props.map2Id)) {
+    if (!mapContext.getMap(props.map1Id) || !mapContext.getMap(props.map2Id)) {
       return false;
     }
 
@@ -4168,7 +4204,7 @@ var MlLayerMagnify = function MlLayerMagnify(props) {
   useEffect(function () {
     if (!mapExists() || syncMoveInitializedRef.current) return;
     syncMoveInitializedRef.current = true;
-    syncCleanupFunctionRef.current = syncMove(mapContext.getMap(props.map1Id), mapContext.getMap(props.map2Id));
+    syncCleanupFunctionRef.current = syncMove(mapContext.getMap(props.map1Id).map, mapContext.getMap(props.map2Id).map);
 
     if (mapContext.maps[props.map1Id].getCanvas().clientWidth > mapContext.maps[props.map1Id].getCanvas().clientHeight && magnifierRadiusRef.current * 2 > mapContext.maps[props.map1Id].getCanvas().clientHeight) {
       magnifierRadiusRef.current = Math.floor(mapContext.maps[props.map1Id].getCanvas().clientHeight / 2);
@@ -4280,7 +4316,7 @@ var MlLayerSwipe = function MlLayerSwipe(props) {
       return false;
     }
 
-    if (!mapContext.mapExists(props.map1Id) || !mapContext.mapExists(props.map2Id)) {
+    if (!mapContext.getMap(props.map1Id) || !mapContext.getMap(props.map2Id)) {
       return false;
     }
 
@@ -4313,7 +4349,7 @@ var MlLayerSwipe = function MlLayerSwipe(props) {
   useEffect(function () {
     if (!mapExists() || initializedRef.current) return;
     initializedRef.current = true;
-    syncCleanupFunctionRef.current = syncMove(mapContext.getMap(props.map1Id), mapContext.getMap(props.map2Id));
+    syncCleanupFunctionRef.current = syncMove(mapContext.getMap(props.map1Id).map, mapContext.getMap(props.map2Id).map);
     onMove({
       clientX: mapContext.maps[props.map1Id].getCanvas().clientWidth / 2
     });
@@ -4379,6 +4415,19 @@ MlLayerSwipe.propTypes = {
 var GeoJsonContext = /*#__PURE__*/React__default.createContext({});
 var GeoJsonContextProvider = GeoJsonContext.Provider;
 
+/**
+ * https://github.com/mapbox/togeojson
+ *
+ * Copyright (c) 2016 Mapbox All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+ *
+ * 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+ *
+ * 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
 var toGeoJSON = function () {
   var removeSpace = /\s*/g,
       trimSpace = /^\s*|\s*$/g,
@@ -5019,6 +5068,7 @@ var MlGPXViewer = function MlGPXViewer(props) {
       setMetaData = _useState6[1];
 
   var fileupload = useRef(null);
+  var mediaIsMobile = useMediaQuery("(max-width:900px)");
   var popup = useRef(new Popup({
     closeButton: false,
     closeOnClick: true
@@ -5216,14 +5266,20 @@ var MlGPXViewer = function MlGPXViewer(props) {
     fileupload.current.click();
   };
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
-    onClick: manualUpload,
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
-      position: "absolute",
+      position: "fixed",
       right: "5px",
-      bottom: "75px",
-      backgroundColor: "rgba(255,255,255,1)",
+      bottom: mediaIsMobile ? "40px" : "25px",
+      display: "flex",
+      flexDirection: "column",
+      gap: "5px",
       zIndex: 1000
+    }
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    onClick: manualUpload,
+    style: {
+      backgroundColor: "rgba(255,255,255,1)"
     },
     size: "large"
   }, /*#__PURE__*/React__default.createElement("input", {
@@ -5238,14 +5294,10 @@ var MlGPXViewer = function MlGPXViewer(props) {
   }), /*#__PURE__*/React__default.createElement(FileCopy, null)), /*#__PURE__*/React__default.createElement(IconButton, {
     onClick: toogleDrawer,
     style: {
-      position: "absolute",
-      right: "5px",
-      bottom: "25px",
-      backgroundColor: "rgba(255,255,255,1)",
-      zIndex: 1000
+      backgroundColor: "rgba(255,255,255,1)"
     },
     size: "large"
-  }, /*#__PURE__*/React__default.createElement(InfoIcon, null)), /*#__PURE__*/React__default.createElement(Drawer, {
+  }, /*#__PURE__*/React__default.createElement(InfoIcon, null))), /*#__PURE__*/React__default.createElement(Drawer, {
     variant: "persistent",
     anchor: "left",
     open: open
@@ -5345,6 +5397,140 @@ GeoJsonProvider.propTypes = {
   children: PropTypes.node.isRequired
 };
 
+/**
+ * MlSpatialElevationProfile returns a Button that will add a standard OSM tile layer to the maplibre-gl instance.
+ *
+ * @component
+ */
+
+var MlSpatialElevationProfile = function MlSpatialElevationProfile(props) {
+  var mapContext = useContext(MapContext);
+  var componentId = useRef((props.idPrefix ? props.idPrefix : "MlSpatialElevationProfile-") + v4());
+  var mapRef = useRef(null);
+  var initializedRef = useRef(false);
+  var dataSource = useContext(GeoJsonContext);
+  var sourceName = useRef("elevationprofile-" + v4());
+  var layerName = useRef("elevationprofile-layer-" + v4());
+  var createStep = useCallback(function (x, y, z, x2, y2) {
+    //const summand = 0.0002;
+    var line = lineString$1([[x, y], [x2, y2]]);
+    var offsetLine = lineOffset(line, 5, {
+      units: "meters"
+    });
+    var x3 = offsetLine.geometry.coordinates[0][0];
+    var y3 = offsetLine.geometry.coordinates[0][1];
+    var x4 = offsetLine.geometry.coordinates[1][0];
+    var y4 = offsetLine.geometry.coordinates[1][1];
+    return polygon([[[x, y], [x2, y2], [x4, y4], [x3, y3], [x, y]]], {
+      height: z * props.elevationFactor
+    });
+  }, [props.elevationFactor]);
+  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
+      if (mapRef.current) {
+        mapRef.current.cleanup(_componentId);
+        mapRef.current = null;
+      }
+    };
+  }, []);
+  useEffect(function () {
+    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
+    initializedRef.current = true;
+    mapRef.current = mapContext.getMap(props.mapId);
+    mapRef.current.addSource(sourceName.current, {
+      type: "geojson",
+      data: dataSource.data
+    }, componentId.current);
+    mapRef.current.addLayer({
+      id: layerName.current,
+      source: sourceName.current,
+      type: "fill-extrusion",
+      paint: {
+        "fill-extrusion-height": ["get", "height"],
+        "fill-extrusion-opacity": 0.9,
+        "fill-extrusion-color": ["interpolate", ["linear"], ["get", "height"], 0, "rgba(0, 0, 255, 0)", 0.1, "royalblue", 0.3, "cyan", 0.5, "lime", 0.7, "yellow", 1, "yellow"]
+      }
+    }, props.insertBeforeLayer, componentId.current);
+  }, [mapContext.mapIds, props.insertBeforeLayer, props.mapId, dataSource, mapContext]);
+  useEffect(function () {
+    var _mapRef$current$getSo;
+
+    if (!mapRef.current || !mapRef.current.getLayer(layerName.current)) return;
+    var data = dataSource.data;
+    if (!data || !data.features) return;
+    var line = data.features.find(function (element) {
+      return element.geometry.type === "LineString";
+    });
+    if (!line || !line.geometry) return;
+    var heights = line.geometry.coordinates.map(function (coordinate, index) {
+      return coordinate[2];
+    });
+    var min = Math.min.apply(Math, _toConsumableArray(heights));
+    var max = Math.max.apply(Math, _toConsumableArray(heights)) - min;
+    max = max === 0 ? 1 : max;
+    mapRef.current.setPaintProperty(layerName.current, "fill-extrusion-color", ["interpolate", ["linear"], ["get", "height"], 0, "rgb(0,255,55)", max * props.elevationFactor, "rgb(255,0,0)"]);
+
+    var lerp = function lerp(x, y, a) {
+      return x * (1 - a) + y * a;
+    };
+
+    var points = [];
+    line.geometry.coordinates.forEach(function (coordinate, index) {
+      //const point = createPoint(coordinate[0],coordinate[1],coordinate[2]-min);
+      //points.push(point);
+      if (line.geometry.coordinates[index + 1]) {
+        var wayLength = distance([coordinate[0], coordinate[1]], [line.geometry.coordinates[index + 1][0], line.geometry.coordinates[index + 1][1]], {
+          units: "kilometers"
+        });
+        var listLength = ~~(wayLength * 1000 / 10);
+        listLength = listLength < 1 ? 1 : listLength;
+
+        for (var i = 0; i < listLength; i++) {
+          var x = lerp(line.geometry.coordinates[index][0], line.geometry.coordinates[index + 1][0], i / listLength);
+          var y = lerp(line.geometry.coordinates[index][1], line.geometry.coordinates[index + 1][1], i / listLength);
+          var z = lerp(line.geometry.coordinates[index][2] - min, line.geometry.coordinates[index + 1][2] - min, i / listLength);
+          var x2 = lerp(line.geometry.coordinates[index][0], line.geometry.coordinates[index + 1][0], (i + 1) / listLength);
+          var y2 = lerp(line.geometry.coordinates[index][1], line.geometry.coordinates[index + 1][1], (i + 1) / listLength);
+          var point = createStep(x, y, z, x2, y2);
+          points.push(point);
+        }
+      }
+    });
+    var newData = dataSource.getEmptyFeatureCollection();
+    newData.features = points;
+    (_mapRef$current$getSo = mapRef.current.getSource(sourceName.current)) === null || _mapRef$current$getSo === void 0 ? void 0 : _mapRef$current$getSo.setData(newData);
+  }, [dataSource.data, createStep, dataSource, props.elevationFactor, mapContext]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+};
+
+MlSpatialElevationProfile.defaultProps = {
+  elevationFactor: 1
+};
+MlSpatialElevationProfile.propTypes = {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  mapId: PropTypes.string,
+
+  /**
+   * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
+   */
+  idPrefix: PropTypes.string,
+
+  /**
+   * Number describes the factor of the height of the elevation
+   */
+  elevationFactor: PropTypes.number,
+
+  /**
+   * The layerId of an existing layer this layer should be rendered visually beneath
+   * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
+   */
+  insertBeforeLayer: PropTypes.string
+};
+
 /**
  * React hook that allows subscribing to map state changes
  *
@@ -5506,5 +5692,5 @@ useMapState.propTypes = {
   })
 };
 
-export { GeoJsonContext, GeoJsonProvider, MapLibreMap, MlBasicComponent, MlComponentTemplate, MlCreatePdfButton, MlFeatureEditor, MlFillExtrusionLayer, MlGPXViewer, MlGeoJsonLayer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlNavigationCompass, MlNavigationTools, MlOsmLayer, MlVectorTileLayer, MlWmsLayer, useMapState };
+export { GeoJsonContext, GeoJsonProvider, MapLibreMap, MlBasicComponent, MlComponentTemplate, MlCreatePdfButton, MlFeatureEditor, MlFillExtrusionLayer, MlGPXViewer, MlGeoJsonLayer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlNavigationCompass, MlNavigationTools, MlOsmLayer, MlSpatialElevationProfile, MlVectorTileLayer, MlWmsLayer, useMapState };
 //# sourceMappingURL=index.esm.js.map