@mapcomponents/react-maplibre 0.1.12 → 0.1.16

package/dist/index.esm.js

@@ -5,17 +5,18 @@ import maplibregl from 'maplibre-gl/dist/maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { v4 } from 'uuid';
 import Button from '@mui/material/Button';
+import RoomIcon from '@mui/icons-material/Room';
+import { lineString, length, lineChunk, point, circle, bbox, lineOffset, distance } from '@turf/turf';
 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 ButtonGroup from '@mui/material/ButtonGroup';
 import ControlPointIcon from '@mui/icons-material/ControlPoint';
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 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 = {};
       }
@@ -340,7 +342,7 @@ var MapLibreGlWrapper = function MapLibreGlWrapper(props) {
     /**
      * Array containing an object for each layer in the MapLibre instance providing information on visibility, loading state, order, paint & layout properties
      */
-    layerState: {},
+    layerState: [],
 
     /**
      * Maps layerIds to layerState in JSON string form for quick deep comparisons
@@ -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();
@@ -873,28 +855,74 @@ MapLibreMap.propTypes = {
 };
 
 /**
- * TODO: Add short & useful description
- *
- * @param {object} props
- * @param {string} props.mapId Id of the target MapLibre instance in mapContext
+ * React hook that allows subscribing to map state changes
  *
  * @component
  */
 
-var MlComponentTemplate = function MlComponentTemplate(props) {
+function useMapState(props) {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
   var mapContext = useContext(MapContext);
   var initializedRef = useRef(false);
   var mapRef = useRef(undefined);
-  var componentId = useRef((props.idPrefix ? props.idPrefix : "MlComponentTemplate-") + v4());
+
+  var _useState = useState(undefined),
+      _useState2 = _slicedToArray(_useState, 2),
+      center = _useState2[0],
+      setCenter = _useState2[1];
+
+  var _useState3 = useState(undefined),
+      _useState4 = _slicedToArray(_useState3, 2),
+      viewport = _useState4[0],
+      setViewport = _useState4[1];
+
+  var viewportRef = useRef(undefined);
+
+  var _useState5 = useState(undefined),
+      _useState6 = _slicedToArray(_useState5, 2),
+      layers = _useState6[0],
+      setLayers = _useState6[1];
+
+  var layersRef = useRef(undefined); //const mapRef = useRef(props.map);
+
+  var componentId = useRef(v4());
+  /**
+   * returns the element if it matches the defined filter criteria
+   * to be used as filter function on the layers array
+   *
+   * @param {object} layer
+   */
+
+  var layerIdFilter = useCallback(function (layer) {
+    var _props$filter, _props$filter2;
+
+    if (!(props !== null && props !== void 0 && (_props$filter = props.filter) !== null && _props$filter !== void 0 && _props$filter.includeBaseLayers) && layer.baseLayer) {
+      return false;
+    }
+
+    if (typeof ((_props$filter2 = props.filter) === null || _props$filter2 === void 0 ? void 0 : _props$filter2.matchLayerIds) !== "undefined") {
+      if (props.filter.matchLayerIds instanceof RegExp) {
+        return props.filter.matchLayerIds.test(layer.id);
+      } else {
+        return layer.id.includes(props.filter.matchLayerIds);
+      }
+    }
+
+    return true;
+  }, [props.filter]);
+  var refreshLayerState = useCallback(function () {
+    var _layerState = mapRef.current.wrapper.layerState.filter(layerIdFilter);
+
+    var _layerStateString = JSON.stringify(_layerState);
+
+    if (layersRef.current !== _layerStateString) {
+      layersRef.current = _layerStateString;
+      setLayers(_layerState);
+    }
+  }, [layerIdFilter]);
   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;
@@ -904,13 +932,177 @@ var MlComponentTemplate = function MlComponentTemplate(props) {
     };
   }, []);
   useEffect(function () {
+    var _props$watch, _props$watch2;
+
     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);
-    mapRef.current.setCenter([7.132122000552613, 50.716405378037706]);
-  }, [mapContext.mapIds, mapContext, props.mapId]);
+    /*
+    mapRef.current.on(
+      "move",
+      () => {
+        setCenter(mapRef.current.getCenter());
+      },
+      componentId.current
+    );
+    */
+
+    if (props !== null && props !== void 0 && (_props$watch = props.watch) !== null && _props$watch !== void 0 && _props$watch.viewport) {
+      setViewport(mapRef.current.wrapper.viewportState);
+      mapRef.current.wrapper.on("viewportchange", function () {
+        var _mapRef$current;
+
+        if (viewportRef.current !== ((_mapRef$current = mapRef.current) === null || _mapRef$current === void 0 ? void 0 : _mapRef$current.wrapper.viewportStateString)) {
+          var _mapRef$current2, _mapRef$current3, _mapRef$current3$wrap;
+
+          setViewport((_mapRef$current2 = mapRef.current) === null || _mapRef$current2 === void 0 ? void 0 : _mapRef$current2.wrapper.viewportState);
+          setCenter((_mapRef$current3 = mapRef.current) === null || _mapRef$current3 === void 0 ? void 0 : (_mapRef$current3$wrap = _mapRef$current3.wrapper.viewportState) === null || _mapRef$current3$wrap === void 0 ? void 0 : _mapRef$current3$wrap.center);
+        }
+      }, componentId.current);
+    }
+
+    if (props !== null && props !== void 0 && (_props$watch2 = props.watch) !== null && _props$watch2 !== void 0 && _props$watch2.layers) {
+      var _props$filter3, _props$filter4;
+
+      refreshLayerState();
+      mapRef.current.wrapper.on("layerchange", refreshLayerState, {
+        includeBaseLayers: props === null || props === void 0 ? void 0 : (_props$filter3 = props.filter) === null || _props$filter3 === void 0 ? void 0 : _props$filter3.includeBaseLayers,
+        matchLayerIds: props === null || props === void 0 ? void 0 : (_props$filter4 = props.filter) === null || _props$filter4 === void 0 ? void 0 : _props$filter4.matchLayerIds
+      }, componentId.current);
+    }
+  }, [mapContext.mapIds, mapContext, props.mapId, refreshLayerState]);
+  return {
+    layers: layers,
+    viewport: viewport
+  };
+}
+
+useMapState.defaultProps = {
+  mapId: undefined,
+  watch: {
+    layers: true,
+    sources: false,
+    viewport: false
+  },
+  filter: {
+    includeBaseLayers: false
+  }
+};
+useMapState.propTypes = {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  mapId: PropTypes.string,
+
+  /**
+   * Defines map Resources to watch
+   */
+  watch: PropTypes.shape({
+    layers: PropTypes.bool,
+    sources: PropTypes.bool,
+    viewport: PropTypes.bool
+  }),
+
+  /**
+   * Filter string or RegExp to more explicitly define the elements watched and increase performance
+   * strings will be matched using layerId.includes(matchString)
+   * RegExps will be matched using matchRegExp.test(layerId)
+   */
+  filter: PropTypes.shape({
+    includeBaseLayers: PropTypes.bool,
+    matchLayerIds: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)]),
+    matchSourceIds: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)])
+  })
+};
+
+function useMap(props) {
+  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+  var mapContext = useContext(MapContext);
+  var mapState = useMapState({
+    mapId: props.mapId,
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false
+    }
+  });
+  var initializedRef = useRef(false);
+  var mapRef = useRef(undefined);
+  var componentId = useRef(v4());
+
+  var _useState = useState(undefined),
+      _useState2 = _slicedToArray(_useState, 2),
+      mapIsReady = _useState2[0],
+      setMapIsReady = _useState2[1];
+
+  useEffect(function () {
+    var _componentId = componentId.current;
+    return function () {
+      if (mapRef.current) {
+        mapRef.current.cleanup(_componentId);
+        mapRef.current = undefined;
+      }
+
+      initializedRef.current = false;
+      setMapIsReady(false);
+    };
+  }, []);
+  useEffect(function () {
+    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return; //check if insertBeforeLayer exists
+
+    if (props.waitForLayer) {
+      var _mapState$layers;
+
+      var layerFound = false;
+      mapState === null || mapState === void 0 ? void 0 : (_mapState$layers = mapState.layers) === null || _mapState$layers === void 0 ? void 0 : _mapState$layers.forEach(function (layer) {
+        if (layer.id === props.waitForLayer) {
+          layerFound = true;
+        }
+      });
+
+      if (!layerFound) {
+        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);
+    setMapIsReady(true);
+  }, [mapContext.mapIds, mapState.layers, mapContext, props.mapId]);
+  return {
+    map: mapRef.current,
+    mapIsReady: mapIsReady,
+    componentId: componentId.current,
+    layers: mapState.layers
+  };
+}
+
+/**
+ * TODO: Add short & useful description
+ *
+ * @param {object} props
+ * @param {string} props.mapId Id of the target MapLibre instance in mapContext
+ *
+ * @component
+ */
+
+var MlComponentTemplate = function MlComponentTemplate(props) {
+  var mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer
+  });
+  var initializedRef = useRef(false);
+  useEffect(function () {
+    if (!mapHook.mapIsReady || initializedRef.current) return; // the MapLibre-gl instance (mapHook.map) is accessible here
+    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
+
+    initializedRef.current = true;
+    mapHook.map.setCenter([7.132122000552613, 50.716405378037706]);
+  }, [mapHook.map, props.mapId]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
 
@@ -1057,219 +1249,32 @@ MlFillExtrusionLayer.propTypes = {
   insertBeforeLayer: PropTypes.string
 };
 
-var nmMap = {
-  street: ["footway", "street", "road", "street_name", "residential", "path", "pedestrian", "road_reference", "road_reference_intl", "square", "place"],
-  number: ["house_number", "street_number"],
-  place: ["city", "village", "hamlet", "locality", "croft", "neighbourhood", "suburb", "city_district", "district", "quarter", "borough", "city_block", "residential", "commercial", "industrial", "houses", "subdivision", "allotments", "postal_city", "town", "municipality", "local_administrative_area"],
-  zip: ["postcode", "partial_postcode"],
-  state: ["state", "province", "state_code"]
-};
+var _showNextTransitionSegment = function _showNextTransitionSegment(props, layerId, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef) {
+  var _arguments = arguments;
 
-var nmConverter = function nmConverter(nmAddress) {
-  var addressArr = [];
+  if (typeof map.getSource(layerId) === "undefined" || !transitionInProgressRef.current) {
+    transitionTimeoutRef.current = setTimeout(function () {
+      return _showNextTransitionSegment.apply(void 0, _toConsumableArray(_arguments));
+    }, msPerStep);
+    return;
+  }
 
-  for (var key in nmMap) {
-    nmMap[key].some(function (element) {
-      if (nmAddress.hasOwnProperty(element)) {
-        addressArr.push(nmAddress[element]);
-        return true;
-      }
+  if (typeof transitionGeojsonDataRef.current[currentTransitionStepRef.current] !== "undefined") {
+    var _map$getSource;
 
-      return false;
-    });
-  }
+    var newData = currentTransitionStepRef.current + 1 === transitionGeojsonDataRef.current.length ? props.geojson : lineString([].concat(_toConsumableArray(transitionGeojsonCommonDataRef.current), _toConsumableArray(transitionGeojsonDataRef.current[currentTransitionStepRef.current].geometry.coordinates)));
 
-  return addressArr.join(", ");
-};
+    if (!(map !== null && map !== void 0 && (_map$getSource = map.getSource) !== null && _map$getSource !== void 0 && _map$getSource.call(map, layerId))) {
+      return;
+    }
 
-var toPixels = function toPixels(length) {
-  var conversionFactor = 96;
-  conversionFactor /= 25.4;
-  return conversionFactor * length + "px";
-};
+    map.getSource(layerId).setData(newData);
 
-var createPdf = function createPdf(map, locationValue, setLoading) {
-  setLoading(true);
-  var width = 210;
-  var height = 297; // Calculate pixel ratio
+    if (typeof props.onTransitionFrame === "function") {
+      props.onTransitionFrame(newData);
+    }
 
-  var actualPixelRatio = window.devicePixelRatio; // Create map container
-
-  var hidden = document.createElement("div");
-  hidden.className = "hidden-map";
-  document.body.appendChild(hidden);
-  var container = document.createElement("div");
-  container.style.width = toPixels(width);
-  container.style.height = toPixels(height);
-  hidden.appendChild(container); //Render map
-
-  var renderMap = new maplibregl$1.Map({
-    container: container,
-    center: map.getCenter(),
-    zoom: map.getZoom(),
-    bearing: map.getBearing(),
-    pitch: map.getPitch(),
-    interactive: false,
-    preserveDrawingBuffer: true,
-    fadeDuration: 0,
-    attributionControl: false
-  });
-  var style = map.getStyle();
-
-  var _loop = function _loop(name) {
-    var src = style.sources[name];
-    Object.keys(src).forEach(function (key) {
-      //delete properties if value is undefined.
-      // for instance, raster-dem might has undefined value in "url" and "bounds"
-      if (!src[key]) {
-        delete src[key];
-      }
-    });
-  };
-
-  for (var name in style.sources) {
-    _loop(name);
-  }
-
-  renderMap.setStyle(style);
-  renderMap.once("idle", function () {
-    var _hidden$parentNode;
-
-    // TO DO: It is still under development
-    var pdf = new jsPDF({
-      orientation: "p",
-      unit: "mm",
-      compress: true
-    });
-    Object.defineProperty(window, "devicePixelRatio", {
-      get: function get() {
-        return 300 / 96;
-      }
-    });
-    var offsetX = 2.5;
-    var offsetY = 2.5;
-    var marginTop = 3;
-    var marginBottom = 3;
-    var innerMargin = 2;
-    var logo = "data:image/png;base64,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";
-    var textBuffer = 1;
-    var lineHeight = 3.25;
-    var text = locationValue ? nmConverter(locationValue.address) : "";
-    var textChunksSeperator = text.split(",");
-    var textChunks = [];
-
-    if (textChunks.length) {
-      textChunksSeperator.forEach(function (chunk) {
-        var limitChunks = chunk.match(/.{1,34}/g);
-        textChunks.push.apply(textChunks, _toConsumableArray(limitChunks));
-      });
-    } //Render map image
-
-
-    pdf.addImage(renderMap.getCanvas().toDataURL("image/png"), "png", 0, 0, 210, 297, null, "FAST"); //Render lower left Copyright box
-
-    pdf.setFillColor("white");
-    pdf.rect(138, 287, 297, 10, "F");
-    pdf.setFontSize(10); // optional
-
-    pdf.text("Datenquelle: © OpenStreetMap-Mitwirkende", 140, pdf.internal.pageSize.height - 3); //Render infobox
-
-    pdf.setFillColor("white");
-    var infoBoxSize = textChunks.length * lineHeight + marginTop + marginBottom + lineHeight * 2 + innerMargin * 2 + textBuffer;
-    pdf.rect(offsetX, 2, 66.5, infoBoxSize, "F");
-    pdf.setFontSize(10);
-    pdf.text("Karten PDF:", 6, offsetY + marginTop); //Render inner infobox
-
-    pdf.rect(6, 7, 60, textChunks.length * lineHeight + innerMargin * 2 + textBuffer);
-    pdf.setFontSize(10); //Write out address
-
-    textChunks.forEach(function (text, i) {
-      pdf.text(text.trim(), 8, 10 + i * 3.5 + innerMargin);
-    }); //Add WG Logo
-
-    pdf.addImage(logo, "png", 5, offsetY + marginTop + lineHeight * 2 + textChunks.length * 3 + innerMargin * 2, 3, 3, null, "FAST"); //Add WG Url
-
-    pdf.setFontSize(10);
-    pdf.text("wheregroup.com", 40, offsetY + marginTop + lineHeight * 2 + textChunks.length * lineHeight + innerMargin * 2 + textBuffer); //Set pdfs props
-
-    pdf.setProperties({
-      title: "Map export",
-      subject: "Map export",
-      creator: "WhereGroup GmbH",
-      author: "(c)WhereGroup GmbH, (c)OpenStreetMap"
-    });
-    pdf.save("Map.pdf");
-    renderMap.remove();
-    (_hidden$parentNode = hidden.parentNode) === null || _hidden$parentNode === void 0 ? void 0 : _hidden$parentNode.removeChild(hidden);
-    Object.defineProperty(window, "devicePixelRatio", {
-      get: function get() {
-        return actualPixelRatio;
-      }
-    });
-    setLoading(false);
-  });
-};
-
-/**
- * Renders a button that will create a PDF version of the current map view (dimensions adjusted to fit Din A4 Paper).
- *
- * @component
- */
-
-var MlCreatePdfButton = function MlCreatePdfButton(props) {
-  var mapContext = useContext(MapContext);
-  var initializedRef = useRef(false);
-  var mapRef = useRef(undefined);
-  useEffect(function () {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-    initializedRef.current = true;
-    mapRef.current = mapContext.getMap(props.mapId);
-  }, [mapContext.mapIds, mapContext, props.mapId]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
-    color: "primary",
-    variant: "contained",
-    onClick: function onClick() {
-      createPdf(mapRef.current, null, function () {});
-    }
-  }, /*#__PURE__*/React__default.createElement(PrinterIcon, null)));
-};
-
-MlCreatePdfButton.defaultProps = {
-  mapId: undefined
-};
-MlCreatePdfButton.propTypes = {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId: PropTypes.string
-};
-
-var _showNextTransitionSegment = function _showNextTransitionSegment(props, layerId, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef) {
-  var _arguments = arguments;
-
-  if (typeof map.getSource(layerId) === "undefined" || !transitionInProgressRef.current) {
-    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") {
-      props.onTransitionFrame(newData);
-    }
-
-    currentTransitionStepRef.current++;
+    currentTransitionStepRef.current++;
 
     if (transitionInProgressRef.current && currentTransitionStepRef.current < transitionGeojsonDataRef.current.length) {
       transitionTimeoutRef.current = setTimeout(function () {
@@ -1417,6 +1422,14 @@ var msPerStep = 50;
 var MlGeoJsonLayer = function MlGeoJsonLayer(props) {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
   var mapContext = useContext(MapContext);
+  var mapState = useMapState({
+    mapId: props.mapId,
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false
+    }
+  });
   var oldGeojsonRef = useRef(null);
   var mapRef = useRef(null);
   var initializedRef = useRef(false);
@@ -1442,11 +1455,17 @@ 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) {
@@ -1475,6 +1494,22 @@ var MlGeoJsonLayer = function MlGeoJsonLayer(props) {
     // initialize the layer and add it to the MapLibre-gl instance or do something else with it
 
     if (props.geojson) {
+      //check if insertBeforeLayer exists
+      if (props.insertBeforeLayer) {
+        var _mapState$layers;
+
+        var layerFound = false;
+        mapState === null || mapState === void 0 ? void 0 : (_mapState$layers = mapState.layers) === null || _mapState$layers === void 0 ? void 0 : _mapState$layers.forEach(function (layer) {
+          if (layer.id === props.insertBeforeLayer) {
+            layerFound = true;
+          }
+        });
+
+        if (!layerFound) {
+          return;
+        }
+      }
+
       initializedRef.current = true;
       var geojson = props.geojson;
 
@@ -1494,7 +1529,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") {
@@ -1514,7 +1550,7 @@ var MlGeoJsonLayer = function MlGeoJsonLayer(props) {
         oldGeojsonRef.current = props.geojson;
       }
     }
-  }, [mapContext.mapIds, mapContext, props, transitionToGeojson]);
+  }, [mapContext.mapIds, mapContext, props, transitionToGeojson, mapState.layers]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
 
@@ -1531,8 +1567,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
@@ -1585,42 +1630,31 @@ 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 mapContext = useContext(MapContext);
+  var mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer
+  });
   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);
