@mapcomponents/react-maplibre 0.1.8 → 0.1.12

package/dist/index.esm.js

@@ -1244,18 +1244,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 +1272,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 +1285,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 +1368,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 +1387,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 +1402,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 +1421,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 +1431,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;
@@ -1438,7 +1450,7 @@ var MlGeoJsonLayer = function MlGeoJsonLayer(props) {
     }
   }, [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;
@@ -1499,9 +1511,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]);
@@ -1648,46 +1658,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)."; }
@@ -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
     }