@mapcomponents/react-maplibre 0.1.11 → 0.1.15

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();
@@ -1057,191 +1039,167 @@ 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"]
-};
+/**
+ * React hook that allows subscribing to map state changes
+ *
+ * @component
+ */
 
-var nmConverter = function nmConverter(nmAddress) {
-  var addressArr = [];
+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);
 
-  for (var key in nmMap) {
-    nmMap[key].some(function (element) {
-      if (nmAddress.hasOwnProperty(element)) {
-        addressArr.push(nmAddress[element]);
-        return true;
-      }
+  var _useState = useState(undefined),
+      _useState2 = _slicedToArray(_useState, 2),
+      center = _useState2[0],
+      setCenter = _useState2[1];
 
-      return false;
-    });
-  }
+  var _useState3 = useState(undefined),
+      _useState4 = _slicedToArray(_useState3, 2),
+      viewport = _useState4[0],
+      setViewport = _useState4[1];
 
-  return addressArr.join(", ");
-};
+  var viewportRef = useRef(undefined);
 
-var toPixels = function toPixels(length) {
-  var conversionFactor = 96;
-  conversionFactor /= 25.4;
-  return conversionFactor * length + "px";
-};
+  var _useState5 = useState(undefined),
+      _useState6 = _slicedToArray(_useState5, 2),
+      layers = _useState6[0],
+      setLayers = _useState6[1];
 
-var createPdf = function createPdf(map, locationValue, setLoading) {
-  setLoading(true);
-  var width = 210;
-  var height = 297; // Calculate pixel ratio
+  var layersRef = useRef(undefined); //const mapRef = useRef(props.map);
 
-  var actualPixelRatio = window.devicePixelRatio; // Create map container
+  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 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 layerIdFilter = useCallback(function (layer) {
+    var _props$filter, _props$filter2;
 
-  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();
+    if (!(props !== null && props !== void 0 && (_props$filter = props.filter) !== null && _props$filter !== void 0 && _props$filter.includeBaseLayers) && layer.baseLayer) {
+      return false;
+    }
 
-  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];
+    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);
       }
-    });
-  };
+    }
 
-  for (var name in style.sources) {
-    _loop(name);
-  }
+    return true;
+  }, [props.filter]);
+  var refreshLayerState = useCallback(function () {
+    var _layerState = mapRef.current.wrapper.layerState.filter(layerIdFilter);
 
-  renderMap.setStyle(style);
-  renderMap.once("idle", function () {
-    var _hidden$parentNode;
+    var _layerStateString = JSON.stringify(_layerState);
 
-    // 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;
+    if (layersRef.current !== _layerStateString) {
+      layersRef.current = _layerStateString;
+      setLayers(_layerState);
+    }
+  }, [layerIdFilter]);
+  useEffect(function () {
+    var _componentId = componentId.current;
+    return function () {
+      if (mapRef.current) {
+        mapRef.current.cleanup(_componentId);
+        mapRef.current = undefined;
       }
-    });
-    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
 
+      initializedRef.current = false;
+    };
+  }, []);
+  useEffect(function () {
+    var _props$watch, _props$watch2;
 
-    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
+    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
 
-    pdf.text("Datenquelle: © OpenStreetMap-Mitwirkende", 140, pdf.internal.pageSize.height - 3); //Render infobox
+    initializedRef.current = true;
+    mapRef.current = mapContext.getMap(props.mapId);
+    /*
+    mapRef.current.on(
+      "move",
+      () => {
+        setCenter(mapRef.current.getCenter());
+      },
+      componentId.current
+    );
+    */
 
-    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
+    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;
 
-    pdf.rect(6, 7, 60, textChunks.length * lineHeight + innerMargin * 2 + textBuffer);
-    pdf.setFontSize(10); //Write out address
+        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;
 
-    textChunks.forEach(function (text, i) {
-      pdf.text(text.trim(), 8, 10 + i * 3.5 + innerMargin);
-    }); //Add WG Logo
+          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);
+    }
 
-    pdf.addImage(logo, "png", 5, offsetY + marginTop + lineHeight * 2 + textChunks.length * 3 + innerMargin * 2, 3, 3, null, "FAST"); //Add WG Url
+    if (props !== null && props !== void 0 && (_props$watch2 = props.watch) !== null && _props$watch2 !== void 0 && _props$watch2.layers) {
+      var _props$filter3, _props$filter4;
 
-    pdf.setFontSize(10);
-    pdf.text("wheregroup.com", 40, offsetY + marginTop + lineHeight * 2 + textChunks.length * lineHeight + innerMargin * 2 + textBuffer); //Set pdfs props
+      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
+  };
+}
 
-    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);
-  });
+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,
 
-/**
- * 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)));
-};
+  /**
+   * Defines map Resources to watch
+   */
+  watch: PropTypes.shape({
+    layers: PropTypes.bool,
+    sources: PropTypes.bool,
+    viewport: PropTypes.bool
+  }),
 