-  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;
-      }
-    };
-  }, []);
+  var layerId = useRef(props.layerId || "MlImageMarkerLayer-" + mapHook.componentId);
   useEffect(function () {
-    if (!mapRef.current || mapRef.current && !mapContext.getMap(props.mapId).getLayer(layerId.current) || !props.options) return; // the MapLibre-gl instance (mapContext.map) is accessible here
+    if (!mapHook.mapIsReady || mapHook.map && !mapHook.map.getLayer(layerId.current) || !props.options) 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
 
     var key;
 
     if (props.options.layout) {
       for (key in props.options.layout) {
-        mapContext.getMap(props.mapId).setLayoutProperty(layerId.current, key, props.options.layout[key]);
+        mapHook.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
       }
     }
 
     if (props.options.paint) {
       for (key in props.options.paint) {
-        mapContext.getMap(props.mapId).setPaintProperty(layerId.current, key, props.options.paint[key]);
+        mapHook.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
       }
     }
-  }, [props.options, layerId.current, mapContext, props.mapId]);
+  }, [props.options, layerId.current, props.mapId]);
   var addLayer = useCallback(function () {
     var tmpOptions = _objectSpread2({
       id: layerId.current,
@@ -1628,66 +1662,416 @@ var MlImageMarkerLayer = function MlImageMarkerLayer(props) {
     }, props.options);
 
     tmpOptions.layout["icon-image"] = imageIdRef.current;
-    mapRef.current.addLayer(tmpOptions, props.insertBeforeLayer, componentId.current);
-  }, [props]);
+    mapHook.map.addLayer(tmpOptions, props.insertBeforeLayer, mapHook.componentId);
+  }, [props, mapHook.mapIsReady, mapHook.map]);
   useEffect(function () {
-    if (!props.options || !mapContext.mapExists(props.mapId) || layerInitializedRef.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
-
-    mapRef.current = mapContext.getMap(props.mapId);
+    if (!props.options || !mapHook.mapIsReady || layerInitializedRef.current) return;
     layerInitializedRef.current = true;
 
     if (props.imgSrc) {
-      mapRef.current.loadImage(props.imgSrc, function (error, image) {
+      mapHook.map.loadImage(props.imgSrc, function (error, image) {
         if (error) throw error;
-        mapRef.current.addImage(imageIdRef.current, image, componentId.current);
+        mapHook.map.addImage(imageIdRef.current, image, mapHook.componentId);
       });
     }
 
     addLayer();
-  }, [mapContext.mapIds, mapContext, props, addLayer]);
+  }, [mapHook.mapIsReady, mapHook.map, addLayer, props]);
   useEffect(function () {
-    if (!mapRef.current || mapRef.current && !mapContext.getMap(props.mapId).getLayer(layerId.current) || !props.options) {
+    if (!mapHook.mapIsReady || mapHook.map && !mapHook.map.getLayer(layerId.current) || !props.options) {
       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
-
+    }
 
-    mapRef.current.getSource(layerId.current).setData(props.options.source.data);
-  }, [props.options.source.data, mapContext, props]);
+    mapHook.map.getSource(layerId.current).setData(props.options.source.data);
+  }, [props.options.source.data, 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); }
+var marker = "b556faa3bc6829d2.png";
 
