@mapcomponents/react-maplibre 0.1.9 → 0.1.13

package/dist/index.esm.js

@@ -16,6 +16,7 @@ import GpsFixedIcon from '@mui/icons-material/GpsFixed';
 import _styled from '@emotion/styled/base';
 import { css } from '@emotion/css';
 import RoomIcon from '@mui/icons-material/Room';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import Point from '@mapbox/point-geometry';
@@ -287,7 +288,7 @@ var MapLibreGlWrapper = function MapLibreGlWrapper(props) {
     on: function on(eventName, handler, options, componentId) {
       if (!self.eventHandlers[eventName]) return;
 
-      if (typeof options === 'string') {
+      if (typeof options === "string") {
         componentId = options;
         options = {};
       }
@@ -428,7 +429,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 +445,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 +723,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 +742,11 @@ var MapLibreGlWrapper = function MapLibreGlWrapper(props) {
             case 3:
               self.map = new maplibregl.Map(props.mapOptions);
               self.addNativeMaplibreFunctionsAndProps();
-              self.wrapper.refreshViewport(true);
+              self.wrapper.refreshViewport();
               self.wrapper.fire("viewportchange");
               self.map.on("move", function () {
-                self.wrapper.refreshViewport();
-
-                if (self.wrapper.viewportStateString !== self.wrapper.oldViewportStateString) {
-                  self.wrapper.oldViewportStateString = self.wrapper.viewportStateString;
-                  self.wrapper.fire("viewportchange");
-                }
+                self.wrapper.viewportState = self.wrapper.getViewport();
+                self.wrapper.fire("viewportchange");
               });
               self.map.on("data", function () {
                 self.wrapper.refreshLayerState();
@@ -1244,18 +1225,25 @@ MlCreatePdfButton.propTypes = {
   mapId: PropTypes.string
 };
 
-var _showNextTransitionSegment = function _showNextTransitionSegment(props, layerId, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep) {
+var _showNextTransitionSegment = function _showNextTransitionSegment(props, layerId, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef) {
   var _arguments = arguments;
 
   if (typeof map.getSource(layerId) === "undefined" || !transitionInProgressRef.current) {
-    setTimeout(function () {
+    transitionTimeoutRef.current = setTimeout(function () {
       return _showNextTransitionSegment.apply(void 0, _toConsumableArray(_arguments));
     }, msPerStep);
     return;
   }
 
   if (typeof transitionGeojsonDataRef.current[currentTransitionStepRef.current] !== "undefined") {
+    var _map$getSource;
+
     var newData = currentTransitionStepRef.current + 1 === transitionGeojsonDataRef.current.length ? props.geojson : lineString([].concat(_toConsumableArray(transitionGeojsonCommonDataRef.current), _toConsumableArray(transitionGeojsonDataRef.current[currentTransitionStepRef.current].geometry.coordinates)));
+
+    if (!(map !== null && map !== void 0 && (_map$getSource = map.getSource) !== null && _map$getSource !== void 0 && _map$getSource.call(map, layerId))) {
+      return;
+    }
+
     map.getSource(layerId).setData(newData);
 
     if (typeof props.onTransitionFrame === "function") {
@@ -1265,7 +1253,7 @@ var _showNextTransitionSegment = function _showNextTransitionSegment(props, laye
     currentTransitionStepRef.current++;
 
     if (transitionInProgressRef.current && currentTransitionStepRef.current < transitionGeojsonDataRef.current.length) {
-      setTimeout(function () {
+      transitionTimeoutRef.current = setTimeout(function () {
         return _showNextTransitionSegment.apply(void 0, _toConsumableArray(_arguments));
       }, msPerStep);
     } else {
@@ -1278,7 +1266,7 @@ var _showNextTransitionSegment = function _showNextTransitionSegment(props, laye
   }
 };
 
-var _transitionToGeojson = function _transitionToGeojson(newGeojson, props, transitionGeojsonCommonDataRef, transitionGeojsonDataRef, transitionInProgressRef, oldGeojsonRef, msPerStep, currentTransitionStepRef, map, layerId) {
+var _transitionToGeojson = function _transitionToGeojson(newGeojson, props, transitionGeojsonCommonDataRef, transitionGeojsonDataRef, transitionInProgressRef, oldGeojsonRef, msPerStep, currentTransitionStepRef, map, layerId, transitionTimeoutRef) {
   // create the transition geojson between oldGeojsonRef.current and props.geojson
   // create a geojson that contains no common point between the two line features
   var transitionCoordinatesShort = [];
@@ -1361,11 +1349,11 @@ var _transitionToGeojson = function _transitionToGeojson(newGeojson, props, tran
 
     tmpLinestring = tmpChunks.features[1];
 
-    for (i = 1; i < srcTransitionSteps; i++) {
+    for (i = 0; i < srcTransitionSteps; i++) {
       transitionGeojsonDataRef.current.push(tmpLinestring);
 
-      if (typeof tmpChunks.features[i + 1] !== "undefined") {
-        tmpLinestring = lineString([].concat(_toConsumableArray(tmpLinestring.geometry.coordinates), _toConsumableArray(tmpChunks.features[i + 1].geometry.coordinates)));
+      if (typeof tmpChunks.features[i] !== "undefined") {
+        tmpLinestring = lineString([].concat(_toConsumableArray(tmpLinestring.geometry.coordinates), _toConsumableArray(tmpChunks.features[i].geometry.coordinates)));
       } else {
         transitionGeojsonDataRef.current.push(tmpLinestring);
         break;
@@ -1380,11 +1368,11 @@ var _transitionToGeojson = function _transitionToGeojson(newGeojson, props, tran
 
     tmpLinestring = tmpChunks.features[1];
 
-    for (i = 1; i < targetTransitionSteps; i++) {
+    for (i = 0; i < targetTransitionSteps; i++) {
       transitionGeojsonDataRef.current.push(tmpLinestring);
 
-      if (typeof tmpChunks.features[i + 1] !== "undefined") {
-        tmpLinestring = lineString([].concat(_toConsumableArray(tmpLinestring.geometry.coordinates), _toConsumableArray(tmpChunks.features[i + 1].geometry.coordinates)));
+      if (typeof tmpChunks.features[i] !== "undefined") {
+        tmpLinestring = lineString([].concat(_toConsumableArray(tmpLinestring.geometry.coordinates), _toConsumableArray(tmpChunks.features[i].geometry.coordinates)));
       } else {
         transitionGeojsonDataRef.current.push(tmpLinestring);
         break;
@@ -1395,8 +1383,8 @@ var _transitionToGeojson = function _transitionToGeojson(newGeojson, props, tran
   transitionGeojsonDataRef.current.push(props.geojson);
   currentTransitionStepRef.current = 1;
   transitionInProgressRef.current = true;
-  setTimeout(function () {
-    return _showNextTransitionSegment(props, layerId, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep);
+  transitionTimeoutRef.current = setTimeout(function () {
+    return _showNextTransitionSegment(props, layerId, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef);
   }, msPerStep);
 };
 
@@ -1414,6 +1402,7 @@ var MlGeoJsonLayer = function MlGeoJsonLayer(props) {
   var mapRef = useRef(null);
   var initializedRef = useRef(false);
   var transitionInProgressRef = useRef(false);
+  var transitionTimeoutRef = useRef(undefined);
   var currentTransitionStepRef = useRef(false);
   var transitionGeojsonDataRef = useRef([]);
   var transitionGeojsonCommonDataRef = useRef([]);
@@ -1423,6 +1412,10 @@ var MlGeoJsonLayer = function MlGeoJsonLayer(props) {
     var _componentId = componentId.current;
     return function () {
       // This is the cleanup function, it is called when this react component is removed from react-dom
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current);
+      }
+
       if (mapRef.current) {
         mapRef.current.cleanup(_componentId);
         mapRef.current = null;
@@ -1430,15 +1423,21 @@ var MlGeoJsonLayer = function MlGeoJsonLayer(props) {
     };
   }, []);
   useEffect(function () {
-    if (!mapRef.current || !initializedRef.current) return; // the MapLibre-gl instance (mapContext.map) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
+    if (!mapRef.current || !initializedRef.current) return;
+
+    for (var key in props.layout) {
+      mapContext.getMap(props.mapId).setLayoutProperty(layerId.current, key, props.layout[key]);
+    }
+  }, [props.layout, mapContext, props.mapId]);
+  useEffect(function () {
+    if (!mapRef.current || !initializedRef.current) return;
 
     for (var key in props.paint) {
-      mapContext.getMap(props.mapId).setPaintProperty(componentId.current, key, props.paint[key]);
+      mapContext.getMap(props.mapId).setPaintProperty(layerId.current, key, props.paint[key]);
     }
   }, [props.paint, mapContext, props.mapId]);
   var transitionToGeojson = useCallback(function (newGeojson) {
-    _transitionToGeojson(newGeojson, props, transitionGeojsonCommonDataRef, transitionGeojsonDataRef, transitionInProgressRef, oldGeojsonRef, msPerStep, currentTransitionStepRef, mapRef.current, componentId.current);
+    _transitionToGeojson(newGeojson, props, transitionGeojsonCommonDataRef, transitionGeojsonDataRef, transitionInProgressRef, oldGeojsonRef, msPerStep, currentTransitionStepRef, mapRef.current, componentId.current, transitionTimeoutRef);
   }, [props]);
   useEffect(function () {
     var _mapRef$current, _mapRef$current$getSo;
@@ -1482,7 +1481,8 @@ var MlGeoJsonLayer = function MlGeoJsonLayer(props) {
         paint: props.paint || {
           "line-color": "rgb(100,200,100)",
           "line-width": 10
-        }
+        },
+        layout: props.layout || {}
       }, props.insertBeforeLayer, componentId.current);
 
       if (typeof props.onHover !== "undefined") {
@@ -1499,9 +1499,7 @@ var MlGeoJsonLayer = function MlGeoJsonLayer(props) {
 
       if (props.type === "line" && typeof props.transitionTime !== "undefined" && typeof props.geojson.geometry !== "undefined") {
         transitionToGeojson(props.geojson);
-        setTimeout(function () {
-          oldGeojsonRef.current = props.geojson;
-        }, props.transitionTime / 2);
+        oldGeojsonRef.current = props.geojson;
       }
     }
   }, [mapContext.mapIds, mapContext, props, transitionToGeojson]);
@@ -1521,8 +1519,17 @@ MlGeoJsonLayer.propTypes = {
   type: PropTypes.string,
 
   /**
-   * Paint object, that is passed to the addLayer call.
-   * Possible propsdepend on the layer type.
+   * Layout property object, that is passed to the addLayer call.
+   * Possible props depend on the layer type.
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+   */
+  layout: PropTypes.object,
+
+  /**
+   * Paint property object, that is passed to the addLayer call.
+   * Possible props depend on the layer type.
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
@@ -1577,12 +1584,12 @@ MlGeoJsonLayer.propTypes = {
 var MlImageMarkerLayer = function MlImageMarkerLayer(props) {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
   var mapRef = useRef(null);
-  var componentId = useRef((props.idPrefix ? props.idPrefix : "MlOsmLayer-") + v4());
+  var componentId = useRef((props.idPrefix ? props.idPrefix : "MlImageMarkerLayer-") + v4());
   var mapContext = useContext(MapContext);
   var layerInitializedRef = useRef(false);
   var idSuffixRef = useRef(props.idSuffix || new Date().getTime());
   var imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
-  var layerId = useRef((props.layerId || "MlImageMarkerLayer-") + idSuffixRef.current);
+  var layerId = useRef(props.layerId || componentId.current);
   useEffect(function () {
     var _componentId = componentId.current;
     return function () {
@@ -1626,6 +1633,7 @@ var MlImageMarkerLayer = function MlImageMarkerLayer(props) {
 
     mapRef.current = mapContext.getMap(props.mapId);
     layerInitializedRef.current = true;
+    console.log(props.imgSrc);
 
     if (props.imgSrc) {
       mapRef.current.loadImage(props.imgSrc, function (error, image) {
@@ -1648,46 +1656,56 @@ var MlImageMarkerLayer = function MlImageMarkerLayer(props) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
 
-var _path;
-
 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: 149.953,
-    height: 394.094,
-    viewBox: "0 0 39.675 104.271"
-  }, props), _path || (_path = /*#__PURE__*/createElement("path", {
-    d: "M31.122 0L0 8.552l14.476 8.235c-5.82 11.005-8.692 22.459-10.142 33.84C2.52 64.103 2.758 78.141 9.69 91.76c1.58 3.103 3.614 6.243 6.453 9.278a28.1 28.1 0 002.415 2.297 18.762 18.762 0 001.051.823l.154.113 9.149-4.002-.09-.058-.048-.035a10.24 10.24 0 01-.413-.33 20.703 20.703 0 01-1.757-1.678c-2.328-2.453-4.049-5.159-5.514-7.974-6.462-12.41-6.555-25.674-4.916-38.81 1.308-9.888 3.613-19.707 7.992-29.085l15.51 8.823z"
+    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 _path$1;
+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: 149.953,
-    height: 394.094,
-    viewBox: "0 0 39.675 104.271"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/createElement("path", {
-    d: "M8.553 0l31.122 8.552L25.2 16.787c5.82 11.005 8.692 22.459 10.142 33.84 1.816 13.477 1.576 27.515-5.355 41.133-1.58 3.103-3.613 6.243-6.453 9.278a28.1 28.1 0 01-2.415 2.297 18.768 18.768 0 01-1.051.823l-.154.113-9.149-4.002.09-.058.048-.035c.124-.092.26-.203.413-.33a20.702 20.702 0 001.757-1.678c2.329-2.453 4.05-5.159 5.514-7.974 6.462-12.41 6.555-25.674 4.916-38.81-1.308-9.888-3.612-19.707-7.992-29.085L0 31.122z"
-  })));
+    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 _path$2;
+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: 287.121,
-    height: 887.106,
-    viewBox: "0 0 75.967 234.713"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/createElement("path", {
-    d: "M37.984 0l37.983 117.357H0zM37.984 234.713l37.983-117.356H0z"
-  })));
+    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)."; }
@@ -1881,6 +1899,8 @@ MlNavigationCompass.propTypes = {
   rotateLeftStyle: PropTypes.object
 };
 
+var marker = "b556faa3bc6829d2.png";
+
 /**
  * Adds a button that makes the map follow the users GPS position using
  * navigator.geolocation.watchPosition if activated
@@ -1915,6 +1935,12 @@ var MlFollowGps = function MlFollowGps(props) {
   var initializedRef = useRef(false);
   var mapRef = useRef(undefined);
   var componentId = useRef((props.idPrefix ? props.idPrefix : "MlFollowGps-") + v4());
+
+  var _useState7 = useState(30),
+      _useState8 = _slicedToArray(_useState7, 2),
+      accuracyRadius = _useState8[0],
+      setAccuracyRadius = _useState8[1];
+
   useEffect(function () {
     var _componentId = componentId.current;
     return function () {
@@ -1947,6 +1973,7 @@ var MlFollowGps = function MlFollowGps(props) {
   var getLocationSuccess = function getLocationSuccess(pos) {
     if (!mapRef.current) return;
     mapRef.current.setCenter([pos.coords.longitude, pos.coords.latitude]);
+    setAccuracyRadius(pos.coords.accuracy);
     setGeoJson(point([pos.coords.longitude, pos.coords.latitude]));
   };
 
@@ -1959,7 +1986,10 @@ var MlFollowGps = function MlFollowGps(props) {
     geojson: geoJson,
     type: "circle",
     paint: {
-      "circle-radius": 30,
+      "circle-radius": {
+        stops: [[0, 0], [20, accuracyRadius / 0.075 / Math.cos(geoJson.geometry.coordinates[1] * Math.PI / 180)]],
+        base: 2
+      },
       "circle-color": "#ee7700",
       "circle-opacity": 0.5
     }
@@ -1975,7 +2005,7 @@ var MlFollowGps = function MlFollowGps(props) {
         "icon-offset": [0, -340]
       }
     },
-    imgSrc: "/assets/marker.png"
+    imgSrc: marker
   }), /*#__PURE__*/React__default.createElement(Button, {
     sx: _objectSpread2({
       zIndex: 1002,
@@ -1992,7 +2022,9 @@ var MlFollowGps = function MlFollowGps(props) {
       setIsFollowed(!isFollowed);
     }
   }, " ", /*#__PURE__*/React__default.createElement(RoomIcon, {
-    sx: {}
+    sx: {
+      fontSize: props.style.fontSize
+    }
   }), " "));
 };
 
@@ -2006,6 +2038,7 @@ MlFollowGps.defaultProps = {
     backgroundColor: "#414141",
     borderRadius: "23%",
     margin: 0.15,
+    fontSize: "1.3em",
     ":hover": {
       backgroundColor: "#515151",
       color: "#ececec"
@@ -2040,17 +2073,19 @@ var MlNavigationTools = function MlNavigationTools(props) {
       locationAccessDenied = _useState4[0],
       setLocationAccessDenied = _useState4[1];
 
+  var mediaIsMobile = useMediaQuery("(max-width:900px)");
   var buttonStyle = {
-    minWidth: "30px",
-    minHeight: "30px",
-    width: "30px",
-    height: "30px",
+    minWidth: "20px",
+    minHeight: "20px",
+    width: mediaIsMobile ? "50px" : "30px",
+    height: mediaIsMobile ? "50px" : "30px",
     color: "#bbb",
     backgroundColor: "#414141",
     borderRadius: "23%",
     //border: "1px solid #bbb",
     //boxShadow: "0px 0px 4px rgba(0,0,0,.5)",
     margin: 0.15,
+    fontSize: mediaIsMobile ? "1.5em" : "1.2em",
     ":hover": {
       backgroundColor: "#515151",
       color: "#ececec"
@@ -2134,8 +2169,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"
     }
@@ -2143,15 +2178,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
@@ -2161,15 +2196,17 @@ var MlNavigationTools = function MlNavigationTools(props) {
     disabled: locationAccessDenied
   }, /*#__PURE__*/React__default.createElement(GpsFixedIcon, {
     sx: {
-      width: ".9em"
+      fontSize: mediaIsMobile ? "1.5em" : "1.2em"
     }
-  })), /*#__PURE__*/React__default.createElement(MlFollowGps, null), /*#__PURE__*/React__default.createElement(ButtonGroup, {
+  })), /*#__PURE__*/React__default.createElement(MlFollowGps, {
+    style: buttonStyle
+  }), /*#__PURE__*/React__default.createElement(ButtonGroup, {
     orientation: "vertical",
     sx: {
-      width: "30px",
+      width: "50px",
       border: "none",
       Button: {
-        minWidth: "30px !important",
+        minWidth: "20px !important",
         border: "none",
         padding: 0
       },
@@ -2180,10 +2217,18 @@ var MlNavigationTools = function MlNavigationTools(props) {
   }, /*#__PURE__*/React__default.createElement(Button, {
     sx: buttonStyle,
     onClick: zoomIn
-  }, /*#__PURE__*/React__default.createElement(ControlPointIcon, null)), /*#__PURE__*/React__default.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(ControlPointIcon, {
+    sx: {
+      fontSize: mediaIsMobile ? "1.5em" : "1.2em"
+    }
+  })), /*#__PURE__*/React__default.createElement(Button, {
     sx: buttonStyle,
     onClick: zoomOut
-  }, /*#__PURE__*/React__default.createElement(RemoveCircleOutlineIcon, null))));
+  }, /*#__PURE__*/React__default.createElement(RemoveCircleOutlineIcon, {
+    sx: {
+      fontSize: mediaIsMobile ? "1.5em" : "1.2em"
+    }
+  }))));
 };
 
 var MlLayer = function MlLayer(props) {
@@ -2193,7 +2238,7 @@ var MlLayer = function MlLayer(props) {
   var mapRef = useRef(null);
   var componentId = useRef((props.layerId ? props.layerId : "MlLayer-") + v4());
   var idSuffixRef = useRef(props.idSuffix || new Date().getTime());
-  var layerId = (props.layerId || "MlLayer-") + idSuffixRef.current;
+  var layerId = useRef(props.layerId || componentId.current);
   var layerPaintConfRef = useRef(undefined);
   var layerLayoutConfRef = useRef(undefined);
   useEffect(function () {
@@ -2241,7 +2286,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)"
@@ -2507,7 +2552,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);
@@ -4113,7 +4158,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;
     }
 
@@ -4158,7 +4203,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);
@@ -4270,7 +4315,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;
     }
 
@@ -4303,7 +4348,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
     });
@@ -4369,6 +4414,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,
@@ -5009,6 +5067,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
@@ -5206,14 +5265,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", {
@@ -5228,14 +5293,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