-MlCreatePdfButton.defaultProps = {
-  mapId: undefined
-};
-MlCreatePdfButton.propTypes = {
   /**
-   * Id of the target MapLibre instance in mapContext
+   * 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)
    */
-  mapId: PropTypes.string
+  filter: PropTypes.shape({
+    includeBaseLayers: PropTypes.bool,
+    matchLayerIds: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)]),
+    matchSourceIds: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(RegExp)])
+  })
 };
 
 var _showNextTransitionSegment = function _showNextTransitionSegment(props, layerId, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef) {
@@ -1417,6 +1375,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 +1408,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 +1447,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 +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") {
@@ -1514,7 +1503,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 +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
@@ -1584,43 +1582,100 @@ MlGeoJsonLayer.propTypes = {
   idSuffix: PropTypes.string
 };
 
-var MlImageMarkerLayer = function MlImageMarkerLayer(props) {
+function useMap(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 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 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 () {
-      // 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;
+        mapRef.current = undefined;
       }
+
+      initializedRef.current = false;
+      setMapIsReady(false);
     };
   }, []);
   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 (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
+    console.log("initialize useMap hook"); //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) {
+        console.log(layer.id + " " + props.waitForLayer);
+
+        if (layer.id === props.waitForLayer) {
+          layerFound = true;
+        }
+      });
+
+      if (!layerFound) {
+        return;
+      }
+    }
+
+    console.log("done initialize useMap hook"); // 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
+  };
+}
+
+var MlImageMarkerLayer = function MlImageMarkerLayer(props) {
+  var mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer
+  });
+  var layerInitializedRef = useRef(false);
+  var imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
+  var layerId = useRef(props.layerId || "MlImageMarkerLayer-" + mapHook.componentId);
+  useEffect(function () {
+    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,180 +1683,531 @@ 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); }
-
-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"
-  }))));
-}
-
-var _g$1;
-
-function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-
-function SvgNeedle(props) {
-  return /*#__PURE__*/createElement("svg", _extends$2({
-    width: "75.967445mm",
-    height: "234.71339mm",
-    viewBox: "0 0 75.967445 234.71339"
-  }, props), _g$1 || (_g$1 = /*#__PURE__*/createElement("g", {
-    transform: "translate(-76.705281,-29.77268)"
-  }, /*#__PURE__*/createElement("path", {
-    d: "m 114.68901,29.77268 37.98372,117.3567 H 76.705281 Z"
-  }), /*#__PURE__*/createElement("path", {
-    d: "m 114.68901,264.48608 37.98372,-117.3567 H 76.705281 Z"
-  }))));
-}
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
-var NeedleButton = _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e12lzm5x2"
-} : {
-  target: "e12lzm5x2",
-  label: "NeedleButton"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1204o9",
-  styles: "width:40%;display:flex;align-items:center;&:hover{cursor:pointer;}path{filter:drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.2));}&:hover path{filter:drop-shadow(0px 0px 13px rgba(255, 255, 255, 0.1));}path:nth-of-type(2){fill:#343434;}&:hover path:nth-of-type(2){fill:#434343;}path:nth-of-type(1){fill:#e90318;}&:hover path:nth-of-type(1){fill:#fb4052;}"
-} : {
-  name: "1204o9",
-  styles: "width:40%;display:flex;align-items:center;&:hover{cursor:pointer;}path{filter:drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.2));}&:hover path{filter:drop-shadow(0px 0px 13px rgba(255, 255, 255, 0.1));}path:nth-of-type(2){fill:#343434;}&:hover path:nth-of-type(2){fill:#434343;}path:nth-of-type(1){fill:#e90318;}&:hover path:nth-of-type(1){fill:#fb4052;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1sTmF2aWdhdGlvbkNvbXBhc3MuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYStCIiwiZmlsZSI6Ik1sTmF2aWdhdGlvbkNvbXBhc3MuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlU3RhdGUsIHVzZVJlZiwgdXNlRWZmZWN0LCB1c2VDb250ZXh0IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gXCJwcm9wLXR5cGVzXCI7XG5cbmltcG9ydCB7IE1hcENvbnRleHQgfSBmcm9tIFwiQG1hcGNvbXBvbmVudHMvcmVhY3QtY29yZVwiO1xuaW1wb3J0IHsgdjQgYXMgdXVpZHY0IH0gZnJvbSBcInV1aWRcIjtcblxuaW1wb3J0IHsgUmVhY3RDb21wb25lbnQgYXMgUm90YXRlUmlnaHRJY29uIH0gZnJvbSBcIi4vYXNzZXRzL3JvdGF0ZV9yaWdodC5zdmdcIjtcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIFJvdGF0ZUxlZnRJY29uIH0gZnJvbSBcIi4vYXNzZXRzL3JvdGF0ZV9sZWZ0LnN2Z1wiO1xuaW1wb3J0IHsgUmVhY3RDb21wb25lbnQgYXMgTmVlZGxlSWNvbiB9IGZyb20gXCIuL2Fzc2V0cy9uZWVkbGUuc3ZnXCI7XG5cbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuXG5jb25zdCBOZWVkbGVCdXR0b24gPSBzdHlsZWQuZGl2YFxuICB3aWR0aDogNDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuXG4gICY6aG92ZXIge1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgfVxuICBwYXRoIHtcbiAgICBmaWx0ZXI6IGRyb3Atc2hhZG93KDBweCAwcHggMTVweCByZ2JhKDAsIDAsIDAsIDAuMikpO1xuICB9XG4gICY6aG92ZXIgcGF0aCB7XG4gICAgZmlsdGVyOiBkcm9wLXNoYWRvdygwcHggMHB4IDEzcHggcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpKTtcbiAgfVxuICBwYXRoOm50aC1vZi10eXBlKDIpIHtcbiAgICBmaWxsOiAjMzQzNDM0O1xuICB9XG4gICY6aG92ZXIgcGF0aDpudGgtb2YtdHlwZSgyKSB7XG4gICAgZmlsbDogIzQzNDM0MztcbiAgfVxuICBwYXRoOm50aC1vZi10eXBlKDEpIHtcbiAgICBmaWxsOiAjZTkwMzE4O1xuICB9XG4gICY6aG92ZXIgcGF0aDpudGgtb2YtdHlwZSgxKSB7XG4gICAgZmlsbDogI2ZiNDA1MjtcbiAgfVxuYDtcbmNvbnN0IE5lZWRsZUNvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICBkaXNwbGF5OiBmbGV4O1xuICB6LWluZGV4OiAxMDAyO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgbWFyZ2luLWxlZnQ6IC0zMCU7XG4gIHBhdGg6bnRoLW9mLXR5cGUoMikge1xuICB9XG4gIHN2ZyBnIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtNzYuNzA1MywgLTI5Ljc3MjcpIHNjYWxlKDIsIDEpO1xuICB9XG4gIHN2ZyB7XG4gICAgei1pbmRleDogOTk5MDtcbiAgICBoZWlnaHQ6IDE1MHB4O1xuICAgIHdpZHRoOiAyMDBweDtcbiAgfVxuYDtcbmNvbnN0IFJvdGF0ZUJ1dHRvbiA9IHN0eWxlZC5kaXZgXG4gIHdpZHRoOiAzMCU7XG4gIG1hcmdpbi10b3A6IDE0cHg7XG4gIHotaW5kZXg6IDk5OTtcbiAgZGlzcGxheTogZmxleDtcblxuICBzdmc6aG92ZXIge1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgfVxuICBzdmc6aG92ZXIgcGF0aCB7XG4gICAgZmlsbDogI2VjZWNlYztcbiAgICBmaWx0ZXI6IGRyb3Atc2hhZG93KDBweCAwcHggNXB4IHJnYmEoMCwgMCwgMCwgMC4xKSk7XG4gIH1cbiAgcGF0aCB7XG4gICAgZmlsbDogI2JiYjtcbiAgfVxuICBzdmcge1xuICAgIHRyYW5zZm9ybTogc2NhbGUoMC42KTtcbiAgICB6LWluZGV4OiA5OTkwO1xuICAgIGhlaWdodDogMTcycHg7XG4gIH1cbmA7XG5cbi8qKlxuICogTmF2aWdhdGlvbiBjb21wb25lbnQgdGhhdCBkaXNwbGF5cyBhIGNvbXBhc3MgY29tcG9uZW50IHdoaWNoIGluZGljYXRlcyB0aGUgY3VycmVudCBvcmlhbnRhdGlvbiBvZiB0aGUgbWFwIGl0IGlzIHJlZ2lzdGVyZWQgZm9yIGFuZCBvZmZlcnMgY29udHJvbHMgdG8gdHVybiB0aGUgYmVhcmluZyA5MMKwIGxlZnQvcmlnaHQgb3IgcmVzZXQgbm9ydGggdG8gcG9pbnQgdXAuXG4gKlxuICogQWxsIHN0eWxlIHByb3BzIGFyZSBhcHBsaWVkIHVzaW5nIEBlbW90aW9uL2NzcyB0byBhbGxvdyBtb3JlIGNvbXBsZXggY3NzIHNlbGVjdG9ycy5cbiAqXG4gKiBAY29tcG9uZW50XG4gKi9cbmNvbnN0IE1sTmF2aWdhdGlvbkNvbXBhc3MgPSAocHJvcHMpID0+IHtcbiAgLy8gVXNlIGEgdXNlUmVmIGhvb2sgdG8gcmVmZXJlbmNlIHRoZSBsYXllciBvYmplY3QgdG8gYmUgYWJsZSB0byBhY2Nlc3MgaXQgbGF0ZXIgaW5zaWRlIHVzZUVmZmVjdCBob29rc1xuICBjb25zdCBtYXBDb250ZXh0ID0gdXNlQ29udGV4dChNYXBDb250ZXh0KTtcblxuICBjb25zdCBpbml0aWFsaXplZFJlZiA9IHVzZVJlZihmYWxzZSk7XG4gIGNvbnN0IG1hcFJlZiA9IHVzZVJlZih1bmRlZmluZWQpO1xuICBjb25zdCBjb21wb25lbnRJZCA9IHVzZVJlZigocHJvcHMuaWRQcmVmaXggPyBwcm9wcy5pZFByZWZpeCA6IFwiTWxOYXZpZ2F0aW9uQ29tcGFzcy1cIikgKyB1dWlkdjQoKSk7XG5cbiAgY29uc3QgW2JlYXJpbmcsIHNldEJlYXJpbmddID0gdXNlU3RhdGUoMCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBsZXQgX2NvbXBvbmVudElkID0gY29tcG9uZW50SWQuY3VycmVudDtcblxuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICAvLyBUaGlzIGlzIHRoZSBjbGVhbnVwIGZ1bmN0aW9uLCBpdCBpcyBjYWxsZWQgd2hlbiB0aGlzIHJlYWN0IGNvbXBvbmVudCBpcyByZW1vdmVkIGZyb20gcmVhY3QtZG9tXG5cbiAgICAgIGlmIChtYXBSZWYuY3VycmVudCkge1xuICAgICAgICBtYXBSZWYuY3VycmVudC5jbGVhbnVwKF9jb21wb25lbnRJZCk7XG4gICAgICAgIG1hcFJlZi5jdXJyZW50ID0gdW5kZWZpbmVkO1xuICAgICAgfVxuICAgICAgaW5pdGlhbGl6ZWRSZWYuY3VycmVudCA9IGZhbHNlO1xuICAgIH07XG4gIH0sIFtdKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmICghbWFwQ29udGV4dC5tYXBFeGlzdHMocHJvcHMubWFwSWQpIHx8IGluaXRpYWxpemVkUmVmLmN1cnJlbnQpIHJldHVybjtcbiAgICBpbml0aWFsaXplZFJlZi5jdXJyZW50ID0gdHJ1ZTtcbiAgICBtYXBSZWYuY3VycmVudCA9IG1hcENvbnRleHQuZ2V0TWFwKHByb3BzLm1hcElkKTtcblxuICAgIG1hcFJlZi5jdXJyZW50Lm9uKFxuICAgICAgXCJyb3RhdGVcIixcbiAgICAgIGZ1bmN0aW9uICgpIHtcbiAgICAgICAgc2V0QmVhcmluZyhNYXRoLnJvdW5kKG1hcFJlZi5jdXJyZW50LmdldEJlYXJpbmcoKSkpO1xuICAgICAgfSxcbiAgICAgIGNvbXBvbmVudElkLmN1cnJlbnRcbiAgICApO1xuICAgIHNldEJlYXJpbmcoTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudC5nZXRCZWFyaW5nKCkpKTtcbiAgfSwgW21hcENvbnRleHQubWFwSWRzLCBtYXBDb250ZXh0LCBwcm9wcy5tYXBJZF0pO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3NOYW1lPXtjc3Moe1xuICAgICAgICAgIHpJbmRleDogMTAwMCxcbiAgICAgICAgICB0b3A6IDAsXG4gICAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgICAuLi5wcm9wcy5zdHlsZSxcbiAgICAgICAgfSl9XG4gICAgICA+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzc05hbWU9e2Nzcyh7XG4gICAgICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICAgICAgYm9yZGVyOiBcIjEwcHggc29saWQgI2JjYmNiY1wiLFxuICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcIiM3MTcxNzFcIixcbiAgICAgICAgICAgIGJhY2tncm91bmQ6IFwicmFkaWFsLWdyYWRpZW50KCM3MTcxNzEsICM0MTQxNDEpXCIsXG4gICAgICAgICAgICBoZWlnaHQ6IFwiMjAwcHhcIixcbiAgICAgICAgICAgIHdpZHRoOiBcIjIwMHB4XCIsXG4gICAgICAgICAgICBib3JkZXJSYWRpdXM6IFwiNTAlXCIsXG4gICAgICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAgICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgICAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDAuMikgdHJhbnNsYXRlWCgtNDQ4cHgpIHRyYW5zbGF0ZVkoLTQ0OHB4KVwiLFxuICAgICAgICAgICAgLi4ucHJvcHMuYmFja2dyb3VuZFN0eWxlLFxuICAgICAgICAgIH0pfVxuICAgICAgICA+XG4gICAgICAgICAgPFJvdGF0ZUJ1dHRvbiBjbGFzc05hbWU9e2Nzcyh7IC4uLnByb3BzLnJvdGF0ZVJpZ2h0U3R5bGUgfSl9PlxuICAgICAgICAgICAgPFJvdGF0ZVJpZ2h0SWNvblxuICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgbGV0IGJlYXJpbmcgPSBNYXRoLnJvdW5kKG1hcFJlZi5jdXJyZW50Py5nZXRCZWFyaW5nKCkpO1xuICAgICAgICAgICAgICAgIGxldCByZXN0ID0gTWF0aC5yb3VuZChiZWFyaW5nICUgOTApO1xuICAgICAgICAgICAgICAgIGlmIChiZWFyaW5nID4gMCkge1xuICAgICAgICAgICAgICAgICAgcmVzdCA9IDkwIC0gcmVzdDtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgaWYgKHJlc3QgPT09IDApIHtcbiAgICAgICAgICAgICAgICAgIHJlc3QgPSA5MDtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgbWFwUmVmLmN1cnJlbnQ/LnNldEJlYXJpbmcoTWF0aC5yb3VuZChiZWFyaW5nICsgTWF0aC5hYnMocmVzdCkpKTtcbiAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgID48L1JvdGF0ZVJpZ2h0SWNvbj5cbiAgICAgICAgICA8L1JvdGF0ZUJ1dHRvbj5cbiAgICAgICAgICA8TmVlZGxlQnV0dG9uXG4gICAgICAgICAgICBjbGFzc05hbWU9e2Nzcyh7IC4uLnByb3BzLm5lZWRsZVN0eWxlIH0pfVxuICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICBtYXBSZWYuY3VycmVudD8uc2V0QmVhcmluZygwKTtcbiAgICAgICAgICAgIH19XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPE5lZWRsZUNvbnRhaW5lclxuICAgICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogXCJyb3RhdGUoXCIgKyBiZWFyaW5nICsgXCJkZWcpXCIsXG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxOZWVkbGVJY29uIC8+XG4gICAgICAgICAgICA8L05lZWRsZUNvbnRhaW5lcj5cbiAgICAgICAgICA8L05lZWRsZUJ1dHRvbj5cbiAgICAgICAgICA8Um90YXRlQnV0dG9uIGNsYXNzTmFtZT17Y3NzKHsgLi4ucHJvcHMucm90YXRlTGVmdFN0eWxlIH0pfT5cbiAgICAgICAgICAgIDxSb3RhdGVMZWZ0SWNvblxuICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgbGV0IGJlYXJpbmcgPSBNYXRoLnJvdW5kKG1hcFJlZi5jdXJyZW50Py5nZXRCZWFyaW5nKCkpO1xuICAgICAgICAgICAgICAgIGxldCByZXN0ID0gTWF0aC5yb3VuZChiZWFyaW5nICUgOTApO1xuICAgICAgICAgICAgICAgIGlmIChiZWFyaW5nIDwgMCkge1xuICAgICAgICAgICAgICAgICAgcmVzdCA9IDkwICsgcmVzdDtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgaWYgKHJlc3QgPT09IDApIHtcbiAgICAgICAgICAgICAgICAgIHJlc3QgPSA5MDtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgbWFwUmVmLmN1cnJlbnQ/LnNldEJlYXJpbmcoTWF0aC5yb3VuZChiZWFyaW5nIC0gTWF0aC5hYnMocmVzdCkpKTtcbiAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgID48L1JvdGF0ZUxlZnRJY29uPlxuICAgICAgICAgIDwvUm90YXRlQnV0dG9uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvPlxuICApO1xufTtcblxuTWxOYXZpZ2F0aW9uQ29tcGFzcy5wcm9wVHlwZXMgPSB7XG4gIC8qKlxuICAgKiBDb21wb25lbnQgaWQgcHJlZml4XG4gICAqL1xuICBpZFByZWZpeDogUHJvcFR5cGVzLnN0cmluZyxcbiAgLyoqXG4gICAqIFN0eWxlIG9iamVjdCB0byBhZGp1c3QgY3NzIGRlZmluaXRpb25zIG9mIHRoZSBjb21wb25lbnQuXG4gICAqL1xuICBzdHlsZTogUHJvcFR5cGVzLm9iamVjdCxcbiAgLyoqXG4gICAqIFN0eWxlIG9iamVjdCB0byBhZGp1c3QgY3NzIGRlZmluaXRpb25zIG9mIHRoZSBiYWNrZ3JvdW5kLlxuICAgKi9cbiAgYmFja2dyb3VuZFN0eWxlOiBQcm9wVHlwZXMub2JqZWN0LFxuICAvKipcbiAgICogU3R5bGUgb2JqZWN0IHRvIGFkanVzdCBjc3MgZGVmaW5pdGlvbnMgb2YgdGhlIGNvbXBhc3MgbmVlZGxlLlxuICAgKi9cbiAgbmVlZGxlU3R5bGU6IFByb3BUeXBlcy5vYmplY3QsXG4gIC8qKlxuICAgKiBTdHlsZSBvYmplY3QgdG8gYWRqdXN0IGNzcyBkZWZpbml0aW9ucyBvZiB0aGUgcm90YXRlIHJpZ2h0IGJ1dHRvbi5cbiAgICovXG4gIHJvdGF0ZVJpZ2h0U3R5bGU6IFByb3BUeXBlcy5vYmplY3QsXG4gIC8qKlxuICAgKiBTdHlsZSBvYmplY3QgdG8gYWRqdXN0IGNzcyBkZWZpbml0aW9ucyBvZiB0aGUgcm90YXRlIGxlZnQgYnV0dG9uLlxuICAgKi9cbiAgcm90YXRlTGVmdFN0eWxlOiBQcm9wVHlwZXMub2JqZWN0LFxufTtcblxuZXhwb3J0IGRlZmF1bHQgTWxOYXZpZ2F0aW9uQ29tcGFzcztcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-var NeedleContainer = _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e12lzm5x1"
-} : {
-  target: "e12lzm5x1",
-  label: "NeedleContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1m8y6tb",
-  styles: "pointer-events:none;display:flex;z-index:1002;position:absolute;align-items:center;margin-left:-30%;path:nth-of-type(2){}svg g{transform:translate(-76.7053, -29.7727) scale(2, 1);}svg{z-index:9990;height:150px;width:200px;}"
-} : {
-  name: "1m8y6tb",
-  styles: "pointer-events:none;display:flex;z-index:1002;position:absolute;align-items:center;margin-left:-30%;path:nth-of-type(2){}svg g{transform:translate(-76.7053, -29.7727) scale(2, 1);}svg{z-index:9990;height:150px;width:200px;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1sTmF2aWdhdGlvbkNvbXBhc3MuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NrQyIsImZpbGUiOiJNbE5hdmlnYXRpb25Db21wYXNzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlLCB1c2VSZWYsIHVzZUVmZmVjdCwgdXNlQ29udGV4dCB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tIFwicHJvcC10eXBlc1wiO1xuXG5pbXBvcnQgeyBNYXBDb250ZXh0IH0gZnJvbSBcIkBtYXBjb21wb25lbnRzL3JlYWN0LWNvcmVcIjtcbmltcG9ydCB7IHY0IGFzIHV1aWR2NCB9IGZyb20gXCJ1dWlkXCI7XG5cbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIFJvdGF0ZVJpZ2h0SWNvbiB9IGZyb20gXCIuL2Fzc2V0cy9yb3RhdGVfcmlnaHQuc3ZnXCI7XG5pbXBvcnQgeyBSZWFjdENvbXBvbmVudCBhcyBSb3RhdGVMZWZ0SWNvbiB9IGZyb20gXCIuL2Fzc2V0cy9yb3RhdGVfbGVmdC5zdmdcIjtcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIE5lZWRsZUljb24gfSBmcm9tIFwiLi9hc3NldHMvbmVlZGxlLnN2Z1wiO1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcblxuY29uc3QgTmVlZGxlQnV0dG9uID0gc3R5bGVkLmRpdmBcbiAgd2lkdGg6IDQwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAmOmhvdmVyIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gIH1cbiAgcGF0aCB7XG4gICAgZmlsdGVyOiBkcm9wLXNoYWRvdygwcHggMHB4IDE1cHggcmdiYSgwLCAwLCAwLCAwLjIpKTtcbiAgfVxuICAmOmhvdmVyIHBhdGgge1xuICAgIGZpbHRlcjogZHJvcC1zaGFkb3coMHB4IDBweCAxM3B4IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4xKSk7XG4gIH1cbiAgcGF0aDpudGgtb2YtdHlwZSgyKSB7XG4gICAgZmlsbDogIzM0MzQzNDtcbiAgfVxuICAmOmhvdmVyIHBhdGg6bnRoLW9mLXR5cGUoMikge1xuICAgIGZpbGw6ICM0MzQzNDM7XG4gIH1cbiAgcGF0aDpudGgtb2YtdHlwZSgxKSB7XG4gICAgZmlsbDogI2U5MDMxODtcbiAgfVxuICAmOmhvdmVyIHBhdGg6bnRoLW9mLXR5cGUoMSkge1xuICAgIGZpbGw6ICNmYjQwNTI7XG4gIH1cbmA7XG5jb25zdCBOZWVkbGVDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgZGlzcGxheTogZmxleDtcbiAgei1pbmRleDogMTAwMjtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuXG4gIG1hcmdpbi1sZWZ0OiAtMzAlO1xuICBwYXRoOm50aC1vZi10eXBlKDIpIHtcbiAgfVxuICBzdmcgZyB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTc2LjcwNTMsIC0yOS43NzI3KSBzY2FsZSgyLCAxKTtcbiAgfVxuICBzdmcge1xuICAgIHotaW5kZXg6IDk5OTA7XG4gICAgaGVpZ2h0OiAxNTBweDtcbiAgICB3aWR0aDogMjAwcHg7XG4gIH1cbmA7XG5jb25zdCBSb3RhdGVCdXR0b24gPSBzdHlsZWQuZGl2YFxuICB3aWR0aDogMzAlO1xuICBtYXJnaW4tdG9wOiAxNHB4O1xuICB6LWluZGV4OiA5OTk7XG4gIGRpc3BsYXk6IGZsZXg7XG5cbiAgc3ZnOmhvdmVyIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gIH1cbiAgc3ZnOmhvdmVyIHBhdGgge1xuICAgIGZpbGw6ICNlY2VjZWM7XG4gICAgZmlsdGVyOiBkcm9wLXNoYWRvdygwcHggMHB4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSkpO1xuICB9XG4gIHBhdGgge1xuICAgIGZpbGw6ICNiYmI7XG4gIH1cbiAgc3ZnIHtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDAuNik7XG4gICAgei1pbmRleDogOTk5MDtcbiAgICBoZWlnaHQ6IDE3MnB4O1xuICB9XG5gO1xuXG4vKipcbiAqIE5hdmlnYXRpb24gY29tcG9uZW50IHRoYXQgZGlzcGxheXMgYSBjb21wYXNzIGNvbXBvbmVudCB3aGljaCBpbmRpY2F0ZXMgdGhlIGN1cnJlbnQgb3JpYW50YXRpb24gb2YgdGhlIG1hcCBpdCBpcyByZWdpc3RlcmVkIGZvciBhbmQgb2ZmZXJzIGNvbnRyb2xzIHRvIHR1cm4gdGhlIGJlYXJpbmcgOTDCsCBsZWZ0L3JpZ2h0IG9yIHJlc2V0IG5vcnRoIHRvIHBvaW50IHVwLlxuICpcbiAqIEFsbCBzdHlsZSBwcm9wcyBhcmUgYXBwbGllZCB1c2luZyBAZW1vdGlvbi9jc3MgdG8gYWxsb3cgbW9yZSBjb21wbGV4IGNzcyBzZWxlY3RvcnMuXG4gKlxuICogQGNvbXBvbmVudFxuICovXG5jb25zdCBNbE5hdmlnYXRpb25Db21wYXNzID0gKHByb3BzKSA9PiB7XG4gIC8vIFVzZSBhIHVzZVJlZiBob29rIHRvIHJlZmVyZW5jZSB0aGUgbGF5ZXIgb2JqZWN0IHRvIGJlIGFibGUgdG8gYWNjZXNzIGl0IGxhdGVyIGluc2lkZSB1c2VFZmZlY3QgaG9va3NcbiAgY29uc3QgbWFwQ29udGV4dCA9IHVzZUNvbnRleHQoTWFwQ29udGV4dCk7XG5cbiAgY29uc3QgaW5pdGlhbGl6ZWRSZWYgPSB1c2VSZWYoZmFsc2UpO1xuICBjb25zdCBtYXBSZWYgPSB1c2VSZWYodW5kZWZpbmVkKTtcbiAgY29uc3QgY29tcG9uZW50SWQgPSB1c2VSZWYoKHByb3BzLmlkUHJlZml4ID8gcHJvcHMuaWRQcmVmaXggOiBcIk1sTmF2aWdhdGlvbkNvbXBhc3MtXCIpICsgdXVpZHY0KCkpO1xuXG4gIGNvbnN0IFtiZWFyaW5nLCBzZXRCZWFyaW5nXSA9IHVzZVN0YXRlKDApO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgbGV0IF9jb21wb25lbnRJZCA9IGNvbXBvbmVudElkLmN1cnJlbnQ7XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgLy8gVGhpcyBpcyB0aGUgY2xlYW51cCBmdW5jdGlvbiwgaXQgaXMgY2FsbGVkIHdoZW4gdGhpcyByZWFjdCBjb21wb25lbnQgaXMgcmVtb3ZlZCBmcm9tIHJlYWN0LWRvbVxuXG4gICAgICBpZiAobWFwUmVmLmN1cnJlbnQpIHtcbiAgICAgICAgbWFwUmVmLmN1cnJlbnQuY2xlYW51cChfY29tcG9uZW50SWQpO1xuICAgICAgICBtYXBSZWYuY3VycmVudCA9IHVuZGVmaW5lZDtcbiAgICAgIH1cbiAgICAgIGluaXRpYWxpemVkUmVmLmN1cnJlbnQgPSBmYWxzZTtcbiAgICB9O1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIW1hcENvbnRleHQubWFwRXhpc3RzKHByb3BzLm1hcElkKSB8fCBpbml0aWFsaXplZFJlZi5jdXJyZW50KSByZXR1cm47XG4gICAgaW5pdGlhbGl6ZWRSZWYuY3VycmVudCA9IHRydWU7XG4gICAgbWFwUmVmLmN1cnJlbnQgPSBtYXBDb250ZXh0LmdldE1hcChwcm9wcy5tYXBJZCk7XG5cbiAgICBtYXBSZWYuY3VycmVudC5vbihcbiAgICAgIFwicm90YXRlXCIsXG4gICAgICBmdW5jdGlvbiAoKSB7XG4gICAgICAgIHNldEJlYXJpbmcoTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudC5nZXRCZWFyaW5nKCkpKTtcbiAgICAgIH0sXG4gICAgICBjb21wb25lbnRJZC5jdXJyZW50XG4gICAgKTtcbiAgICBzZXRCZWFyaW5nKE1hdGgucm91bmQobWFwUmVmLmN1cnJlbnQuZ2V0QmVhcmluZygpKSk7XG4gIH0sIFttYXBDb250ZXh0Lm1hcElkcywgbWFwQ29udGV4dCwgcHJvcHMubWFwSWRdKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17Y3NzKHtcbiAgICAgICAgICB6SW5kZXg6IDEwMDAsXG4gICAgICAgICAgdG9wOiAwLFxuICAgICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgICAgLi4ucHJvcHMuc3R5bGUsXG4gICAgICAgIH0pfVxuICAgICAgPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3NOYW1lPXtjc3Moe1xuICAgICAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgICAgIGJvcmRlcjogXCIxMHB4IHNvbGlkICNiY2JjYmNcIixcbiAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogXCIjNzE3MTcxXCIsXG4gICAgICAgICAgICBiYWNrZ3JvdW5kOiBcInJhZGlhbC1ncmFkaWVudCgjNzE3MTcxLCAjNDE0MTQxKVwiLFxuICAgICAgICAgICAgaGVpZ2h0OiBcIjIwMHB4XCIsXG4gICAgICAgICAgICB3aWR0aDogXCIyMDBweFwiLFxuICAgICAgICAgICAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiLFxuICAgICAgICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICAgICAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICAgICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgwLjIpIHRyYW5zbGF0ZVgoLTQ0OHB4KSB0cmFuc2xhdGVZKC00NDhweClcIixcbiAgICAgICAgICAgIC4uLnByb3BzLmJhY2tncm91bmRTdHlsZSxcbiAgICAgICAgICB9KX1cbiAgICAgICAgPlxuICAgICAgICAgIDxSb3RhdGVCdXR0b24gY2xhc3NOYW1lPXtjc3MoeyAuLi5wcm9wcy5yb3RhdGVSaWdodFN0eWxlIH0pfT5cbiAgICAgICAgICAgIDxSb3RhdGVSaWdodEljb25cbiAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgIGxldCBiZWFyaW5nID0gTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudD8uZ2V0QmVhcmluZygpKTtcbiAgICAgICAgICAgICAgICBsZXQgcmVzdCA9IE1hdGgucm91bmQoYmVhcmluZyAlIDkwKTtcbiAgICAgICAgICAgICAgICBpZiAoYmVhcmluZyA+IDApIHtcbiAgICAgICAgICAgICAgICAgIHJlc3QgPSA5MCAtIHJlc3Q7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIGlmIChyZXN0ID09PSAwKSB7XG4gICAgICAgICAgICAgICAgICByZXN0ID0gOTA7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIG1hcFJlZi5jdXJyZW50Py5zZXRCZWFyaW5nKE1hdGgucm91bmQoYmVhcmluZyArIE1hdGguYWJzKHJlc3QpKSk7XG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+PC9Sb3RhdGVSaWdodEljb24+XG4gICAgICAgICAgPC9Sb3RhdGVCdXR0b24+XG4gICAgICAgICAgPE5lZWRsZUJ1dHRvblxuICAgICAgICAgICAgY2xhc3NOYW1lPXtjc3MoeyAuLi5wcm9wcy5uZWVkbGVTdHlsZSB9KX1cbiAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgICAgbWFwUmVmLmN1cnJlbnQ/LnNldEJlYXJpbmcoMCk7XG4gICAgICAgICAgICB9fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxOZWVkbGVDb250YWluZXJcbiAgICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm06IFwicm90YXRlKFwiICsgYmVhcmluZyArIFwiZGVnKVwiLFxuICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICA8TmVlZGxlSWNvbiAvPlxuICAgICAgICAgICAgPC9OZWVkbGVDb250YWluZXI+XG4gICAgICAgICAgPC9OZWVkbGVCdXR0b24+XG4gICAgICAgICAgPFJvdGF0ZUJ1dHRvbiBjbGFzc05hbWU9e2Nzcyh7IC4uLnByb3BzLnJvdGF0ZUxlZnRTdHlsZSB9KX0+XG4gICAgICAgICAgICA8Um90YXRlTGVmdEljb25cbiAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgIGxldCBiZWFyaW5nID0gTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudD8uZ2V0QmVhcmluZygpKTtcbiAgICAgICAgICAgICAgICBsZXQgcmVzdCA9IE1hdGgucm91bmQoYmVhcmluZyAlIDkwKTtcbiAgICAgICAgICAgICAgICBpZiAoYmVhcmluZyA8IDApIHtcbiAgICAgICAgICAgICAgICAgIHJlc3QgPSA5MCArIHJlc3Q7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIGlmIChyZXN0ID09PSAwKSB7XG4gICAgICAgICAgICAgICAgICByZXN0ID0gOTA7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIG1hcFJlZi5jdXJyZW50Py5zZXRCZWFyaW5nKE1hdGgucm91bmQoYmVhcmluZyAtIE1hdGguYWJzKHJlc3QpKSk7XG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+PC9Sb3RhdGVMZWZ0SWNvbj5cbiAgICAgICAgICA8L1JvdGF0ZUJ1dHRvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8Lz5cbiAgKTtcbn07XG5cbk1sTmF2aWdhdGlvbkNvbXBhc3MucHJvcFR5cGVzID0ge1xuICAvKipcbiAgICogQ29tcG9uZW50IGlkIHByZWZpeFxuICAgKi9cbiAgaWRQcmVmaXg6IFByb3BUeXBlcy5zdHJpbmcsXG4gIC8qKlxuICAgKiBTdHlsZSBvYmplY3QgdG8gYWRqdXN0IGNzcyBkZWZpbml0aW9ucyBvZiB0aGUgY29tcG9uZW50LlxuICAgKi9cbiAgc3R5bGU6IFByb3BUeXBlcy5vYmplY3QsXG4gIC8qKlxuICAgKiBTdHlsZSBvYmplY3QgdG8gYWRqdXN0IGNzcyBkZWZpbml0aW9ucyBvZiB0aGUgYmFja2dyb3VuZC5cbiAgICovXG4gIGJhY2tncm91bmRTdHlsZTogUHJvcFR5cGVzLm9iamVjdCxcbiAgLyoqXG4gICAqIFN0eWxlIG9iamVjdCB0byBhZGp1c3QgY3NzIGRlZmluaXRpb25zIG9mIHRoZSBjb21wYXNzIG5lZWRsZS5cbiAgICovXG4gIG5lZWRsZVN0eWxlOiBQcm9wVHlwZXMub2JqZWN0LFxuICAvKipcbiAgICogU3R5bGUgb2JqZWN0IHRvIGFkanVzdCBjc3MgZGVmaW5pdGlvbnMgb2YgdGhlIHJvdGF0ZSByaWdodCBidXR0b24uXG4gICAqL1xuICByb3RhdGVSaWdodFN0eWxlOiBQcm9wVHlwZXMub2JqZWN0LFxuICAvKipcbiAgICogU3R5bGUgb2JqZWN0IHRvIGFkanVzdCBjc3MgZGVmaW5pdGlvbnMgb2YgdGhlIHJvdGF0ZSBsZWZ0IGJ1dHRvbi5cbiAgICovXG4gIHJvdGF0ZUxlZnRTdHlsZTogUHJvcFR5cGVzLm9iamVjdCxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE1sTmF2aWdhdGlvbkNvbXBhc3M7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+var marker = "b556faa3bc6829d2.png";
 
-var RotateButton = _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e12lzm5x0"
-} : {
-  target: "e12lzm5x0",
-  label: "RotateButton"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1j4uu1m",
-  styles: "width:30%;margin-top:14px;z-index:999;display:flex;svg:hover{cursor:pointer;}svg:hover path{fill:#ececec;filter:drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));}path{fill:#bbb;}svg{transform:scale(0.6);z-index:9990;height:172px;}"
-} : {
-  name: "1j4uu1m",
-  styles: "width:30%;margin-top:14px;z-index:999;display:flex;svg:hover{cursor:pointer;}svg:hover path{fill:#ececec;filter:drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));}path{fill:#bbb;}svg{transform:scale(0.6);z-index:9990;height:172px;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1sTmF2aWdhdGlvbkNvbXBhc3MuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkQrQiIsImZpbGUiOiJNbE5hdmlnYXRpb25Db21wYXNzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlLCB1c2VSZWYsIHVzZUVmZmVjdCwgdXNlQ29udGV4dCB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tIFwicHJvcC10eXBlc1wiO1xuXG5pbXBvcnQgeyBNYXBDb250ZXh0IH0gZnJvbSBcIkBtYXBjb21wb25lbnRzL3JlYWN0LWNvcmVcIjtcbmltcG9ydCB7IHY0IGFzIHV1aWR2NCB9IGZyb20gXCJ1dWlkXCI7XG5cbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIFJvdGF0ZVJpZ2h0SWNvbiB9IGZyb20gXCIuL2Fzc2V0cy9yb3RhdGVfcmlnaHQuc3ZnXCI7XG5pbXBvcnQgeyBSZWFjdENvbXBvbmVudCBhcyBSb3RhdGVMZWZ0SWNvbiB9IGZyb20gXCIuL2Fzc2V0cy9yb3RhdGVfbGVmdC5zdmdcIjtcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIE5lZWRsZUljb24gfSBmcm9tIFwiLi9hc3NldHMvbmVlZGxlLnN2Z1wiO1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcblxuY29uc3QgTmVlZGxlQnV0dG9uID0gc3R5bGVkLmRpdmBcbiAgd2lkdGg6IDQwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAmOmhvdmVyIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gIH1cbiAgcGF0aCB7XG4gICAgZmlsdGVyOiBkcm9wLXNoYWRvdygwcHggMHB4IDE1cHggcmdiYSgwLCAwLCAwLCAwLjIpKTtcbiAgfVxuICAmOmhvdmVyIHBhdGgge1xuICAgIGZpbHRlcjogZHJvcC1zaGFkb3coMHB4IDBweCAxM3B4IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4xKSk7XG4gIH1cbiAgcGF0aDpudGgtb2YtdHlwZSgyKSB7XG4gICAgZmlsbDogIzM0MzQzNDtcbiAgfVxuICAmOmhvdmVyIHBhdGg6bnRoLW9mLXR5cGUoMikge1xuICAgIGZpbGw6ICM0MzQzNDM7XG4gIH1cbiAgcGF0aDpudGgtb2YtdHlwZSgxKSB7XG4gICAgZmlsbDogI2U5MDMxODtcbiAgfVxuICAmOmhvdmVyIHBhdGg6bnRoLW9mLXR5cGUoMSkge1xuICAgIGZpbGw6ICNmYjQwNTI7XG4gIH1cbmA7XG5jb25zdCBOZWVkbGVDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgZGlzcGxheTogZmxleDtcbiAgei1pbmRleDogMTAwMjtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuXG4gIG1hcmdpbi1sZWZ0OiAtMzAlO1xuICBwYXRoOm50aC1vZi10eXBlKDIpIHtcbiAgfVxuICBzdmcgZyB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTc2LjcwNTMsIC0yOS43NzI3KSBzY2FsZSgyLCAxKTtcbiAgfVxuICBzdmcge1xuICAgIHotaW5kZXg6IDk5OTA7XG4gICAgaGVpZ2h0OiAxNTBweDtcbiAgICB3aWR0aDogMjAwcHg7XG4gIH1cbmA7XG5jb25zdCBSb3RhdGVCdXR0b24gPSBzdHlsZWQuZGl2YFxuICB3aWR0aDogMzAlO1xuICBtYXJnaW4tdG9wOiAxNHB4O1xuICB6LWluZGV4OiA5OTk7XG4gIGRpc3BsYXk6IGZsZXg7XG5cbiAgc3ZnOmhvdmVyIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gIH1cbiAgc3ZnOmhvdmVyIHBhdGgge1xuICAgIGZpbGw6ICNlY2VjZWM7XG4gICAgZmlsdGVyOiBkcm9wLXNoYWRvdygwcHggMHB4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSkpO1xuICB9XG4gIHBhdGgge1xuICAgIGZpbGw6ICNiYmI7XG4gIH1cbiAgc3ZnIHtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDAuNik7XG4gICAgei1pbmRleDogOTk5MDtcbiAgICBoZWlnaHQ6IDE3MnB4O1xuICB9XG5gO1xuXG4vKipcbiAqIE5hdmlnYXRpb24gY29tcG9uZW50IHRoYXQgZGlzcGxheXMgYSBjb21wYXNzIGNvbXBvbmVudCB3aGljaCBpbmRpY2F0ZXMgdGhlIGN1cnJlbnQgb3JpYW50YXRpb24gb2YgdGhlIG1hcCBpdCBpcyByZWdpc3RlcmVkIGZvciBhbmQgb2ZmZXJzIGNvbnRyb2xzIHRvIHR1cm4gdGhlIGJlYXJpbmcgOTDCsCBsZWZ0L3JpZ2h0IG9yIHJlc2V0IG5vcnRoIHRvIHBvaW50IHVwLlxuICpcbiAqIEFsbCBzdHlsZSBwcm9wcyBhcmUgYXBwbGllZCB1c2luZyBAZW1vdGlvbi9jc3MgdG8gYWxsb3cgbW9yZSBjb21wbGV4IGNzcyBzZWxlY3RvcnMuXG4gKlxuICogQGNvbXBvbmVudFxuICovXG5jb25zdCBNbE5hdmlnYXRpb25Db21wYXNzID0gKHByb3BzKSA9PiB7XG4gIC8vIFVzZSBhIHVzZVJlZiBob29rIHRvIHJlZmVyZW5jZSB0aGUgbGF5ZXIgb2JqZWN0IHRvIGJlIGFibGUgdG8gYWNjZXNzIGl0IGxhdGVyIGluc2lkZSB1c2VFZmZlY3QgaG9va3NcbiAgY29uc3QgbWFwQ29udGV4dCA9IHVzZUNvbnRleHQoTWFwQ29udGV4dCk7XG5cbiAgY29uc3QgaW5pdGlhbGl6ZWRSZWYgPSB1c2VSZWYoZmFsc2UpO1xuICBjb25zdCBtYXBSZWYgPSB1c2VSZWYodW5kZWZpbmVkKTtcbiAgY29uc3QgY29tcG9uZW50SWQgPSB1c2VSZWYoKHByb3BzLmlkUHJlZml4ID8gcHJvcHMuaWRQcmVmaXggOiBcIk1sTmF2aWdhdGlvbkNvbXBhc3MtXCIpICsgdXVpZHY0KCkpO1xuXG4gIGNvbnN0IFtiZWFyaW5nLCBzZXRCZWFyaW5nXSA9IHVzZVN0YXRlKDApO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgbGV0IF9jb21wb25lbnRJZCA9IGNvbXBvbmVudElkLmN1cnJlbnQ7XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgLy8gVGhpcyBpcyB0aGUgY2xlYW51cCBmdW5jdGlvbiwgaXQgaXMgY2FsbGVkIHdoZW4gdGhpcyByZWFjdCBjb21wb25lbnQgaXMgcmVtb3ZlZCBmcm9tIHJlYWN0LWRvbVxuXG4gICAgICBpZiAobWFwUmVmLmN1cnJlbnQpIHtcbiAgICAgICAgbWFwUmVmLmN1cnJlbnQuY2xlYW51cChfY29tcG9uZW50SWQpO1xuICAgICAgICBtYXBSZWYuY3VycmVudCA9IHVuZGVmaW5lZDtcbiAgICAgIH1cbiAgICAgIGluaXRpYWxpemVkUmVmLmN1cnJlbnQgPSBmYWxzZTtcbiAgICB9O1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIW1hcENvbnRleHQubWFwRXhpc3RzKHByb3BzLm1hcElkKSB8fCBpbml0aWFsaXplZFJlZi5jdXJyZW50KSByZXR1cm47XG4gICAgaW5pdGlhbGl6ZWRSZWYuY3VycmVudCA9IHRydWU7XG4gICAgbWFwUmVmLmN1cnJlbnQgPSBtYXBDb250ZXh0LmdldE1hcChwcm9wcy5tYXBJZCk7XG5cbiAgICBtYXBSZWYuY3VycmVudC5vbihcbiAgICAgIFwicm90YXRlXCIsXG4gICAgICBmdW5jdGlvbiAoKSB7XG4gICAgICAgIHNldEJlYXJpbmcoTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudC5nZXRCZWFyaW5nKCkpKTtcbiAgICAgIH0sXG4gICAgICBjb21wb25lbnRJZC5jdXJyZW50XG4gICAgKTtcbiAgICBzZXRCZWFyaW5nKE1hdGgucm91bmQobWFwUmVmLmN1cnJlbnQuZ2V0QmVhcmluZygpKSk7XG4gIH0sIFttYXBDb250ZXh0Lm1hcElkcywgbWFwQ29udGV4dCwgcHJvcHMubWFwSWRdKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17Y3NzKHtcbiAgICAgICAgICB6SW5kZXg6IDEwMDAsXG4gICAgICAgICAgdG9wOiAwLFxuICAgICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgICAgLi4ucHJvcHMuc3R5bGUsXG4gICAgICAgIH0pfVxuICAgICAgPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3NOYW1lPXtjc3Moe1xuICAgICAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgICAgIGJvcmRlcjogXCIxMHB4IHNvbGlkICNiY2JjYmNcIixcbiAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogXCIjNzE3MTcxXCIsXG4gICAgICAgICAgICBiYWNrZ3JvdW5kOiBcInJhZGlhbC1ncmFkaWVudCgjNzE3MTcxLCAjNDE0MTQxKVwiLFxuICAgICAgICAgICAgaGVpZ2h0OiBcIjIwMHB4XCIsXG4gICAgICAgICAgICB3aWR0aDogXCIyMDBweFwiLFxuICAgICAgICAgICAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiLFxuICAgICAgICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICAgICAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICAgICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgwLjIpIHRyYW5zbGF0ZVgoLTQ0OHB4KSB0cmFuc2xhdGVZKC00NDhweClcIixcbiAgICAgICAgICAgIC4uLnByb3BzLmJhY2tncm91bmRTdHlsZSxcbiAgICAgICAgICB9KX1cbiAgICAgICAgPlxuICAgICAgICAgIDxSb3RhdGVCdXR0b24gY2xhc3NOYW1lPXtjc3MoeyAuLi5wcm9wcy5yb3RhdGVSaWdodFN0eWxlIH0pfT5cbiAgICAgICAgICAgIDxSb3RhdGVSaWdodEljb25cbiAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgIGxldCBiZWFyaW5nID0gTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudD8uZ2V0QmVhcmluZygpKTtcbiAgICAgICAgICAgICAgICBsZXQgcmVzdCA9IE1hdGgucm91bmQoYmVhcmluZyAlIDkwKTtcbiAgICAgICAgICAgICAgICBpZiAoYmVhcmluZyA+IDApIHtcbiAgICAgICAgICAgICAgICAgIHJlc3QgPSA5MCAtIHJlc3Q7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIGlmIChyZXN0ID09PSAwKSB7XG4gICAgICAgICAgICAgICAgICByZXN0ID0gOTA7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIG1hcFJlZi5jdXJyZW50Py5zZXRCZWFyaW5nKE1hdGgucm91bmQoYmVhcmluZyArIE1hdGguYWJzKHJlc3QpKSk7XG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+PC9Sb3RhdGVSaWdodEljb24+XG4gICAgICAgICAgPC9Sb3RhdGVCdXR0b24+XG4gICAgICAgICAgPE5lZWRsZUJ1dHRvblxuICAgICAgICAgICAgY2xhc3NOYW1lPXtjc3MoeyAuLi5wcm9wcy5uZWVkbGVTdHlsZSB9KX1cbiAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgICAgbWFwUmVmLmN1cnJlbnQ/LnNldEJlYXJpbmcoMCk7XG4gICAgICAgICAgICB9fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxOZWVkbGVDb250YWluZXJcbiAgICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm06IFwicm90YXRlKFwiICsgYmVhcmluZyArIFwiZGVnKVwiLFxuICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICA8TmVlZGxlSWNvbiAvPlxuICAgICAgICAgICAgPC9OZWVkbGVDb250YWluZXI+XG4gICAgICAgICAgPC9OZWVkbGVCdXR0b24+XG4gICAgICAgICAgPFJvdGF0ZUJ1dHRvbiBjbGFzc05hbWU9e2Nzcyh7IC4uLnByb3BzLnJvdGF0ZUxlZnRTdHlsZSB9KX0+XG4gICAgICAgICAgICA8Um90YXRlTGVmdEljb25cbiAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgIGxldCBiZWFyaW5nID0gTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudD8uZ2V0QmVhcmluZygpKTtcbiAgICAgICAgICAgICAgICBsZXQgcmVzdCA9IE1hdGgucm91bmQoYmVhcmluZyAlIDkwKTtcbiAgICAgICAgICAgICAgICBpZiAoYmVhcmluZyA8IDApIHtcbiAgICAgICAgICAgICAgICAgIHJlc3QgPSA5MCArIHJlc3Q7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIGlmIChyZXN0ID09PSAwKSB7XG4gICAgICAgICAgICAgICAgICByZXN0ID0gOTA7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIG1hcFJlZi5jdXJyZW50Py5zZXRCZWFyaW5nKE1hdGgucm91bmQoYmVhcmluZyAtIE1hdGguYWJzKHJlc3QpKSk7XG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+PC9Sb3RhdGVMZWZ0SWNvbj5cbiAgICAgICAgICA8L1JvdGF0ZUJ1dHRvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8Lz5cbiAgKTtcbn07XG5cbk1sTmF2aWdhdGlvbkNvbXBhc3MucHJvcFR5cGVzID0ge1xuICAvKipcbiAgICogQ29tcG9uZW50IGlkIHByZWZpeFxuICAgKi9cbiAgaWRQcmVmaXg6IFByb3BUeXBlcy5zdHJpbmcsXG4gIC8qKlxuICAgKiBTdHlsZSBvYmplY3QgdG8gYWRqdXN0IGNzcyBkZWZpbml0aW9ucyBvZiB0aGUgY29tcG9uZW50LlxuICAgKi9cbiAgc3R5bGU6IFByb3BUeXBlcy5vYmplY3QsXG4gIC8qKlxuICAgKiBTdHlsZSBvYmplY3QgdG8gYWRqdXN0IGNzcyBkZWZpbml0aW9ucyBvZiB0aGUgYmFja2dyb3VuZC5cbiAgICovXG4gIGJhY2tncm91bmRTdHlsZTogUHJvcFR5cGVzLm9iamVjdCxcbiAgLyoqXG4gICAqIFN0eWxlIG9iamVjdCB0byBhZGp1c3QgY3NzIGRlZmluaXRpb25zIG9mIHRoZSBjb21wYXNzIG5lZWRsZS5cbiAgICovXG4gIG5lZWRsZVN0eWxlOiBQcm9wVHlwZXMub2JqZWN0LFxuICAvKipcbiAgICogU3R5bGUgb2JqZWN0IHRvIGFkanVzdCBjc3MgZGVmaW5pdGlvbnMgb2YgdGhlIHJvdGF0ZSByaWdodCBidXR0b24uXG4gICAqL1xuICByb3RhdGVSaWdodFN0eWxlOiBQcm9wVHlwZXMub2JqZWN0LFxuICAvKipcbiAgICogU3R5bGUgb2JqZWN0IHRvIGFkanVzdCBjc3MgZGVmaW5pdGlvbnMgb2YgdGhlIHJvdGF0ZSBsZWZ0IGJ1dHRvbi5cbiAgICovXG4gIHJvdGF0ZUxlZnRTdHlsZTogUHJvcFR5cGVzLm9iamVjdCxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE1sTmF2aWdhdGlvbkNvbXBhc3M7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
 /**
- * Navigation component that displays a compass component which indicates the current oriantation of the map it is registered for and offers controls to turn the bearing 90° left/right or reset north to point up.
+ * Adds a button that makes the map follow the users GPS position using
+ * navigator.geolocation.watchPosition if activated
  *
- * All style props are applied using @emotion/css to allow more complex css selectors.
+ * @param {object} props
+ * @param {string} props.mapId Id of the target MapLibre instance in mapContext
  *
  * @component
  */
 
-
-var MlNavigationCompass = function MlNavigationCompass(props) {
+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 : "MlNavigationCompass-") + v4());
+  var componentId = useRef((props.idPrefix ? props.idPrefix : "MlFollowGps-") + v4());
 
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      bearing = _useState2[0],
-      setBearing = _useState2[1];
+  var _useState7 = useState(),
+      _useState8 = _slicedToArray(_useState7, 2),
+      accuracyGeoJson = _useState8[0],
+      setAccuracyGeoJson = _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;
       }
 