-function SvgRotateRight(props) {
-  return /*#__PURE__*/createElement("svg", _extends({
-    width: "39.675098mm",
-    height: "104.27064mm",
-    viewBox: "0 0 39.675098 104.27064"
-  }, props), /*#__PURE__*/createElement("g", {
-    transform: "translate(-86.019554,-58.032633)"
-  }, /*#__PURE__*/createElement("path", {
-    style: {
-      strokeWidth: 0.744756
-    },
-    d: "m 442.74023,219.33594 -117.62695,32.32422 54.71094,31.12304 c -21.99397,41.5931 -32.8507,84.88283 -38.33008,127.89649 -6.86182,50.94051 -5.95715,103.99765 20.23828,155.46484 5.97246,11.72776 13.65817,23.59773 24.38867,35.06641 2.6597,2.84073 5.65602,5.75455 9.12891,8.68164 0.87557,0.7378 1.85363,1.52609 2.95117,2.35547 0.29669,0.22563 0.63616,0.47742 1.02149,0.75586 l 0.58203,0.42578 34.57812,-15.12305 -0.33789,-0.2207 c -0.0265,-0.0151 -0.0842,-0.0587 -0.18359,-0.13086 -0.46723,-0.34885 -0.9819,-0.76796 -1.56055,-1.25 -2.29757,-1.91343 -4.46539,-4.04643 -6.64062,-6.33985 -8.80052,-9.27114 -15.30333,-19.4993 -20.83985,-30.13867 -24.42289,-46.90715 -24.77465,-97.03535 -18.58008,-146.68164 4.94388,-37.37493 13.65299,-74.4847 30.20508,-109.92969 l 58.6211,33.34766 z",
-    transform: "scale(0.26458333)"
-  })));
-}
+/**
+ * Adds a button that makes the map follow the users GPS position using
+ * navigator.geolocation.watchPosition if activated
+ *
+ * @param {object} props
+ * @param {string} props.mapId Id of the target MapLibre instance in mapContext
+ *
+ * @component
+ */
 
-var _g;
+var MlFollowGps = function MlFollowGps(props) {
+  var mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer
+  });
 
-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); }
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFollowed = _useState2[0],
+      setIsFollowed = _useState2[1];
 
-function SvgRotateLeft(props) {
-  return /*#__PURE__*/createElement("svg", _extends$1({
-    width: "39.675098mm",
-    height: "104.27064mm",
-    viewBox: "0 0 39.675098 104.27064"
-  }, props), _g || (_g = /*#__PURE__*/createElement("g", {
-    transform: "translate(-86.019554,-58.032633)"
-  }, /*#__PURE__*/createElement("path", {
+  var _useState3 = useState(undefined),
+      _useState4 = _slicedToArray(_useState3, 2),
+      geoJson = _useState4[0],
+      setGeoJson = _useState4[1];
+
+  var watchIdRef = useRef(undefined);
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      locationAccessDenied = _useState6[0],
+      setLocationAccessDenied = _useState6[1];
+
+  var _useState7 = useState(),
+      _useState8 = _slicedToArray(_useState7, 2),
+      accuracyGeoJson = _useState8[0],
+      setAccuracyGeoJson = _useState8[1];
+
+  useEffect(function () {
+    return function () {
+      if (watchIdRef.current) {
+        navigator.geolocation.clearWatch(watchIdRef.current);
+        watchIdRef.current = undefined;
+      }
+    };
+  }, []);
+  var getLocationSuccess = useCallback(function (pos) {
+    if (!mapHook.map) return;
+    mapHook.map.setCenter([pos.coords.longitude, pos.coords.latitude]);
+    var geoJsonPoint = point([pos.coords.longitude, pos.coords.latitude]);
+    setGeoJson(geoJsonPoint);
+    setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy / 1000));
+  }, [mapHook.map]);
+
+  var getLocationError = function getLocationError(err) {
+    console.log("Access of user location denied");
+    setLocationAccessDenied(true);
+  };
+
+  useEffect(function () {
+    if (!mapHook.map) return;
+
+    if (isFollowed) {
+      watchIdRef.current = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
+    } else {
+      navigator.geolocation.clearWatch(watchIdRef.current);
+    }
+  }, [isFollowed, getLocationSuccess]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFollowed && geoJson && /*#__PURE__*/React__default.createElement(MlGeoJsonLayer, {
+    geojson: accuracyGeoJson,
+    type: "fill",
+    paint: _objectSpread2({
+      "fill-color": "#ee7700",
+      "fill-opacity": 0.5
+    }, props.accuracyPaint),
+    insertBeforeLayer: "MlFollowGpsMarker"
+  }), isFollowed && geoJson && /*#__PURE__*/React__default.createElement(MlImageMarkerLayer, {
+    layerId: "MlFollowGpsMarker",
+    options: {
+      type: "symbol",
+      source: {
+        type: "geojson",
+        data: geoJson
+      },
+      layout: _objectSpread2({
+        "icon-size": 0.1,
+        "icon-offset": [0, -340]
+      }, props.markerLayout)
+    },
+    imgSrc: props.markerImage || marker
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    sx: _objectSpread2({
+      zIndex: 1002,
+      color: isFollowed ? props.onColor : props.offColor
+    }, props.style),
+    disabled: locationAccessDenied,
+    onClick: function onClick() {
+      setIsFollowed(!isFollowed);
+    }
+  }, " ", /*#__PURE__*/React__default.createElement(RoomIcon, {
+    sx: {
+      fontSize: props.style.fontSize
+    }
+  }), " "));
+};
+
+MlFollowGps.defaultProps = {
+  mapId: undefined,
+  style: {
+    minWidth: "30px",
+    minHeight: "30px",
+    width: "30px",
+    height: "30px",
+    backgroundColor: "#414141",
+    borderRadius: "23%",
+    margin: 0.15,
+    fontSize: "1.3em",
+    ":hover": {
+      backgroundColor: "#515151",
+      color: "#ececec"
+    }
+  },
+  onColor: "#ececec",
+  offColor: "#666"
+};
+MlFollowGps.propTypes = {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  mapId: PropTypes.string,
+
+  /**
+   * CSS style object that is applied to the button component
+   */
+  style: PropTypes.object,
+
+  /**
+   * Active button font color
+   */
+  onColor: PropTypes.string,
+
+  /**
+   * Inactive button font color
+   */
+  offColor: PropTypes.string,
+
+  /**
+   * Accuracy paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the accuracy circle.
+   * Use any available paint prop from layer type "fill".
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+   */
+  accuracyPaint: PropTypes.object,
+
+  /**
+   * Marker layout property object, that is passed to the MlImageMarkerLayer responsible for drawing the position marker.
+   * Use any available layout property from layer type "symbol".
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#symbol
+   */
+  markerLayout: PropTypes.object,
+
+  /**
+   * Replace the default marker image with a custom one.
+   */
+  markerImage: PropTypes.string
+};
+
+var nmMap = {
+  street: ["footway", "street", "road", "street_name", "residential", "path", "pedestrian", "road_reference", "road_reference_intl", "square", "place"],
+  number: ["house_number", "street_number"],
+  place: ["city", "village", "hamlet", "locality", "croft", "neighbourhood", "suburb", "city_district", "district", "quarter", "borough", "city_block", "residential", "commercial", "industrial", "houses", "subdivision", "allotments", "postal_city", "town", "municipality", "local_administrative_area"],
+  zip: ["postcode", "partial_postcode"],
+  state: ["state", "province", "state_code"]
+};
+
+var nmConverter = function nmConverter(nmAddress) {
+  var addressArr = [];
+
+  for (var key in nmMap) {
+    nmMap[key].some(function (element) {
+      if (nmAddress.hasOwnProperty(element)) {
+        addressArr.push(nmAddress[element]);
+        return true;
+      }
+
+      return false;
+    });
+  }
+
+  return addressArr.join(", ");
+};
+
+var toPixels = function toPixels(length) {
+  var conversionFactor = 96;
+  conversionFactor /= 25.4;
+  return conversionFactor * length + "px";
+};
+
+var createPdf = function createPdf(map, locationValue, setLoading) {
+  setLoading(true);
+  var width = 210;
+  var height = 297; // Calculate pixel ratio
+
+  var actualPixelRatio = window.devicePixelRatio; // Create map container
+
+  var hidden = document.createElement("div");
+  hidden.className = "hidden-map";
+  document.body.appendChild(hidden);
+  var container = document.createElement("div");
+  container.style.width = toPixels(width);
+  container.style.height = toPixels(height);
+  hidden.appendChild(container); //Render map
+
+  var renderMap = new maplibregl$1.Map({
+    container: container,
+    center: map.getCenter(),
+    zoom: map.getZoom(),
+    bearing: map.getBearing(),
+    pitch: map.getPitch(),
+    interactive: false,
+    preserveDrawingBuffer: true,
+    fadeDuration: 0,
+    attributionControl: false
+  });
+  var style = map.getStyle();
+
+  var _loop = function _loop(name) {
+    var src = style.sources[name];
+    Object.keys(src).forEach(function (key) {
+      //delete properties if value is undefined.
+      // for instance, raster-dem might has undefined value in "url" and "bounds"
+      if (!src[key]) {
+        delete src[key];
+      }
+    });
+  };
+
+  for (var name in style.sources) {
+    _loop(name);
+  }
+
+  renderMap.setStyle(style);
+  renderMap.once("idle", function () {
+    var _hidden$parentNode;
+
+    // TO DO: It is still under development
+    var pdf = new jsPDF({
+      orientation: "p",
+      unit: "mm",
+      compress: true
+    });
+    Object.defineProperty(window, "devicePixelRatio", {
+      get: function get() {
+        return 300 / 96;
+      }
+    });
+    var offsetX = 2.5;
+    var offsetY = 2.5;
+    var marginTop = 3;
+    var marginBottom = 3;
+    var innerMargin = 2;
+    var logo = "data:image/png;base64,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";
+    var textBuffer = 1;
+    var lineHeight = 3.25;
+    var text = locationValue ? nmConverter(locationValue.address) : "";
+    var textChunksSeperator = text.split(",");
+    var textChunks = [];
+
+    if (textChunks.length) {
+      textChunksSeperator.forEach(function (chunk) {
+        var limitChunks = chunk.match(/.{1,34}/g);
+        textChunks.push.apply(textChunks, _toConsumableArray(limitChunks));
+      });
+    } //Render map image
+
+
+    pdf.addImage(renderMap.getCanvas().toDataURL("image/png"), "png", 0, 0, 210, 297, null, "FAST"); //Render lower left Copyright box
+
+    pdf.setFillColor("white");
+    pdf.rect(138, 287, 297, 10, "F");
+    pdf.setFontSize(10); // optional
+
+    pdf.text("Datenquelle: © OpenStreetMap-Mitwirkende", 140, pdf.internal.pageSize.height - 3); //Render infobox
+
+    pdf.setFillColor("white");
+    var infoBoxSize = textChunks.length * lineHeight + marginTop + marginBottom + lineHeight * 2 + innerMargin * 2 + textBuffer;
+    pdf.rect(offsetX, 2, 66.5, infoBoxSize, "F");
+    pdf.setFontSize(10);
+    pdf.text("Karten PDF:", 6, offsetY + marginTop); //Render inner infobox
+
+    pdf.rect(6, 7, 60, textChunks.length * lineHeight + innerMargin * 2 + textBuffer);
+    pdf.setFontSize(10); //Write out address
+
+    textChunks.forEach(function (text, i) {
+      pdf.text(text.trim(), 8, 10 + i * 3.5 + innerMargin);
+    }); //Add WG Logo
+
+    pdf.addImage(logo, "png", 5, offsetY + marginTop + lineHeight * 2 + textChunks.length * 3 + innerMargin * 2, 3, 3, null, "FAST"); //Add WG Url
+
+    pdf.setFontSize(10);
+    pdf.text("wheregroup.com", 40, offsetY + marginTop + lineHeight * 2 + textChunks.length * lineHeight + innerMargin * 2 + textBuffer); //Set pdfs props
+
+    pdf.setProperties({
+      title: "Map export",
+      subject: "Map export",
+      creator: "WhereGroup GmbH",
+      author: "(c)WhereGroup GmbH, (c)OpenStreetMap"
+    });
+    pdf.save("Map.pdf");
+    renderMap.remove();
+    (_hidden$parentNode = hidden.parentNode) === null || _hidden$parentNode === void 0 ? void 0 : _hidden$parentNode.removeChild(hidden);
+    Object.defineProperty(window, "devicePixelRatio", {
+      get: function get() {
+        return actualPixelRatio;
+      }
+    });
+    setLoading(false);
+  });
+};
+
+/**
+ * Renders a button that will create a PDF version of the current map view (dimensions adjusted to fit Din A4 Paper).
+ *
+ * @component
+ */
+
+var MlCreatePdfButton = function MlCreatePdfButton(props) {
+  var mapContext = useContext(MapContext);
+  var initializedRef = useRef(false);
+  var mapRef = useRef(undefined);
+  useEffect(function () {
+    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
+    initializedRef.current = true;
+    mapRef.current = mapContext.getMap(props.mapId);
+  }, [mapContext.mapIds, mapContext, props.mapId]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
+    color: "primary",
+    variant: "contained",
+    onClick: function onClick() {
+      createPdf(mapRef.current, null, function () {});
+    }
+  }, /*#__PURE__*/React__default.createElement(PrinterIcon, null)));
+};
+
+MlCreatePdfButton.defaultProps = {
+  mapId: undefined
+};
+MlCreatePdfButton.propTypes = {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  mapId: PropTypes.string
+};
+
+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 SvgRotateRight(props) {
+  return /*#__PURE__*/createElement("svg", _extends({
+    width: "39.675098mm",
+    height: "104.27064mm",
+    viewBox: "0 0 39.675098 104.27064"
+  }, props), /*#__PURE__*/createElement("g", {
+    transform: "translate(-86.019554,-58.032633)"
+  }, /*#__PURE__*/createElement("path", {
+    style: {
+      strokeWidth: 0.744756
+    },
+    d: "m 442.74023,219.33594 -117.62695,32.32422 54.71094,31.12304 c -21.99397,41.5931 -32.8507,84.88283 -38.33008,127.89649 -6.86182,50.94051 -5.95715,103.99765 20.23828,155.46484 5.97246,11.72776 13.65817,23.59773 24.38867,35.06641 2.6597,2.84073 5.65602,5.75455 9.12891,8.68164 0.87557,0.7378 1.85363,1.52609 2.95117,2.35547 0.29669,0.22563 0.63616,0.47742 1.02149,0.75586 l 0.58203,0.42578 34.57812,-15.12305 -0.33789,-0.2207 c -0.0265,-0.0151 -0.0842,-0.0587 -0.18359,-0.13086 -0.46723,-0.34885 -0.9819,-0.76796 -1.56055,-1.25 -2.29757,-1.91343 -4.46539,-4.04643 -6.64062,-6.33985 -8.80052,-9.27114 -15.30333,-19.4993 -20.83985,-30.13867 -24.42289,-46.90715 -24.77465,-97.03535 -18.58008,-146.68164 4.94388,-37.37493 13.65299,-74.4847 30.20508,-109.92969 l 58.6211,33.34766 z",
+    transform: "scale(0.26458333)"
+  })));
+}
+
+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 SvgRotateLeft(props) {
+  return /*#__PURE__*/createElement("svg", _extends$1({
+    width: "39.675098mm",
+    height: "104.27064mm",
+    viewBox: "0 0 39.675098 104.27064"
+  }, props), _g || (_g = /*#__PURE__*/createElement("g", {
+    transform: "translate(-86.019554,-58.032633)"
+  }, /*#__PURE__*/createElement("path", {
     d: "m 94.572523,58.032633 31.122127,8.55245 -14.4756,8.234638 c 5.81924,11.004841 8.69175,22.458582 10.1415,33.839279 1.81552,13.47801 1.57616,27.51604 -5.35471,41.13341 -1.58021,3.10296 -3.61373,6.24356 -6.45284,9.27798 -0.70371,0.75161 -1.49649,1.52256 -2.41535,2.29702 -0.23167,0.19521 -0.49044,0.40378 -0.78083,0.62322 -0.0785,0.0597 -0.16832,0.12632 -0.27027,0.19999 l -0.154,0.11265 -9.148793,-4.00131 0.0894,-0.0584 c 0.007,-0.004 0.02228,-0.0155 0.04857,-0.0346 0.123621,-0.0923 0.259794,-0.20319 0.412895,-0.33073 0.607899,-0.50626 1.181468,-1.07062 1.756997,-1.67742 2.328481,-2.45299 4.049011,-5.15919 5.513881,-7.97419 6.46189,-12.41085 6.55496,-25.67394 4.91598,-38.80952 -1.30807,-9.888781 -3.61235,-19.707408 -7.99176,-29.085561 l -15.510171,8.823235 z"
   }))));
 }
@@ -1860,200 +2244,49 @@ var MlNavigationCompass = function MlNavigationCompass(props) {
         rest = 90 + rest;
       }
 
-      if (rest === 0) {
-        rest = 90;
-      }
-
-      (_mapRef$current5 = mapRef.current) === null || _mapRef$current5 === void 0 ? void 0 : _mapRef$current5.setBearing(Math.round(bearing - Math.abs(rest)));
-    }
-  })))));
-};
-
-MlNavigationCompass.propTypes = {
-  /**
-   * Component id prefix
-   */
-  idPrefix: PropTypes.string,
-
-  /**
-   * Style object to adjust css definitions of the component.
-   */
-  style: PropTypes.object,
-
-  /**
-   * Style object to adjust css definitions of the background.
-   */
-  backgroundStyle: PropTypes.object,
-
-  /**
-   * Style object to adjust css definitions of the compass needle.
-   */
-  needleStyle: PropTypes.object,
-
-  /**
-   * Style object to adjust css definitions of the rotate right button.
-   */
-  rotateRightStyle: PropTypes.object,
-
-  /**
-   * Style object to adjust css definitions of the rotate left button.
-   */
-  rotateLeftStyle: PropTypes.object
-};
-
-/**
- * Adds a button that makes the map follow the users GPS position using
- * navigator.geolocation.watchPosition if activated
- *
- * @param {object} props
- * @param {string} props.mapId Id of the target MapLibre instance in mapContext
- *
- * @component
- */
-
-var MlFollowGps = function MlFollowGps(props) {
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  var mapContext = useContext(MapContext);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFollowed = _useState2[0],
-      setIsFollowed = _useState2[1];
-
-  var _useState3 = useState(undefined),
-      _useState4 = _slicedToArray(_useState3, 2),
-      geoJson = _useState4[0],
-      setGeoJson = _useState4[1];
-
-  var watchIdRef = useRef(undefined);
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      locationAccessDenied = _useState6[0],
-      setLocationAccessDenied = _useState6[1];
-
-  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 () {
-      // 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;
-      }
-
-      if (watchIdRef.current) {
-        initializedRef.current = false;
-        navigator.geolocation.clearWatch(watchIdRef.current);
-        watchIdRef.current = undefined;
-      }
-    };
-  }, []);
-  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);
-    mapRef.current.setCenter([7.132122000552613, 50.716405378037706]);
-  }, [mapContext.mapIds, mapContext, props.mapId]);
-
-  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]));
-  };
-
-  var getLocationError = function getLocationError(err) {
-    console.log("Access of user location denied");
-    setLocationAccessDenied(true);
-  };
-
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFollowed && geoJson && /*#__PURE__*/React__default.createElement(MlGeoJsonLayer, {
-    geojson: geoJson,
-    type: "circle",
-    paint: {
-      "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
-    }
-  }), isFollowed && geoJson && /*#__PURE__*/React__default.createElement(MlImageMarkerLayer, {
-    options: {
-      type: "symbol",
-      source: {
-        type: "geojson",
-        data: geoJson
-      },
-      layout: {
-        "icon-size": 0.1,
-        "icon-offset": [0, -340]
-      }
-    },
-    imgSrc: "/assets/marker.png"
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    sx: _objectSpread2({
-      zIndex: 1002,
-      color: isFollowed ? "#bbb" : "#666"
-    }, props.style),
-    disabled: locationAccessDenied,
-    onClick: function onClick() {
-      if (isFollowed) {
-        navigator.geolocation.clearWatch(watchIdRef.current);
-      } else {
-        watchIdRef.current = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
-      }
-
-      setIsFollowed(!isFollowed);
-    }
-  }, " ", /*#__PURE__*/React__default.createElement(RoomIcon, {
-    sx: {}
-  }), " "));
-};
+      if (rest === 0) {
+        rest = 90;
+      }
 