-      initializedRef.current = false;
+      if (watchIdRef.current) {
+        initializedRef.current = false;
+        navigator.geolocation.clearWatch(watchIdRef.current);
+        watchIdRef.current = undefined;
+      }
     };
   }, []);
   useEffect(function () {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
+    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.on("rotate", function () {
-      setBearing(Math.round(mapRef.current.getBearing()));
-    }, componentId.current);
-    setBearing(Math.round(mapRef.current.getBearing()));
+    mapRef.current.setCenter([7.132122000552613, 50.716405378037706]);
   }, [mapContext.mapIds, mapContext, props.mapId]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: /*#__PURE__*/css(_objectSpread2({
-      zIndex: 1000,
-      top: 0,
+
+  var getLocationSuccess = function getLocationSuccess(pos) {
+    if (!mapRef.current) return;
+    mapRef.current.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));
+  };
+
+  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: accuracyGeoJson,
+    type: "fill",
+    paint: {
+      "fill-color": "#ee7700",
+      "fill-opacity": 0.5
+    },
+    insertBeforeLayer: "MlFollowGpsMarker"
+  }), isFollowed && geoJson && /*#__PURE__*/React__default.createElement(MlImageMarkerLayer, {
+    layerId: "MlFollowGpsMarker",
+    options: {
+      type: "symbol",
+      source: {
+        type: "geojson",
+        data: geoJson
+      },
+      layout: {
+        "icon-size": 0.1,
+        "icon-offset": [0, -340]
+      }
+    },
+    imgSrc: marker
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    sx: _objectSpread2({
+      zIndex: 1002,
+      color: isFollowed ? props.onColor : props.offColor
+    }, 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: {
+      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
+};
+
+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"
+  }))));
+}
+
+var _g$1;
+
+function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+
+function SvgNeedle(props) {
+  return /*#__PURE__*/createElement("svg", _extends$2({
+    width: "75.967445mm",
+    height: "234.71339mm",
+    viewBox: "0 0 75.967445 234.71339"
+  }, props), _g$1 || (_g$1 = /*#__PURE__*/createElement("g", {
+    transform: "translate(-76.705281,-29.77268)"
+  }, /*#__PURE__*/createElement("path", {
+    d: "m 114.68901,29.77268 37.98372,117.3567 H 76.705281 Z"
+  }), /*#__PURE__*/createElement("path", {
+    d: "m 114.68901,264.48608 37.98372,-117.3567 H 76.705281 Z"
+  }))));
+}
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var NeedleButton = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e12lzm5x2"
+} : {
+  target: "e12lzm5x2",
+  label: "NeedleButton"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1204o9",
+  styles: "width:40%;display:flex;align-items:center;&:hover{cursor:pointer;}path{filter:drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.2));}&:hover path{filter:drop-shadow(0px 0px 13px rgba(255, 255, 255, 0.1));}path:nth-of-type(2){fill:#343434;}&:hover path:nth-of-type(2){fill:#434343;}path:nth-of-type(1){fill:#e90318;}&:hover path:nth-of-type(1){fill:#fb4052;}"
+} : {
+  name: "1204o9",
+  styles: "width:40%;display:flex;align-items:center;&:hover{cursor:pointer;}path{filter:drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.2));}&:hover path{filter:drop-shadow(0px 0px 13px rgba(255, 255, 255, 0.1));}path:nth-of-type(2){fill:#343434;}&:hover path:nth-of-type(2){fill:#434343;}path:nth-of-type(1){fill:#e90318;}&:hover path:nth-of-type(1){fill:#fb4052;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1sTmF2aWdhdGlvbkNvbXBhc3MuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYStCIiwiZmlsZSI6Ik1sTmF2aWdhdGlvbkNvbXBhc3MuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlU3RhdGUsIHVzZVJlZiwgdXNlRWZmZWN0LCB1c2VDb250ZXh0IH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gXCJwcm9wLXR5cGVzXCI7XG5cbmltcG9ydCB7IE1hcENvbnRleHQgfSBmcm9tIFwiQG1hcGNvbXBvbmVudHMvcmVhY3QtY29yZVwiO1xuaW1wb3J0IHsgdjQgYXMgdXVpZHY0IH0gZnJvbSBcInV1aWRcIjtcblxuaW1wb3J0IHsgUmVhY3RDb21wb25lbnQgYXMgUm90YXRlUmlnaHRJY29uIH0gZnJvbSBcIi4vYXNzZXRzL3JvdGF0ZV9yaWdodC5zdmdcIjtcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIFJvdGF0ZUxlZnRJY29uIH0gZnJvbSBcIi4vYXNzZXRzL3JvdGF0ZV9sZWZ0LnN2Z1wiO1xuaW1wb3J0IHsgUmVhY3RDb21wb25lbnQgYXMgTmVlZGxlSWNvbiB9IGZyb20gXCIuL2Fzc2V0cy9uZWVkbGUuc3ZnXCI7XG5cbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuXG5jb25zdCBOZWVkbGVCdXR0b24gPSBzdHlsZWQuZGl2YFxuICB3aWR0aDogNDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuXG4gICY6aG92ZXIge1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgfVxuICBwYXRoIHtcbiAgICBmaWx0ZXI6IGRyb3Atc2hhZG93KDBweCAwcHggMTVweCByZ2JhKDAsIDAsIDAsIDAuMikpO1xuICB9XG4gICY6aG92ZXIgcGF0aCB7XG4gICAgZmlsdGVyOiBkcm9wLXNoYWRvdygwcHggMHB4IDEzcHggcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjEpKTtcbiAgfVxuICBwYXRoOm50aC1vZi10eXBlKDIpIHtcbiAgICBmaWxsOiAjMzQzNDM0O1xuICB9XG4gICY6aG92ZXIgcGF0aDpudGgtb2YtdHlwZSgyKSB7XG4gICAgZmlsbDogIzQzNDM0MztcbiAgfVxuICBwYXRoOm50aC1vZi10eXBlKDEpIHtcbiAgICBmaWxsOiAjZTkwMzE4O1xuICB9XG4gICY6aG92ZXIgcGF0aDpudGgtb2YtdHlwZSgxKSB7XG4gICAgZmlsbDogI2ZiNDA1MjtcbiAgfVxuYDtcbmNvbnN0IE5lZWRsZUNvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICBkaXNwbGF5OiBmbGV4O1xuICB6LWluZGV4OiAxMDAyO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgbWFyZ2luLWxlZnQ6IC0zMCU7XG4gIHBhdGg6bnRoLW9mLXR5cGUoMikge1xuICB9XG4gIHN2ZyBnIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtNzYuNzA1MywgLTI5Ljc3MjcpIHNjYWxlKDIsIDEpO1xuICB9XG4gIHN2ZyB7XG4gICAgei1pbmRleDogOTk5MDtcbiAgICBoZWlnaHQ6IDE1MHB4O1xuICAgIHdpZHRoOiAyMDBweDtcbiAgfVxuYDtcbmNvbnN0IFJvdGF0ZUJ1dHRvbiA9IHN0eWxlZC5kaXZgXG4gIHdpZHRoOiAzMCU7XG4gIG1hcmdpbi10b3A6IDE0cHg7XG4gIHotaW5kZXg6IDk5OTtcbiAgZGlzcGxheTogZmxleDtcblxuICBzdmc6aG92ZXIge1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgfVxuICBzdmc6aG92ZXIgcGF0aCB7XG4gICAgZmlsbDogI2VjZWNlYztcbiAgICBmaWx0ZXI6IGRyb3Atc2hhZG93KDBweCAwcHggNXB4IHJnYmEoMCwgMCwgMCwgMC4xKSk7XG4gIH1cbiAgcGF0aCB7XG4gICAgZmlsbDogI2JiYjtcbiAgfVxuICBzdmcge1xuICAgIHRyYW5zZm9ybTogc2NhbGUoMC42KTtcbiAgICB6LWluZGV4OiA5OTkwO1xuICAgIGhlaWdodDogMTcycHg7XG4gIH1cbmA7XG5cbi8qKlxuICogTmF2aWdhdGlvbiBjb21wb25lbnQgdGhhdCBkaXNwbGF5cyBhIGNvbXBhc3MgY29tcG9uZW50IHdoaWNoIGluZGljYXRlcyB0aGUgY3VycmVudCBvcmlhbnRhdGlvbiBvZiB0aGUgbWFwIGl0IGlzIHJlZ2lzdGVyZWQgZm9yIGFuZCBvZmZlcnMgY29udHJvbHMgdG8gdHVybiB0aGUgYmVhcmluZyA5MMKwIGxlZnQvcmlnaHQgb3IgcmVzZXQgbm9ydGggdG8gcG9pbnQgdXAuXG4gKlxuICogQWxsIHN0eWxlIHByb3BzIGFyZSBhcHBsaWVkIHVzaW5nIEBlbW90aW9uL2NzcyB0byBhbGxvdyBtb3JlIGNvbXBsZXggY3NzIHNlbGVjdG9ycy5cbiAqXG4gKiBAY29tcG9uZW50XG4gKi9cbmNvbnN0IE1sTmF2aWdhdGlvbkNvbXBhc3MgPSAocHJvcHMpID0+IHtcbiAgLy8gVXNlIGEgdXNlUmVmIGhvb2sgdG8gcmVmZXJlbmNlIHRoZSBsYXllciBvYmplY3QgdG8gYmUgYWJsZSB0byBhY2Nlc3MgaXQgbGF0ZXIgaW5zaWRlIHVzZUVmZmVjdCBob29rc1xuICBjb25zdCBtYXBDb250ZXh0ID0gdXNlQ29udGV4dChNYXBDb250ZXh0KTtcblxuICBjb25zdCBpbml0aWFsaXplZFJlZiA9IHVzZVJlZihmYWxzZSk7XG4gIGNvbnN0IG1hcFJlZiA9IHVzZVJlZih1bmRlZmluZWQpO1xuICBjb25zdCBjb21wb25lbnRJZCA9IHVzZVJlZigocHJvcHMuaWRQcmVmaXggPyBwcm9wcy5pZFByZWZpeCA6IFwiTWxOYXZpZ2F0aW9uQ29tcGFzcy1cIikgKyB1dWlkdjQoKSk7XG5cbiAgY29uc3QgW2JlYXJpbmcsIHNldEJlYXJpbmddID0gdXNlU3RhdGUoMCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBsZXQgX2NvbXBvbmVudElkID0gY29tcG9uZW50SWQuY3VycmVudDtcblxuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICAvLyBUaGlzIGlzIHRoZSBjbGVhbnVwIGZ1bmN0aW9uLCBpdCBpcyBjYWxsZWQgd2hlbiB0aGlzIHJlYWN0IGNvbXBvbmVudCBpcyByZW1vdmVkIGZyb20gcmVhY3QtZG9tXG5cbiAgICAgIGlmIChtYXBSZWYuY3VycmVudCkge1xuICAgICAgICBtYXBSZWYuY3VycmVudC5jbGVhbnVwKF9jb21wb25lbnRJZCk7XG4gICAgICAgIG1hcFJlZi5jdXJyZW50ID0gdW5kZWZpbmVkO1xuICAgICAgfVxuICAgICAgaW5pdGlhbGl6ZWRSZWYuY3VycmVudCA9IGZhbHNlO1xuICAgIH07XG4gIH0sIFtdKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmICghbWFwQ29udGV4dC5tYXBFeGlzdHMocHJvcHMubWFwSWQpIHx8IGluaXRpYWxpemVkUmVmLmN1cnJlbnQpIHJldHVybjtcbiAgICBpbml0aWFsaXplZFJlZi5jdXJyZW50ID0gdHJ1ZTtcbiAgICBtYXBSZWYuY3VycmVudCA9IG1hcENvbnRleHQuZ2V0TWFwKHByb3BzLm1hcElkKTtcblxuICAgIG1hcFJlZi5jdXJyZW50Lm9uKFxuICAgICAgXCJyb3RhdGVcIixcbiAgICAgIGZ1bmN0aW9uICgpIHtcbiAgICAgICAgc2V0QmVhcmluZyhNYXRoLnJvdW5kKG1hcFJlZi5jdXJyZW50LmdldEJlYXJpbmcoKSkpO1xuICAgICAgfSxcbiAgICAgIGNvbXBvbmVudElkLmN1cnJlbnRcbiAgICApO1xuICAgIHNldEJlYXJpbmcoTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudC5nZXRCZWFyaW5nKCkpKTtcbiAgfSwgW21hcENvbnRleHQubWFwSWRzLCBtYXBDb250ZXh0LCBwcm9wcy5tYXBJZF0pO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3NOYW1lPXtjc3Moe1xuICAgICAgICAgIHpJbmRleDogMTAwMCxcbiAgICAgICAgICB0b3A6IDAsXG4gICAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgICAuLi5wcm9wcy5zdHlsZSxcbiAgICAgICAgfSl9XG4gICAgICA+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzc05hbWU9e2Nzcyh7XG4gICAgICAgICAgICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICAgICAgICAgICAgYm9yZGVyOiBcIjEwcHggc29saWQgI2JjYmNiY1wiLFxuICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBcIiM3MTcxNzFcIixcbiAgICAgICAgICAgIGJhY2tncm91bmQ6IFwicmFkaWFsLWdyYWRpZW50KCM3MTcxNzEsICM0MTQxNDEpXCIsXG4gICAgICAgICAgICBoZWlnaHQ6IFwiMjAwcHhcIixcbiAgICAgICAgICAgIHdpZHRoOiBcIjIwMHB4XCIsXG4gICAgICAgICAgICBib3JkZXJSYWRpdXM6IFwiNTAlXCIsXG4gICAgICAgICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICAgICAgICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgICAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDAuMikgdHJhbnNsYXRlWCgtNDQ4cHgpIHRyYW5zbGF0ZVkoLTQ0OHB4KVwiLFxuICAgICAgICAgICAgLi4ucHJvcHMuYmFja2dyb3VuZFN0eWxlLFxuICAgICAgICAgIH0pfVxuICAgICAgICA+XG4gICAgICAgICAgPFJvdGF0ZUJ1dHRvbiBjbGFzc05hbWU9e2Nzcyh7IC4uLnByb3BzLnJvdGF0ZVJpZ2h0U3R5bGUgfSl9PlxuICAgICAgICAgICAgPFJvdGF0ZVJpZ2h0SWNvblxuICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgbGV0IGJlYXJpbmcgPSBNYXRoLnJvdW5kKG1hcFJlZi5jdXJyZW50Py5nZXRCZWFyaW5nKCkpO1xuICAgICAgICAgICAgICAgIGxldCByZXN0ID0gTWF0aC5yb3VuZChiZWFyaW5nICUgOTApO1xuICAgICAgICAgICAgICAgIGlmIChiZWFyaW5nID4gMCkge1xuICAgICAgICAgICAgICAgICAgcmVzdCA9IDkwIC0gcmVzdDtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgaWYgKHJlc3QgPT09IDApIHtcbiAgICAgICAgICAgICAgICAgIHJlc3QgPSA5MDtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgbWFwUmVmLmN1cnJlbnQ/LnNldEJlYXJpbmcoTWF0aC5yb3VuZChiZWFyaW5nICsgTWF0aC5hYnMocmVzdCkpKTtcbiAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgID48L1JvdGF0ZVJpZ2h0SWNvbj5cbiAgICAgICAgICA8L1JvdGF0ZUJ1dHRvbj5cbiAgICAgICAgICA8TmVlZGxlQnV0dG9uXG4gICAgICAgICAgICBjbGFzc05hbWU9e2Nzcyh7IC4uLnByb3BzLm5lZWRsZVN0eWxlIH0pfVxuICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICBtYXBSZWYuY3VycmVudD8uc2V0QmVhcmluZygwKTtcbiAgICAgICAgICAgIH19XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPE5lZWRsZUNvbnRhaW5lclxuICAgICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogXCJyb3RhdGUoXCIgKyBiZWFyaW5nICsgXCJkZWcpXCIsXG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxOZWVkbGVJY29uIC8+XG4gICAgICAgICAgICA8L05lZWRsZUNvbnRhaW5lcj5cbiAgICAgICAgICA8L05lZWRsZUJ1dHRvbj5cbiAgICAgICAgICA8Um90YXRlQnV0dG9uIGNsYXNzTmFtZT17Y3NzKHsgLi4ucHJvcHMucm90YXRlTGVmdFN0eWxlIH0pfT5cbiAgICAgICAgICAgIDxSb3RhdGVMZWZ0SWNvblxuICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgbGV0IGJlYXJpbmcgPSBNYXRoLnJvdW5kKG1hcFJlZi5jdXJyZW50Py5nZXRCZWFyaW5nKCkpO1xuICAgICAgICAgICAgICAgIGxldCByZXN0ID0gTWF0aC5yb3VuZChiZWFyaW5nICUgOTApO1xuICAgICAgICAgICAgICAgIGlmIChiZWFyaW5nIDwgMCkge1xuICAgICAgICAgICAgICAgICAgcmVzdCA9IDkwICsgcmVzdDtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgaWYgKHJlc3QgPT09IDApIHtcbiAgICAgICAgICAgICAgICAgIHJlc3QgPSA5MDtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgbWFwUmVmLmN1cnJlbnQ/LnNldEJlYXJpbmcoTWF0aC5yb3VuZChiZWFyaW5nIC0gTWF0aC5hYnMocmVzdCkpKTtcbiAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgID48L1JvdGF0ZUxlZnRJY29uPlxuICAgICAgICAgIDwvUm90YXRlQnV0dG9uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvPlxuICApO1xufTtcblxuTWxOYXZpZ2F0aW9uQ29tcGFzcy5wcm9wVHlwZXMgPSB7XG4gIC8qKlxuICAgKiBDb21wb25lbnQgaWQgcHJlZml4XG4gICAqL1xuICBpZFByZWZpeDogUHJvcFR5cGVzLnN0cmluZyxcbiAgLyoqXG4gICAqIFN0eWxlIG9iamVjdCB0byBhZGp1c3QgY3NzIGRlZmluaXRpb25zIG9mIHRoZSBjb21wb25lbnQuXG4gICAqL1xuICBzdHlsZTogUHJvcFR5cGVzLm9iamVjdCxcbiAgLyoqXG4gICAqIFN0eWxlIG9iamVjdCB0byBhZGp1c3QgY3NzIGRlZmluaXRpb25zIG9mIHRoZSBiYWNrZ3JvdW5kLlxuICAgKi9cbiAgYmFja2dyb3VuZFN0eWxlOiBQcm9wVHlwZXMub2JqZWN0LFxuICAvKipcbiAgICogU3R5bGUgb2JqZWN0IHRvIGFkanVzdCBjc3MgZGVmaW5pdGlvbnMgb2YgdGhlIGNvbXBhc3MgbmVlZGxlLlxuICAgKi9cbiAgbmVlZGxlU3R5bGU6IFByb3BUeXBlcy5vYmplY3QsXG4gIC8qKlxuICAgKiBTdHlsZSBvYmplY3QgdG8gYWRqdXN0IGNzcyBkZWZpbml0aW9ucyBvZiB0aGUgcm90YXRlIHJpZ2h0IGJ1dHRvbi5cbiAgICovXG4gIHJvdGF0ZVJpZ2h0U3R5bGU6IFByb3BUeXBlcy5vYmplY3QsXG4gIC8qKlxuICAgKiBTdHlsZSBvYmplY3QgdG8gYWRqdXN0IGNzcyBkZWZpbml0aW9ucyBvZiB0aGUgcm90YXRlIGxlZnQgYnV0dG9uLlxuICAgKi9cbiAgcm90YXRlTGVmdFN0eWxlOiBQcm9wVHlwZXMub2JqZWN0LFxufTtcblxuZXhwb3J0IGRlZmF1bHQgTWxOYXZpZ2F0aW9uQ29tcGFzcztcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+var NeedleContainer = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e12lzm5x1"
+} : {
+  target: "e12lzm5x1",
+  label: "NeedleContainer"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1m8y6tb",
+  styles: "pointer-events:none;display:flex;z-index:1002;position:absolute;align-items:center;margin-left:-30%;path:nth-of-type(2){}svg g{transform:translate(-76.7053, -29.7727) scale(2, 1);}svg{z-index:9990;height:150px;width:200px;}"
+} : {
+  name: "1m8y6tb",
+  styles: "pointer-events:none;display:flex;z-index:1002;position:absolute;align-items:center;margin-left:-30%;path:nth-of-type(2){}svg g{transform:translate(-76.7053, -29.7727) scale(2, 1);}svg{z-index:9990;height:150px;width:200px;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1sTmF2aWdhdGlvbkNvbXBhc3MuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0NrQyIsImZpbGUiOiJNbE5hdmlnYXRpb25Db21wYXNzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlLCB1c2VSZWYsIHVzZUVmZmVjdCwgdXNlQ29udGV4dCB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tIFwicHJvcC10eXBlc1wiO1xuXG5pbXBvcnQgeyBNYXBDb250ZXh0IH0gZnJvbSBcIkBtYXBjb21wb25lbnRzL3JlYWN0LWNvcmVcIjtcbmltcG9ydCB7IHY0IGFzIHV1aWR2NCB9IGZyb20gXCJ1dWlkXCI7XG5cbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIFJvdGF0ZVJpZ2h0SWNvbiB9IGZyb20gXCIuL2Fzc2V0cy9yb3RhdGVfcmlnaHQuc3ZnXCI7XG5pbXBvcnQgeyBSZWFjdENvbXBvbmVudCBhcyBSb3RhdGVMZWZ0SWNvbiB9IGZyb20gXCIuL2Fzc2V0cy9yb3RhdGVfbGVmdC5zdmdcIjtcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIE5lZWRsZUljb24gfSBmcm9tIFwiLi9hc3NldHMvbmVlZGxlLnN2Z1wiO1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcblxuY29uc3QgTmVlZGxlQnV0dG9uID0gc3R5bGVkLmRpdmBcbiAgd2lkdGg6IDQwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAmOmhvdmVyIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gIH1cbiAgcGF0aCB7XG4gICAgZmlsdGVyOiBkcm9wLXNoYWRvdygwcHggMHB4IDE1cHggcmdiYSgwLCAwLCAwLCAwLjIpKTtcbiAgfVxuICAmOmhvdmVyIHBhdGgge1xuICAgIGZpbHRlcjogZHJvcC1zaGFkb3coMHB4IDBweCAxM3B4IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4xKSk7XG4gIH1cbiAgcGF0aDpudGgtb2YtdHlwZSgyKSB7XG4gICAgZmlsbDogIzM0MzQzNDtcbiAgfVxuICAmOmhvdmVyIHBhdGg6bnRoLW9mLXR5cGUoMikge1xuICAgIGZpbGw6ICM0MzQzNDM7XG4gIH1cbiAgcGF0aDpudGgtb2YtdHlwZSgxKSB7XG4gICAgZmlsbDogI2U5MDMxODtcbiAgfVxuICAmOmhvdmVyIHBhdGg6bnRoLW9mLXR5cGUoMSkge1xuICAgIGZpbGw6ICNmYjQwNTI7XG4gIH1cbmA7XG5jb25zdCBOZWVkbGVDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgZGlzcGxheTogZmxleDtcbiAgei1pbmRleDogMTAwMjtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuXG4gIG1hcmdpbi1sZWZ0OiAtMzAlO1xuICBwYXRoOm50aC1vZi10eXBlKDIpIHtcbiAgfVxuICBzdmcgZyB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTc2LjcwNTMsIC0yOS43NzI3KSBzY2FsZSgyLCAxKTtcbiAgfVxuICBzdmcge1xuICAgIHotaW5kZXg6IDk5OTA7XG4gICAgaGVpZ2h0OiAxNTBweDtcbiAgICB3aWR0aDogMjAwcHg7XG4gIH1cbmA7XG5jb25zdCBSb3RhdGVCdXR0b24gPSBzdHlsZWQuZGl2YFxuICB3aWR0aDogMzAlO1xuICBtYXJnaW4tdG9wOiAxNHB4O1xuICB6LWluZGV4OiA5OTk7XG4gIGRpc3BsYXk6IGZsZXg7XG5cbiAgc3ZnOmhvdmVyIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gIH1cbiAgc3ZnOmhvdmVyIHBhdGgge1xuICAgIGZpbGw6ICNlY2VjZWM7XG4gICAgZmlsdGVyOiBkcm9wLXNoYWRvdygwcHggMHB4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSkpO1xuICB9XG4gIHBhdGgge1xuICAgIGZpbGw6ICNiYmI7XG4gIH1cbiAgc3ZnIHtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDAuNik7XG4gICAgei1pbmRleDogOTk5MDtcbiAgICBoZWlnaHQ6IDE3MnB4O1xuICB9XG5gO1xuXG4vKipcbiAqIE5hdmlnYXRpb24gY29tcG9uZW50IHRoYXQgZGlzcGxheXMgYSBjb21wYXNzIGNvbXBvbmVudCB3aGljaCBpbmRpY2F0ZXMgdGhlIGN1cnJlbnQgb3JpYW50YXRpb24gb2YgdGhlIG1hcCBpdCBpcyByZWdpc3RlcmVkIGZvciBhbmQgb2ZmZXJzIGNvbnRyb2xzIHRvIHR1cm4gdGhlIGJlYXJpbmcgOTDCsCBsZWZ0L3JpZ2h0IG9yIHJlc2V0IG5vcnRoIHRvIHBvaW50IHVwLlxuICpcbiAqIEFsbCBzdHlsZSBwcm9wcyBhcmUgYXBwbGllZCB1c2luZyBAZW1vdGlvbi9jc3MgdG8gYWxsb3cgbW9yZSBjb21wbGV4IGNzcyBzZWxlY3RvcnMuXG4gKlxuICogQGNvbXBvbmVudFxuICovXG5jb25zdCBNbE5hdmlnYXRpb25Db21wYXNzID0gKHByb3BzKSA9PiB7XG4gIC8vIFVzZSBhIHVzZVJlZiBob29rIHRvIHJlZmVyZW5jZSB0aGUgbGF5ZXIgb2JqZWN0IHRvIGJlIGFibGUgdG8gYWNjZXNzIGl0IGxhdGVyIGluc2lkZSB1c2VFZmZlY3QgaG9va3NcbiAgY29uc3QgbWFwQ29udGV4dCA9IHVzZUNvbnRleHQoTWFwQ29udGV4dCk7XG5cbiAgY29uc3QgaW5pdGlhbGl6ZWRSZWYgPSB1c2VSZWYoZmFsc2UpO1xuICBjb25zdCBtYXBSZWYgPSB1c2VSZWYodW5kZWZpbmVkKTtcbiAgY29uc3QgY29tcG9uZW50SWQgPSB1c2VSZWYoKHByb3BzLmlkUHJlZml4ID8gcHJvcHMuaWRQcmVmaXggOiBcIk1sTmF2aWdhdGlvbkNvbXBhc3MtXCIpICsgdXVpZHY0KCkpO1xuXG4gIGNvbnN0IFtiZWFyaW5nLCBzZXRCZWFyaW5nXSA9IHVzZVN0YXRlKDApO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgbGV0IF9jb21wb25lbnRJZCA9IGNvbXBvbmVudElkLmN1cnJlbnQ7XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgLy8gVGhpcyBpcyB0aGUgY2xlYW51cCBmdW5jdGlvbiwgaXQgaXMgY2FsbGVkIHdoZW4gdGhpcyByZWFjdCBjb21wb25lbnQgaXMgcmVtb3ZlZCBmcm9tIHJlYWN0LWRvbVxuXG4gICAgICBpZiAobWFwUmVmLmN1cnJlbnQpIHtcbiAgICAgICAgbWFwUmVmLmN1cnJlbnQuY2xlYW51cChfY29tcG9uZW50SWQpO1xuICAgICAgICBtYXBSZWYuY3VycmVudCA9IHVuZGVmaW5lZDtcbiAgICAgIH1cbiAgICAgIGluaXRpYWxpemVkUmVmLmN1cnJlbnQgPSBmYWxzZTtcbiAgICB9O1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIW1hcENvbnRleHQubWFwRXhpc3RzKHByb3BzLm1hcElkKSB8fCBpbml0aWFsaXplZFJlZi5jdXJyZW50KSByZXR1cm47XG4gICAgaW5pdGlhbGl6ZWRSZWYuY3VycmVudCA9IHRydWU7XG4gICAgbWFwUmVmLmN1cnJlbnQgPSBtYXBDb250ZXh0LmdldE1hcChwcm9wcy5tYXBJZCk7XG5cbiAgICBtYXBSZWYuY3VycmVudC5vbihcbiAgICAgIFwicm90YXRlXCIsXG4gICAgICBmdW5jdGlvbiAoKSB7XG4gICAgICAgIHNldEJlYXJpbmcoTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudC5nZXRCZWFyaW5nKCkpKTtcbiAgICAgIH0sXG4gICAgICBjb21wb25lbnRJZC5jdXJyZW50XG4gICAgKTtcbiAgICBzZXRCZWFyaW5nKE1hdGgucm91bmQobWFwUmVmLmN1cnJlbnQuZ2V0QmVhcmluZygpKSk7XG4gIH0sIFttYXBDb250ZXh0Lm1hcElkcywgbWFwQ29udGV4dCwgcHJvcHMubWFwSWRdKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17Y3NzKHtcbiAgICAgICAgICB6SW5kZXg6IDEwMDAsXG4gICAgICAgICAgdG9wOiAwLFxuICAgICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgICAgLi4ucHJvcHMuc3R5bGUsXG4gICAgICAgIH0pfVxuICAgICAgPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3NOYW1lPXtjc3Moe1xuICAgICAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgICAgIGJvcmRlcjogXCIxMHB4IHNvbGlkICNiY2JjYmNcIixcbiAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogXCIjNzE3MTcxXCIsXG4gICAgICAgICAgICBiYWNrZ3JvdW5kOiBcInJhZGlhbC1ncmFkaWVudCgjNzE3MTcxLCAjNDE0MTQxKVwiLFxuICAgICAgICAgICAgaGVpZ2h0OiBcIjIwMHB4XCIsXG4gICAgICAgICAgICB3aWR0aDogXCIyMDBweFwiLFxuICAgICAgICAgICAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiLFxuICAgICAgICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICAgICAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICAgICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgwLjIpIHRyYW5zbGF0ZVgoLTQ0OHB4KSB0cmFuc2xhdGVZKC00NDhweClcIixcbiAgICAgICAgICAgIC4uLnByb3BzLmJhY2tncm91bmRTdHlsZSxcbiAgICAgICAgICB9KX1cbiAgICAgICAgPlxuICAgICAgICAgIDxSb3RhdGVCdXR0b24gY2xhc3NOYW1lPXtjc3MoeyAuLi5wcm9wcy5yb3RhdGVSaWdodFN0eWxlIH0pfT5cbiAgICAgICAgICAgIDxSb3RhdGVSaWdodEljb25cbiAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgIGxldCBiZWFyaW5nID0gTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudD8uZ2V0QmVhcmluZygpKTtcbiAgICAgICAgICAgICAgICBsZXQgcmVzdCA9IE1hdGgucm91bmQoYmVhcmluZyAlIDkwKTtcbiAgICAgICAgICAgICAgICBpZiAoYmVhcmluZyA+IDApIHtcbiAgICAgICAgICAgICAgICAgIHJlc3QgPSA5MCAtIHJlc3Q7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIGlmIChyZXN0ID09PSAwKSB7XG4gICAgICAgICAgICAgICAgICByZXN0ID0gOTA7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIG1hcFJlZi5jdXJyZW50Py5zZXRCZWFyaW5nKE1hdGgucm91bmQoYmVhcmluZyArIE1hdGguYWJzKHJlc3QpKSk7XG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+PC9Sb3RhdGVSaWdodEljb24+XG4gICAgICAgICAgPC9Sb3RhdGVCdXR0b24+XG4gICAgICAgICAgPE5lZWRsZUJ1dHRvblxuICAgICAgICAgICAgY2xhc3NOYW1lPXtjc3MoeyAuLi5wcm9wcy5uZWVkbGVTdHlsZSB9KX1cbiAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgICAgbWFwUmVmLmN1cnJlbnQ/LnNldEJlYXJpbmcoMCk7XG4gICAgICAgICAgICB9fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxOZWVkbGVDb250YWluZXJcbiAgICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm06IFwicm90YXRlKFwiICsgYmVhcmluZyArIFwiZGVnKVwiLFxuICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICA8TmVlZGxlSWNvbiAvPlxuICAgICAgICAgICAgPC9OZWVkbGVDb250YWluZXI+XG4gICAgICAgICAgPC9OZWVkbGVCdXR0b24+XG4gICAgICAgICAgPFJvdGF0ZUJ1dHRvbiBjbGFzc05hbWU9e2Nzcyh7IC4uLnByb3BzLnJvdGF0ZUxlZnRTdHlsZSB9KX0+XG4gICAgICAgICAgICA8Um90YXRlTGVmdEljb25cbiAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgIGxldCBiZWFyaW5nID0gTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudD8uZ2V0QmVhcmluZygpKTtcbiAgICAgICAgICAgICAgICBsZXQgcmVzdCA9IE1hdGgucm91bmQoYmVhcmluZyAlIDkwKTtcbiAgICAgICAgICAgICAgICBpZiAoYmVhcmluZyA8IDApIHtcbiAgICAgICAgICAgICAgICAgIHJlc3QgPSA5MCArIHJlc3Q7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIGlmIChyZXN0ID09PSAwKSB7XG4gICAgICAgICAgICAgICAgICByZXN0ID0gOTA7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIG1hcFJlZi5jdXJyZW50Py5zZXRCZWFyaW5nKE1hdGgucm91bmQoYmVhcmluZyAtIE1hdGguYWJzKHJlc3QpKSk7XG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+PC9Sb3RhdGVMZWZ0SWNvbj5cbiAgICAgICAgICA8L1JvdGF0ZUJ1dHRvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8Lz5cbiAgKTtcbn07XG5cbk1sTmF2aWdhdGlvbkNvbXBhc3MucHJvcFR5cGVzID0ge1xuICAvKipcbiAgICogQ29tcG9uZW50IGlkIHByZWZpeFxuICAgKi9cbiAgaWRQcmVmaXg6IFByb3BUeXBlcy5zdHJpbmcsXG4gIC8qKlxuICAgKiBTdHlsZSBvYmplY3QgdG8gYWRqdXN0IGNzcyBkZWZpbml0aW9ucyBvZiB0aGUgY29tcG9uZW50LlxuICAgKi9cbiAgc3R5bGU6IFByb3BUeXBlcy5vYmplY3QsXG4gIC8qKlxuICAgKiBTdHlsZSBvYmplY3QgdG8gYWRqdXN0IGNzcyBkZWZpbml0aW9ucyBvZiB0aGUgYmFja2dyb3VuZC5cbiAgICovXG4gIGJhY2tncm91bmRTdHlsZTogUHJvcFR5cGVzLm9iamVjdCxcbiAgLyoqXG4gICAqIFN0eWxlIG9iamVjdCB0byBhZGp1c3QgY3NzIGRlZmluaXRpb25zIG9mIHRoZSBjb21wYXNzIG5lZWRsZS5cbiAgICovXG4gIG5lZWRsZVN0eWxlOiBQcm9wVHlwZXMub2JqZWN0LFxuICAvKipcbiAgICogU3R5bGUgb2JqZWN0IHRvIGFkanVzdCBjc3MgZGVmaW5pdGlvbnMgb2YgdGhlIHJvdGF0ZSByaWdodCBidXR0b24uXG4gICAqL1xuICByb3RhdGVSaWdodFN0eWxlOiBQcm9wVHlwZXMub2JqZWN0LFxuICAvKipcbiAgICogU3R5bGUgb2JqZWN0IHRvIGFkanVzdCBjc3MgZGVmaW5pdGlvbnMgb2YgdGhlIHJvdGF0ZSBsZWZ0IGJ1dHRvbi5cbiAgICovXG4gIHJvdGF0ZUxlZnRTdHlsZTogUHJvcFR5cGVzLm9iamVjdCxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE1sTmF2aWdhdGlvbkNvbXBhc3M7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+var RotateButton = _styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e12lzm5x0"
+} : {
+  target: "e12lzm5x0",
+  label: "RotateButton"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1j4uu1m",
+  styles: "width:30%;margin-top:14px;z-index:999;display:flex;svg:hover{cursor:pointer;}svg:hover path{fill:#ececec;filter:drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));}path{fill:#bbb;}svg{transform:scale(0.6);z-index:9990;height:172px;}"
+} : {
+  name: "1j4uu1m",
+  styles: "width:30%;margin-top:14px;z-index:999;display:flex;svg:hover{cursor:pointer;}svg:hover path{fill:#ececec;filter:drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));}path{fill:#bbb;}svg{transform:scale(0.6);z-index:9990;height:172px;}",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1sTmF2aWdhdGlvbkNvbXBhc3MuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkQrQiIsImZpbGUiOiJNbE5hdmlnYXRpb25Db21wYXNzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlLCB1c2VSZWYsIHVzZUVmZmVjdCwgdXNlQ29udGV4dCB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tIFwicHJvcC10eXBlc1wiO1xuXG5pbXBvcnQgeyBNYXBDb250ZXh0IH0gZnJvbSBcIkBtYXBjb21wb25lbnRzL3JlYWN0LWNvcmVcIjtcbmltcG9ydCB7IHY0IGFzIHV1aWR2NCB9IGZyb20gXCJ1dWlkXCI7XG5cbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIFJvdGF0ZVJpZ2h0SWNvbiB9IGZyb20gXCIuL2Fzc2V0cy9yb3RhdGVfcmlnaHQuc3ZnXCI7XG5pbXBvcnQgeyBSZWFjdENvbXBvbmVudCBhcyBSb3RhdGVMZWZ0SWNvbiB9IGZyb20gXCIuL2Fzc2V0cy9yb3RhdGVfbGVmdC5zdmdcIjtcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIE5lZWRsZUljb24gfSBmcm9tIFwiLi9hc3NldHMvbmVlZGxlLnN2Z1wiO1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcblxuY29uc3QgTmVlZGxlQnV0dG9uID0gc3R5bGVkLmRpdmBcbiAgd2lkdGg6IDQwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAmOmhvdmVyIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gIH1cbiAgcGF0aCB7XG4gICAgZmlsdGVyOiBkcm9wLXNoYWRvdygwcHggMHB4IDE1cHggcmdiYSgwLCAwLCAwLCAwLjIpKTtcbiAgfVxuICAmOmhvdmVyIHBhdGgge1xuICAgIGZpbHRlcjogZHJvcC1zaGFkb3coMHB4IDBweCAxM3B4IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4xKSk7XG4gIH1cbiAgcGF0aDpudGgtb2YtdHlwZSgyKSB7XG4gICAgZmlsbDogIzM0MzQzNDtcbiAgfVxuICAmOmhvdmVyIHBhdGg6bnRoLW9mLXR5cGUoMikge1xuICAgIGZpbGw6ICM0MzQzNDM7XG4gIH1cbiAgcGF0aDpudGgtb2YtdHlwZSgxKSB7XG4gICAgZmlsbDogI2U5MDMxODtcbiAgfVxuICAmOmhvdmVyIHBhdGg6bnRoLW9mLXR5cGUoMSkge1xuICAgIGZpbGw6ICNmYjQwNTI7XG4gIH1cbmA7XG5jb25zdCBOZWVkbGVDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgZGlzcGxheTogZmxleDtcbiAgei1pbmRleDogMTAwMjtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuXG4gIG1hcmdpbi1sZWZ0OiAtMzAlO1xuICBwYXRoOm50aC1vZi10eXBlKDIpIHtcbiAgfVxuICBzdmcgZyB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTc2LjcwNTMsIC0yOS43NzI3KSBzY2FsZSgyLCAxKTtcbiAgfVxuICBzdmcge1xuICAgIHotaW5kZXg6IDk5OTA7XG4gICAgaGVpZ2h0OiAxNTBweDtcbiAgICB3aWR0aDogMjAwcHg7XG4gIH1cbmA7XG5jb25zdCBSb3RhdGVCdXR0b24gPSBzdHlsZWQuZGl2YFxuICB3aWR0aDogMzAlO1xuICBtYXJnaW4tdG9wOiAxNHB4O1xuICB6LWluZGV4OiA5OTk7XG4gIGRpc3BsYXk6IGZsZXg7XG5cbiAgc3ZnOmhvdmVyIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gIH1cbiAgc3ZnOmhvdmVyIHBhdGgge1xuICAgIGZpbGw6ICNlY2VjZWM7XG4gICAgZmlsdGVyOiBkcm9wLXNoYWRvdygwcHggMHB4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSkpO1xuICB9XG4gIHBhdGgge1xuICAgIGZpbGw6ICNiYmI7XG4gIH1cbiAgc3ZnIHtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDAuNik7XG4gICAgei1pbmRleDogOTk5MDtcbiAgICBoZWlnaHQ6IDE3MnB4O1xuICB9XG5gO1xuXG4vKipcbiAqIE5hdmlnYXRpb24gY29tcG9uZW50IHRoYXQgZGlzcGxheXMgYSBjb21wYXNzIGNvbXBvbmVudCB3aGljaCBpbmRpY2F0ZXMgdGhlIGN1cnJlbnQgb3JpYW50YXRpb24gb2YgdGhlIG1hcCBpdCBpcyByZWdpc3RlcmVkIGZvciBhbmQgb2ZmZXJzIGNvbnRyb2xzIHRvIHR1cm4gdGhlIGJlYXJpbmcgOTDCsCBsZWZ0L3JpZ2h0IG9yIHJlc2V0IG5vcnRoIHRvIHBvaW50IHVwLlxuICpcbiAqIEFsbCBzdHlsZSBwcm9wcyBhcmUgYXBwbGllZCB1c2luZyBAZW1vdGlvbi9jc3MgdG8gYWxsb3cgbW9yZSBjb21wbGV4IGNzcyBzZWxlY3RvcnMuXG4gKlxuICogQGNvbXBvbmVudFxuICovXG5jb25zdCBNbE5hdmlnYXRpb25Db21wYXNzID0gKHByb3BzKSA9PiB7XG4gIC8vIFVzZSBhIHVzZVJlZiBob29rIHRvIHJlZmVyZW5jZSB0aGUgbGF5ZXIgb2JqZWN0IHRvIGJlIGFibGUgdG8gYWNjZXNzIGl0IGxhdGVyIGluc2lkZSB1c2VFZmZlY3QgaG9va3NcbiAgY29uc3QgbWFwQ29udGV4dCA9IHVzZUNvbnRleHQoTWFwQ29udGV4dCk7XG5cbiAgY29uc3QgaW5pdGlhbGl6ZWRSZWYgPSB1c2VSZWYoZmFsc2UpO1xuICBjb25zdCBtYXBSZWYgPSB1c2VSZWYodW5kZWZpbmVkKTtcbiAgY29uc3QgY29tcG9uZW50SWQgPSB1c2VSZWYoKHByb3BzLmlkUHJlZml4ID8gcHJvcHMuaWRQcmVmaXggOiBcIk1sTmF2aWdhdGlvbkNvbXBhc3MtXCIpICsgdXVpZHY0KCkpO1xuXG4gIGNvbnN0IFtiZWFyaW5nLCBzZXRCZWFyaW5nXSA9IHVzZVN0YXRlKDApO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgbGV0IF9jb21wb25lbnRJZCA9IGNvbXBvbmVudElkLmN1cnJlbnQ7XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgLy8gVGhpcyBpcyB0aGUgY2xlYW51cCBmdW5jdGlvbiwgaXQgaXMgY2FsbGVkIHdoZW4gdGhpcyByZWFjdCBjb21wb25lbnQgaXMgcmVtb3ZlZCBmcm9tIHJlYWN0LWRvbVxuXG4gICAgICBpZiAobWFwUmVmLmN1cnJlbnQpIHtcbiAgICAgICAgbWFwUmVmLmN1cnJlbnQuY2xlYW51cChfY29tcG9uZW50SWQpO1xuICAgICAgICBtYXBSZWYuY3VycmVudCA9IHVuZGVmaW5lZDtcbiAgICAgIH1cbiAgICAgIGluaXRpYWxpemVkUmVmLmN1cnJlbnQgPSBmYWxzZTtcbiAgICB9O1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIW1hcENvbnRleHQubWFwRXhpc3RzKHByb3BzLm1hcElkKSB8fCBpbml0aWFsaXplZFJlZi5jdXJyZW50KSByZXR1cm47XG4gICAgaW5pdGlhbGl6ZWRSZWYuY3VycmVudCA9IHRydWU7XG4gICAgbWFwUmVmLmN1cnJlbnQgPSBtYXBDb250ZXh0LmdldE1hcChwcm9wcy5tYXBJZCk7XG5cbiAgICBtYXBSZWYuY3VycmVudC5vbihcbiAgICAgIFwicm90YXRlXCIsXG4gICAgICBmdW5jdGlvbiAoKSB7XG4gICAgICAgIHNldEJlYXJpbmcoTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudC5nZXRCZWFyaW5nKCkpKTtcbiAgICAgIH0sXG4gICAgICBjb21wb25lbnRJZC5jdXJyZW50XG4gICAgKTtcbiAgICBzZXRCZWFyaW5nKE1hdGgucm91bmQobWFwUmVmLmN1cnJlbnQuZ2V0QmVhcmluZygpKSk7XG4gIH0sIFttYXBDb250ZXh0Lm1hcElkcywgbWFwQ29udGV4dCwgcHJvcHMubWFwSWRdKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17Y3NzKHtcbiAgICAgICAgICB6SW5kZXg6IDEwMDAsXG4gICAgICAgICAgdG9wOiAwLFxuICAgICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgICAgLi4ucHJvcHMuc3R5bGUsXG4gICAgICAgIH0pfVxuICAgICAgPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3NOYW1lPXtjc3Moe1xuICAgICAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgICAgIGJvcmRlcjogXCIxMHB4IHNvbGlkICNiY2JjYmNcIixcbiAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogXCIjNzE3MTcxXCIsXG4gICAgICAgICAgICBiYWNrZ3JvdW5kOiBcInJhZGlhbC1ncmFkaWVudCgjNzE3MTcxLCAjNDE0MTQxKVwiLFxuICAgICAgICAgICAgaGVpZ2h0OiBcIjIwMHB4XCIsXG4gICAgICAgICAgICB3aWR0aDogXCIyMDBweFwiLFxuICAgICAgICAgICAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiLFxuICAgICAgICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICAgICAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICAgICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgwLjIpIHRyYW5zbGF0ZVgoLTQ0OHB4KSB0cmFuc2xhdGVZKC00NDhweClcIixcbiAgICAgICAgICAgIC4uLnByb3BzLmJhY2tncm91bmRTdHlsZSxcbiAgICAgICAgICB9KX1cbiAgICAgICAgPlxuICAgICAgICAgIDxSb3RhdGVCdXR0b24gY2xhc3NOYW1lPXtjc3MoeyAuLi5wcm9wcy5yb3RhdGVSaWdodFN0eWxlIH0pfT5cbiAgICAgICAgICAgIDxSb3RhdGVSaWdodEljb25cbiAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgIGxldCBiZWFyaW5nID0gTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudD8uZ2V0QmVhcmluZygpKTtcbiAgICAgICAgICAgICAgICBsZXQgcmVzdCA9IE1hdGgucm91bmQoYmVhcmluZyAlIDkwKTtcbiAgICAgICAgICAgICAgICBpZiAoYmVhcmluZyA+IDApIHtcbiAgICAgICAgICAgICAgICAgIHJlc3QgPSA5MCAtIHJlc3Q7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIGlmIChyZXN0ID09PSAwKSB7XG4gICAgICAgICAgICAgICAgICByZXN0ID0gOTA7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIG1hcFJlZi5jdXJyZW50Py5zZXRCZWFyaW5nKE1hdGgucm91bmQoYmVhcmluZyArIE1hdGguYWJzKHJlc3QpKSk7XG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+PC9Sb3RhdGVSaWdodEljb24+XG4gICAgICAgICAgPC9Sb3RhdGVCdXR0b24+XG4gICAgICAgICAgPE5lZWRsZUJ1dHRvblxuICAgICAgICAgICAgY2xhc3NOYW1lPXtjc3MoeyAuLi5wcm9wcy5uZWVkbGVTdHlsZSB9KX1cbiAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgICAgbWFwUmVmLmN1cnJlbnQ/LnNldEJlYXJpbmcoMCk7XG4gICAgICAgICAgICB9fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxOZWVkbGVDb250YWluZXJcbiAgICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm06IFwicm90YXRlKFwiICsgYmVhcmluZyArIFwiZGVnKVwiLFxuICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICA8TmVlZGxlSWNvbiAvPlxuICAgICAgICAgICAgPC9OZWVkbGVDb250YWluZXI+XG4gICAgICAgICAgPC9OZWVkbGVCdXR0b24+XG4gICAgICAgICAgPFJvdGF0ZUJ1dHRvbiBjbGFzc05hbWU9e2Nzcyh7IC4uLnByb3BzLnJvdGF0ZUxlZnRTdHlsZSB9KX0+XG4gICAgICAgICAgICA8Um90YXRlTGVmdEljb25cbiAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgIGxldCBiZWFyaW5nID0gTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudD8uZ2V0QmVhcmluZygpKTtcbiAgICAgICAgICAgICAgICBsZXQgcmVzdCA9IE1hdGgucm91bmQoYmVhcmluZyAlIDkwKTtcbiAgICAgICAgICAgICAgICBpZiAoYmVhcmluZyA8IDApIHtcbiAgICAgICAgICAgICAgICAgIHJlc3QgPSA5MCArIHJlc3Q7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIGlmIChyZXN0ID09PSAwKSB7XG4gICAgICAgICAgICAgICAgICByZXN0ID0gOTA7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIG1hcFJlZi5jdXJyZW50Py5zZXRCZWFyaW5nKE1hdGgucm91bmQoYmVhcmluZyAtIE1hdGguYWJzKHJlc3QpKSk7XG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+PC9Sb3RhdGVMZWZ0SWNvbj5cbiAgICAgICAgICA8L1JvdGF0ZUJ1dHRvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8Lz5cbiAgKTtcbn07XG5cbk1sTmF2aWdhdGlvbkNvbXBhc3MucHJvcFR5cGVzID0ge1xuICAvKipcbiAgICogQ29tcG9uZW50IGlkIHByZWZpeFxuICAgKi9cbiAgaWRQcmVmaXg6IFByb3BUeXBlcy5zdHJpbmcsXG4gIC8qKlxuICAgKiBTdHlsZSBvYmplY3QgdG8gYWRqdXN0IGNzcyBkZWZpbml0aW9ucyBvZiB0aGUgY29tcG9uZW50LlxuICAgKi9cbiAgc3R5bGU6IFByb3BUeXBlcy5vYmplY3QsXG4gIC8qKlxuICAgKiBTdHlsZSBvYmplY3QgdG8gYWRqdXN0IGNzcyBkZWZpbml0aW9ucyBvZiB0aGUgYmFja2dyb3VuZC5cbiAgICovXG4gIGJhY2tncm91bmRTdHlsZTogUHJvcFR5cGVzLm9iamVjdCxcbiAgLyoqXG4gICAqIFN0eWxlIG9iamVjdCB0byBhZGp1c3QgY3NzIGRlZmluaXRpb25zIG9mIHRoZSBjb21wYXNzIG5lZWRsZS5cbiAgICovXG4gIG5lZWRsZVN0eWxlOiBQcm9wVHlwZXMub2JqZWN0LFxuICAvKipcbiAgICogU3R5bGUgb2JqZWN0IHRvIGFkanVzdCBjc3MgZGVmaW5pdGlvbnMgb2YgdGhlIHJvdGF0ZSByaWdodCBidXR0b24uXG4gICAqL1xuICByb3RhdGVSaWdodFN0eWxlOiBQcm9wVHlwZXMub2JqZWN0LFxuICAvKipcbiAgICogU3R5bGUgb2JqZWN0IHRvIGFkanVzdCBjc3MgZGVmaW5pdGlvbnMgb2YgdGhlIHJvdGF0ZSBsZWZ0IGJ1dHRvbi5cbiAgICovXG4gIHJvdGF0ZUxlZnRTdHlsZTogUHJvcFR5cGVzLm9iamVjdCxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE1sTmF2aWdhdGlvbkNvbXBhc3M7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+/**
+ * Navigation component that displays a compass component which indicates the current oriantation of the map it is registered for and offers controls to turn the bearing 90° left/right or reset north to point up.
+ *
+ * All style props are applied using @emotion/css to allow more complex css selectors.
+ *
+ * @component
+ */
+
+
+var MlNavigationCompass = function MlNavigationCompass(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 : "MlNavigationCompass-") + v4());
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      bearing = _useState2[0],
+      setBearing = _useState2[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
+      if (mapRef.current) {
+        mapRef.current.cleanup(_componentId);
+        mapRef.current = undefined;
+      }
+
+      initializedRef.current = false;
+    };
+  }, []);
+  useEffect(function () {
+    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
+    initializedRef.current = true;
+    mapRef.current = mapContext.getMap(props.mapId);
+    mapRef.current.on("rotate", function () {
+      setBearing(Math.round(mapRef.current.getBearing()));
+    }, componentId.current);
+    setBearing(Math.round(mapRef.current.getBearing()));
+  }, [mapContext.mapIds, mapContext, props.mapId]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: /*#__PURE__*/css(_objectSpread2({
+      zIndex: 1000,
+      top: 0,
       position: "absolute"
     }, props.style), process.env.NODE_ENV === "production" ? "" : ";label:MlNavigationCompass;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIk1sTmF2aWdhdGlvbkNvbXBhc3MuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUltQiIsImZpbGUiOiJNbE5hdmlnYXRpb25Db21wYXNzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlLCB1c2VSZWYsIHVzZUVmZmVjdCwgdXNlQ29udGV4dCB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tIFwicHJvcC10eXBlc1wiO1xuXG5pbXBvcnQgeyBNYXBDb250ZXh0IH0gZnJvbSBcIkBtYXBjb21wb25lbnRzL3JlYWN0LWNvcmVcIjtcbmltcG9ydCB7IHY0IGFzIHV1aWR2NCB9IGZyb20gXCJ1dWlkXCI7XG5cbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIFJvdGF0ZVJpZ2h0SWNvbiB9IGZyb20gXCIuL2Fzc2V0cy9yb3RhdGVfcmlnaHQuc3ZnXCI7XG5pbXBvcnQgeyBSZWFjdENvbXBvbmVudCBhcyBSb3RhdGVMZWZ0SWNvbiB9IGZyb20gXCIuL2Fzc2V0cy9yb3RhdGVfbGVmdC5zdmdcIjtcbmltcG9ydCB7IFJlYWN0Q29tcG9uZW50IGFzIE5lZWRsZUljb24gfSBmcm9tIFwiLi9hc3NldHMvbmVlZGxlLnN2Z1wiO1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9jc3NcIjtcblxuY29uc3QgTmVlZGxlQnV0dG9uID0gc3R5bGVkLmRpdmBcbiAgd2lkdGg6IDQwJTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAmOmhvdmVyIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gIH1cbiAgcGF0aCB7XG4gICAgZmlsdGVyOiBkcm9wLXNoYWRvdygwcHggMHB4IDE1cHggcmdiYSgwLCAwLCAwLCAwLjIpKTtcbiAgfVxuICAmOmhvdmVyIHBhdGgge1xuICAgIGZpbHRlcjogZHJvcC1zaGFkb3coMHB4IDBweCAxM3B4IHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4xKSk7XG4gIH1cbiAgcGF0aDpudGgtb2YtdHlwZSgyKSB7XG4gICAgZmlsbDogIzM0MzQzNDtcbiAgfVxuICAmOmhvdmVyIHBhdGg6bnRoLW9mLXR5cGUoMikge1xuICAgIGZpbGw6ICM0MzQzNDM7XG4gIH1cbiAgcGF0aDpudGgtb2YtdHlwZSgxKSB7XG4gICAgZmlsbDogI2U5MDMxODtcbiAgfVxuICAmOmhvdmVyIHBhdGg6bnRoLW9mLXR5cGUoMSkge1xuICAgIGZpbGw6ICNmYjQwNTI7XG4gIH1cbmA7XG5jb25zdCBOZWVkbGVDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgZGlzcGxheTogZmxleDtcbiAgei1pbmRleDogMTAwMjtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuXG4gIG1hcmdpbi1sZWZ0OiAtMzAlO1xuICBwYXRoOm50aC1vZi10eXBlKDIpIHtcbiAgfVxuICBzdmcgZyB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTc2LjcwNTMsIC0yOS43NzI3KSBzY2FsZSgyLCAxKTtcbiAgfVxuICBzdmcge1xuICAgIHotaW5kZXg6IDk5OTA7XG4gICAgaGVpZ2h0OiAxNTBweDtcbiAgICB3aWR0aDogMjAwcHg7XG4gIH1cbmA7XG5jb25zdCBSb3RhdGVCdXR0b24gPSBzdHlsZWQuZGl2YFxuICB3aWR0aDogMzAlO1xuICBtYXJnaW4tdG9wOiAxNHB4O1xuICB6LWluZGV4OiA5OTk7XG4gIGRpc3BsYXk6IGZsZXg7XG5cbiAgc3ZnOmhvdmVyIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gIH1cbiAgc3ZnOmhvdmVyIHBhdGgge1xuICAgIGZpbGw6ICNlY2VjZWM7XG4gICAgZmlsdGVyOiBkcm9wLXNoYWRvdygwcHggMHB4IDVweCByZ2JhKDAsIDAsIDAsIDAuMSkpO1xuICB9XG4gIHBhdGgge1xuICAgIGZpbGw6ICNiYmI7XG4gIH1cbiAgc3ZnIHtcbiAgICB0cmFuc2Zvcm06IHNjYWxlKDAuNik7XG4gICAgei1pbmRleDogOTk5MDtcbiAgICBoZWlnaHQ6IDE3MnB4O1xuICB9XG5gO1xuXG4vKipcbiAqIE5hdmlnYXRpb24gY29tcG9uZW50IHRoYXQgZGlzcGxheXMgYSBjb21wYXNzIGNvbXBvbmVudCB3aGljaCBpbmRpY2F0ZXMgdGhlIGN1cnJlbnQgb3JpYW50YXRpb24gb2YgdGhlIG1hcCBpdCBpcyByZWdpc3RlcmVkIGZvciBhbmQgb2ZmZXJzIGNvbnRyb2xzIHRvIHR1cm4gdGhlIGJlYXJpbmcgOTDCsCBsZWZ0L3JpZ2h0IG9yIHJlc2V0IG5vcnRoIHRvIHBvaW50IHVwLlxuICpcbiAqIEFsbCBzdHlsZSBwcm9wcyBhcmUgYXBwbGllZCB1c2luZyBAZW1vdGlvbi9jc3MgdG8gYWxsb3cgbW9yZSBjb21wbGV4IGNzcyBzZWxlY3RvcnMuXG4gKlxuICogQGNvbXBvbmVudFxuICovXG5jb25zdCBNbE5hdmlnYXRpb25Db21wYXNzID0gKHByb3BzKSA9PiB7XG4gIC8vIFVzZSBhIHVzZVJlZiBob29rIHRvIHJlZmVyZW5jZSB0aGUgbGF5ZXIgb2JqZWN0IHRvIGJlIGFibGUgdG8gYWNjZXNzIGl0IGxhdGVyIGluc2lkZSB1c2VFZmZlY3QgaG9va3NcbiAgY29uc3QgbWFwQ29udGV4dCA9IHVzZUNvbnRleHQoTWFwQ29udGV4dCk7XG5cbiAgY29uc3QgaW5pdGlhbGl6ZWRSZWYgPSB1c2VSZWYoZmFsc2UpO1xuICBjb25zdCBtYXBSZWYgPSB1c2VSZWYodW5kZWZpbmVkKTtcbiAgY29uc3QgY29tcG9uZW50SWQgPSB1c2VSZWYoKHByb3BzLmlkUHJlZml4ID8gcHJvcHMuaWRQcmVmaXggOiBcIk1sTmF2aWdhdGlvbkNvbXBhc3MtXCIpICsgdXVpZHY0KCkpO1xuXG4gIGNvbnN0IFtiZWFyaW5nLCBzZXRCZWFyaW5nXSA9IHVzZVN0YXRlKDApO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgbGV0IF9jb21wb25lbnRJZCA9IGNvbXBvbmVudElkLmN1cnJlbnQ7XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgLy8gVGhpcyBpcyB0aGUgY2xlYW51cCBmdW5jdGlvbiwgaXQgaXMgY2FsbGVkIHdoZW4gdGhpcyByZWFjdCBjb21wb25lbnQgaXMgcmVtb3ZlZCBmcm9tIHJlYWN0LWRvbVxuXG4gICAgICBpZiAobWFwUmVmLmN1cnJlbnQpIHtcbiAgICAgICAgbWFwUmVmLmN1cnJlbnQuY2xlYW51cChfY29tcG9uZW50SWQpO1xuICAgICAgICBtYXBSZWYuY3VycmVudCA9IHVuZGVmaW5lZDtcbiAgICAgIH1cbiAgICAgIGluaXRpYWxpemVkUmVmLmN1cnJlbnQgPSBmYWxzZTtcbiAgICB9O1xuICB9LCBbXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIW1hcENvbnRleHQubWFwRXhpc3RzKHByb3BzLm1hcElkKSB8fCBpbml0aWFsaXplZFJlZi5jdXJyZW50KSByZXR1cm47XG4gICAgaW5pdGlhbGl6ZWRSZWYuY3VycmVudCA9IHRydWU7XG4gICAgbWFwUmVmLmN1cnJlbnQgPSBtYXBDb250ZXh0LmdldE1hcChwcm9wcy5tYXBJZCk7XG5cbiAgICBtYXBSZWYuY3VycmVudC5vbihcbiAgICAgIFwicm90YXRlXCIsXG4gICAgICBmdW5jdGlvbiAoKSB7XG4gICAgICAgIHNldEJlYXJpbmcoTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudC5nZXRCZWFyaW5nKCkpKTtcbiAgICAgIH0sXG4gICAgICBjb21wb25lbnRJZC5jdXJyZW50XG4gICAgKTtcbiAgICBzZXRCZWFyaW5nKE1hdGgucm91bmQobWFwUmVmLmN1cnJlbnQuZ2V0QmVhcmluZygpKSk7XG4gIH0sIFttYXBDb250ZXh0Lm1hcElkcywgbWFwQ29udGV4dCwgcHJvcHMubWFwSWRdKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17Y3NzKHtcbiAgICAgICAgICB6SW5kZXg6IDEwMDAsXG4gICAgICAgICAgdG9wOiAwLFxuICAgICAgICAgIHBvc2l0aW9uOiBcImFic29sdXRlXCIsXG4gICAgICAgICAgLi4ucHJvcHMuc3R5bGUsXG4gICAgICAgIH0pfVxuICAgICAgPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3NOYW1lPXtjc3Moe1xuICAgICAgICAgICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICAgICAgICAgIGJvcmRlcjogXCIxMHB4IHNvbGlkICNiY2JjYmNcIixcbiAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogXCIjNzE3MTcxXCIsXG4gICAgICAgICAgICBiYWNrZ3JvdW5kOiBcInJhZGlhbC1ncmFkaWVudCgjNzE3MTcxLCAjNDE0MTQxKVwiLFxuICAgICAgICAgICAgaGVpZ2h0OiBcIjIwMHB4XCIsXG4gICAgICAgICAgICB3aWR0aDogXCIyMDBweFwiLFxuICAgICAgICAgICAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiLFxuICAgICAgICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICAgICAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICAgICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgwLjIpIHRyYW5zbGF0ZVgoLTQ0OHB4KSB0cmFuc2xhdGVZKC00NDhweClcIixcbiAgICAgICAgICAgIC4uLnByb3BzLmJhY2tncm91bmRTdHlsZSxcbiAgICAgICAgICB9KX1cbiAgICAgICAgPlxuICAgICAgICAgIDxSb3RhdGVCdXR0b24gY2xhc3NOYW1lPXtjc3MoeyAuLi5wcm9wcy5yb3RhdGVSaWdodFN0eWxlIH0pfT5cbiAgICAgICAgICAgIDxSb3RhdGVSaWdodEljb25cbiAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgIGxldCBiZWFyaW5nID0gTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudD8uZ2V0QmVhcmluZygpKTtcbiAgICAgICAgICAgICAgICBsZXQgcmVzdCA9IE1hdGgucm91bmQoYmVhcmluZyAlIDkwKTtcbiAgICAgICAgICAgICAgICBpZiAoYmVhcmluZyA+IDApIHtcbiAgICAgICAgICAgICAgICAgIHJlc3QgPSA5MCAtIHJlc3Q7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIGlmIChyZXN0ID09PSAwKSB7XG4gICAgICAgICAgICAgICAgICByZXN0ID0gOTA7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIG1hcFJlZi5jdXJyZW50Py5zZXRCZWFyaW5nKE1hdGgucm91bmQoYmVhcmluZyArIE1hdGguYWJzKHJlc3QpKSk7XG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+PC9Sb3RhdGVSaWdodEljb24+XG4gICAgICAgICAgPC9Sb3RhdGVCdXR0b24+XG4gICAgICAgICAgPE5lZWRsZUJ1dHRvblxuICAgICAgICAgICAgY2xhc3NOYW1lPXtjc3MoeyAuLi5wcm9wcy5uZWVkbGVTdHlsZSB9KX1cbiAgICAgICAgICAgIG9uQ2xpY2s9eygpID0+IHtcbiAgICAgICAgICAgICAgbWFwUmVmLmN1cnJlbnQ/LnNldEJlYXJpbmcoMCk7XG4gICAgICAgICAgICB9fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxOZWVkbGVDb250YWluZXJcbiAgICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgICB0cmFuc2Zvcm06IFwicm90YXRlKFwiICsgYmVhcmluZyArIFwiZGVnKVwiLFxuICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICA8TmVlZGxlSWNvbiAvPlxuICAgICAgICAgICAgPC9OZWVkbGVDb250YWluZXI+XG4gICAgICAgICAgPC9OZWVkbGVCdXR0b24+XG4gICAgICAgICAgPFJvdGF0ZUJ1dHRvbiBjbGFzc05hbWU9e2Nzcyh7IC4uLnByb3BzLnJvdGF0ZUxlZnRTdHlsZSB9KX0+XG4gICAgICAgICAgICA8Um90YXRlTGVmdEljb25cbiAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgIGxldCBiZWFyaW5nID0gTWF0aC5yb3VuZChtYXBSZWYuY3VycmVudD8uZ2V0QmVhcmluZygpKTtcbiAgICAgICAgICAgICAgICBsZXQgcmVzdCA9IE1hdGgucm91bmQoYmVhcmluZyAlIDkwKTtcbiAgICAgICAgICAgICAgICBpZiAoYmVhcmluZyA8IDApIHtcbiAgICAgICAgICAgICAgICAgIHJlc3QgPSA5MCArIHJlc3Q7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIGlmIChyZXN0ID09PSAwKSB7XG4gICAgICAgICAgICAgICAgICByZXN0ID0gOTA7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIG1hcFJlZi5jdXJyZW50Py5zZXRCZWFyaW5nKE1hdGgucm91bmQoYmVhcmluZyAtIE1hdGguYWJzKHJlc3QpKSk7XG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+PC9Sb3RhdGVMZWZ0SWNvbj5cbiAgICAgICAgICA8L1JvdGF0ZUJ1dHRvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8Lz5cbiAgKTtcbn07XG5cbk1sTmF2aWdhdGlvbkNvbXBhc3MucHJvcFR5cGVzID0ge1xuICAvKipcbiAgICogQ29tcG9uZW50IGlkIHByZWZpeFxuICAgKi9cbiAgaWRQcmVmaXg6IFByb3BUeXBlcy5zdHJpbmcsXG4gIC8qKlxuICAgKiBTdHlsZSBvYmplY3QgdG8gYWRqdXN0IGNzcyBkZWZpbml0aW9ucyBvZiB0aGUgY29tcG9uZW50LlxuICAgKi9cbiAgc3R5bGU6IFByb3BUeXBlcy5vYmplY3QsXG4gIC8qKlxuICAgKiBTdHlsZSBvYmplY3QgdG8gYWRqdXN0IGNzcyBkZWZpbml0aW9ucyBvZiB0aGUgYmFja2dyb3VuZC5cbiAgICovXG4gIGJhY2tncm91bmRTdHlsZTogUHJvcFR5cGVzLm9iamVjdCxcbiAgLyoqXG4gICAqIFN0eWxlIG9iamVjdCB0byBhZGp1c3QgY3NzIGRlZmluaXRpb25zIG9mIHRoZSBjb21wYXNzIG5lZWRsZS5cbiAgICovXG4gIG5lZWRsZVN0eWxlOiBQcm9wVHlwZXMub2JqZWN0LFxuICAvKipcbiAgICogU3R5bGUgb2JqZWN0IHRvIGFkanVzdCBjc3MgZGVmaW5pdGlvbnMgb2YgdGhlIHJvdGF0ZSByaWdodCBidXR0b24uXG4gICAqL1xuICByb3RhdGVSaWdodFN0eWxlOiBQcm9wVHlwZXMub2JqZWN0LFxuICAvKipcbiAgICogU3R5bGUgb2JqZWN0IHRvIGFkanVzdCBjc3MgZGVmaW5pdGlvbnMgb2YgdGhlIHJvdGF0ZSBsZWZ0IGJ1dHRvbi5cbiAgICovXG4gIHJvdGF0ZUxlZnRTdHlsZTogUHJvcFR5cGVzLm9iamVjdCxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IE1sTmF2aWdhdGlvbkNvbXBhc3M7XG4iXX0= */")
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -1860,200 +2266,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 +2325,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 +2420,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 +2429,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 +2447,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 +2471,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 +2546,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 +2570,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 +2579,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 +2836,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 +4442,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 +4487,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 +4599,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 +4632,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 +4698,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 +5351,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 +5549,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 +5577,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 +5681,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