-MlFollowGps.defaultProps = {
-  mapId: undefined,
-  style: {
-    minWidth: "30px",
-    minHeight: "30px",
-    width: "30px",
-    height: "30px",
-    backgroundColor: "#414141",
-    borderRadius: "23%",
-    margin: 0.15,
-    ":hover": {
-      backgroundColor: "#515151",
-      color: "#ececec"
+      (_mapRef$current5 = mapRef.current) === null || _mapRef$current5 === void 0 ? void 0 : _mapRef$current5.setBearing(Math.round(bearing - Math.abs(rest)));
     }
-  }
+  })))));
 };
-MlFollowGps.propTypes = {
+
+MlNavigationCompass.propTypes = {
   /**
-   * Id of the target MapLibre instance in mapContext
+   * Component id prefix
    */
-  mapId: PropTypes.string,
+  idPrefix: PropTypes.string,
 
   /**
-   * CSS style object that is applied to the button component
+   * Style object to adjust css definitions of the component.
+   */
+  style: PropTypes.object,
+
+  /**
+   * Style object to adjust css definitions of the background.
+   */
+  backgroundStyle: PropTypes.object,
+
+  /**
+   * Style object to adjust css definitions of the compass needle.
+   */
+  needleStyle: PropTypes.object,
+
+  /**
+   * Style object to adjust css definitions of the rotate right button.
    */
-  style: PropTypes.object
+  rotateRightStyle: PropTypes.object,
+
+  /**
+   * Style object to adjust css definitions of the rotate left button.
+   */
+  rotateLeftStyle: PropTypes.object
 };
 
+var _excluded$1 = ["color"];
+
 var MlNavigationTools = function MlNavigationTools(props) {
   var mapContext = useContext(MapContext);
   var initializedRef = useRef(false);
@@ -2070,21 +2303,22 @@ 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",
-    color: "#bbb",
+    minWidth: "20px",
+    minHeight: "20px",
+    width: mediaIsMobile ? "50px" : "30px",
+    height: mediaIsMobile ? "50px" : "30px",
     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"
-    }
+      backgroundColor: "#515151"
+    },
+    color: "#ececec"
   };
   useEffect(function () {
     var _componentId = componentId.current;
@@ -2164,8 +2398,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"
     }
@@ -2173,15 +2407,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
@@ -2191,15 +2425,22 @@ 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: _objectSpread2({}, function (_ref) {
+      var color = _ref.color,
+          rest = _objectWithoutProperties(_ref, _excluded$1);
+
+      return rest;
+    }(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
       },
@@ -2208,22 +2449,42 @@ var MlNavigationTools = function MlNavigationTools(props) {
       }
     }
   }, /*#__PURE__*/React__default.createElement(Button, {
-    sx: buttonStyle,
+    sx: _objectSpread2(_objectSpread2({}, buttonStyle), {}, {
+      color: "#ececec"
+    }),
     onClick: zoomIn
-  }, /*#__PURE__*/React__default.createElement(ControlPointIcon, null)), /*#__PURE__*/React__default.createElement(Button, {
-    sx: buttonStyle,
+  }, /*#__PURE__*/React__default.createElement(ControlPointIcon, {
+    sx: {
+      fontSize: mediaIsMobile ? "1.5em" : "1.2em"
+    }
+  })), /*#__PURE__*/React__default.createElement(Button, {
+    sx: _objectSpread2(_objectSpread2({}, buttonStyle), {}, {
+      color: "#ececec"
+    }),
     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) {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
   var mapContext = useContext(MapContext);
+  var mapState = useMapState({
+    mapId: props.mapId,
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false
+    }
+  });
   var layerInitializedRef = useRef(false);
   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 () {
@@ -2263,6 +2524,22 @@ var MlLayer = function MlLayer(props) {
   useEffect(function () {
     if (!mapContext.mapExists(props.mapId) || layerInitializedRef.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
+    //check if insertBeforeLayer exists
+
+    if (props.insertBeforeLayer) {
+      var _mapState$layers;
+
+      var layerFound = false;
+      mapState === null || mapState === void 0 ? void 0 : (_mapState$layers = mapState.layers) === null || _mapState$layers === void 0 ? void 0 : _mapState$layers.forEach(function (layer) {
+        if (layer.id === props.insertBeforeLayer) {
+          layerFound = true;
+        }
+      });
+
+      if (!layerFound) {
+        return;
+      }
+    }
 
     mapRef.current = mapContext.getMap(props.mapId);
 
@@ -2271,7 +2548,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)"
@@ -2280,7 +2557,7 @@ var MlLayer = function MlLayer(props) {
       layerPaintConfRef.current = JSON.stringify((_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.paint);
       layerLayoutConfRef.current = JSON.stringify((_props$options2 = props.options) === null || _props$options2 === void 0 ? void 0 : _props$options2.layout);
     }
-  }, [mapContext.mapIds, mapContext, props, layerId]);
+  }, [mapContext.mapIds, mapContext, props, mapState.layers]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
 
@@ -2537,7 +2814,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);
@@ -4143,7 +4420,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;
     }
 
@@ -4188,7 +4465,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);
@@ -4300,7 +4577,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;
     }
 
@@ -4333,7 +4610,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
     });
@@ -4399,6 +4676,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,
@@ -5039,6 +5329,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
@@ -5236,14 +5527,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", {
@@ -5258,14 +5555,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
@@ -5366,165 +5659,138 @@ GeoJsonProvider.propTypes = {
 };
 
 /**
- * React hook that allows subscribing to map state changes
+ * MlSpatialElevationProfile returns a Button that will add a standard OSM tile layer to the maplibre-gl instance.
  *
  * @component
  */
 
-function useMapState(props) {
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+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 mapRef = useRef(undefined);
-
-  var _useState = useState(undefined),
-      _useState2 = _slicedToArray(_useState, 2),
-      center = _useState2[0],
-      setCenter = _useState2[1];
-
-  var _useState3 = useState(undefined),
-      _useState4 = _slicedToArray(_useState3, 2),
-      viewport = _useState4[0],
-      setViewport = _useState4[1];
-
-  var viewportRef = useRef(undefined);
-
-  var _useState5 = useState(undefined),
-      _useState6 = _slicedToArray(_useState5, 2),
-      layers = _useState6[0],
-      setLayers = _useState6[1];
-
-  var layersRef = useRef(undefined); //const mapRef = useRef(props.map);
-
-  var componentId = useRef(v4());
-  /**
-   * returns the element if it matches the defined filter criteria
-   * to be used as filter function on the layers array
-   *
-   * @param {object} layer
-   */
-
-  var layerIdFilter = useCallback(function (layer) {
-    if (!props.filter.includeBaseLayers && layer.baseLayer) {
-      return false;
-    }
-
-    if (typeof props.filter.matchLayerIds !== "undefined") {
-      if (props.filter.matchLayerIds instanceof RegExp) {
-        return props.filter.matchLayerIds.test(layer.id);
-      } else {
-        return layer.id.includes(props.filter.matchLayerIds);
-      }
-    }
-
-    return true;
-  }, [props.filter]);
-  var refreshLayerState = useCallback(function () {
-    var _layerState = mapRef.current.wrapper.layerState.filter(layerIdFilter);
-
-    var _layerStateString = JSON.stringify(_layerState);
-
-    if (layersRef.current !== _layerStateString) {
-      layersRef.current = _layerStateString;
-      setLayers(_layerState);
-    }
-  }, [layerIdFilter]);
+  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 = undefined;
+        mapRef.current = null;
       }
-
-      initializedRef.current = false;
     };
   }, []);
   useEffect(function () {
-    var _props$watch, _props$watch2;
-
-    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
-
+    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
     initializedRef.current = true;
     mapRef.current = mapContext.getMap(props.mapId);
-    /*
-    mapRef.current.on(
-      "move",
-      () => {
-        setCenter(mapRef.current.getCenter());
-      },
-      componentId.current
-    );
-    */
+    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 (props !== null && props !== void 0 && (_props$watch = props.watch) !== null && _props$watch !== void 0 && _props$watch.viewport) {
-      setViewport(mapRef.current.wrapper.viewportState);
-      mapRef.current.wrapper.on("viewportchange", function () {
-        var _mapRef$current;
+    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)"]);
 
-        if (viewportRef.current !== ((_mapRef$current = mapRef.current) === null || _mapRef$current === void 0 ? void 0 : _mapRef$current.wrapper.viewportStateString)) {
-          var _mapRef$current2, _mapRef$current3, _mapRef$current3$wrap;
+    var lerp = function lerp(x, y, a) {
+      return x * (1 - a) + y * a;
+    };
 
-          setViewport((_mapRef$current2 = mapRef.current) === null || _mapRef$current2 === void 0 ? void 0 : _mapRef$current2.wrapper.viewportState);
-          setCenter((_mapRef$current3 = mapRef.current) === null || _mapRef$current3 === void 0 ? void 0 : (_mapRef$current3$wrap = _mapRef$current3.wrapper.viewportState) === null || _mapRef$current3$wrap === void 0 ? void 0 : _mapRef$current3$wrap.center);
+    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);
         }
-      }, componentId.current);
-    }
-
-    if (props !== null && props !== void 0 && (_props$watch2 = props.watch) !== null && _props$watch2 !== void 0 && _props$watch2.layers) {
-      var _props$filter, _props$filter2;
-
-      refreshLayerState();
-      mapRef.current.wrapper.on("layerchange", refreshLayerState, {
-        includeBaseLayers: props === null || props === void 0 ? void 0 : (_props$filter = props.filter) === null || _props$filter === void 0 ? void 0 : _props$filter.includeBaseLayers,
-        matchLayerIds: props === null || props === void 0 ? void 0 : (_props$filter2 = props.filter) === null || _props$filter2 === void 0 ? void 0 : _props$filter2.matchLayerIds
-      }, componentId.current);
-    }
-  }, [mapContext.mapIds, mapContext, props.mapId, refreshLayerState]);
-  return {
-    layers: layers,
-    viewport: viewport
-  };
-}
+      }
+    });
+    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);
+};
 
-useMapState.defaultProps = {
-  mapId: undefined,
-  watch: {
-    layers: true,
-    sources: false,
-    viewport: false
-  },
-  filter: {
-    includeBaseLayers: false
-  }
+MlSpatialElevationProfile.defaultProps = {
+  elevationFactor: 1
 };
-useMapState.propTypes = {
+MlSpatialElevationProfile.propTypes = {
   /**
    * Id of the target MapLibre instance in mapContext
    */
   mapId: PropTypes.string,
 
   /**
-   * Defines map Resources to watch
+   * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
    */
-  watch: PropTypes.shape({
-    layers: PropTypes.bool,
-    sources: PropTypes.bool,
-    viewport: PropTypes.bool
-  }),
+  idPrefix: PropTypes.string,
 
   /**
-   * Filter string or RegExp to more explicitly define the elements watched and increase performance
-   * strings will be matched using layerId.includes(matchString)
-   * RegExps will be matched using matchRegExp.test(layerId)
+   * Number describes the factor of the height of the elevation
    */
-  filter: PropTypes.shape({
-    includeBaseLayers: PropTypes.bool,
-    matchLayerIds: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)]),
-    matchSourceIds: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)])
-  })
+  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
 };
 
-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, MlFollowGps, MlGPXViewer, MlGeoJsonLayer, MlImageMarkerLayer, MlLayer, MlLayerMagnify, MlLayerSwipe, MlNavigationCompass, MlNavigationTools, MlOsmLayer, MlSpatialElevationProfile, MlVectorTileLayer, MlWmsLayer, useMap, useMapState };
 //# sourceMappingURL=index.esm.js.map