@mapcomponents/react-maplibre 0.1.63 → 0.1.65

package/coverage/lcov-report/src/components/MlLayerMagnify/MlLayerMagnify.tsx.html

@@ -279,15 +279,7 @@
 <a name='L214'></a><a href='#L214'>214</a>
 <a name='L215'></a><a href='#L215'>215</a>
 <a name='L216'></a><a href='#L216'>216</a>
-<a name='L217'></a><a href='#L217'>217</a>
-<a name='L218'></a><a href='#L218'>218</a>
-<a name='L219'></a><a href='#L219'>219</a>
-<a name='L220'></a><a href='#L220'>220</a>
-<a name='L221'></a><a href='#L221'>221</a>
-<a name='L222'></a><a href='#L222'>222</a>
-<a name='L223'></a><a href='#L223'>223</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L217'></a><a href='#L217'>217</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -368,8 +360,6 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -386,9 +376,6 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -507,20 +494,15 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, {
-	useContext,
-	useCallback,
-	useRef,
-	useEffect,
-	useState,
-	useMemo
-} from "react";
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useContext, useCallback, useRef, useEffect, useState, useMemo } from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import syncMove from "@mapbox/mapbox-gl-sync-move";
-import "./style.css";
-import	MapContext	from "../../contexts/MapContext";
+import syncMove from '@mapbox/mapbox-gl-sync-move';
+import './style.css';
+import MapContext from '../../contexts/MapContext';
 &nbsp;
-interface MlLayerMagnifyProps {
+export interface MlLayerMagnifyProps {
 	/**
 	 * Id of the first MapLibre instance
 	 */
@@ -533,6 +515,10 @@ interface MlLayerMagnifyProps {
 	 * Size of the "magnifier"-circle
 	 */
 	magnifierRadius?: number;
+	/**
+	 * object (React.CSSProperties) that is added to the magnifier default style
+	 */
+	magnifierStyle: React.CSSProperties | undefined;
 }
 &nbsp;
 /**
@@ -541,7 +527,7 @@ interface MlLayerMagnifyProps {
  * the map and can be dragged around on top of the MapLibreMap referenced by props.map1Id
  */
 const MlLayerMagnify = (props: MlLayerMagnifyProps) =&gt; {
-	const mapContext:MapContextType = useContext(MapContext);
+	const mapContext: MapContextType = useContext(MapContext);
 	const syncMoveInitializedRef = useRef(false);
 	const syncCleanupFunctionRef = useRef(<span class="fstat-no" title="function not covered" >()</span> =&gt; {});
 &nbsp;
@@ -552,7 +538,7 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) =&gt; {
 &nbsp;
 	const magnifierRadius = useMemo(() =&gt; {
 		return props.magnifierRadius || <span class="branch-1 cbranch-no" title="branch not covered" >200;</span>
-	},[props.magnifierRadius]);
+	}, [props.magnifierRadius]);
 &nbsp;
 	const mapExists = useCallback(() =&gt; {
 		<span class="missing-if-branch" title="if path not taken" >I</span>if (!props.map1Id || !props.map2Id) {
@@ -575,11 +561,11 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) =&gt; {
 	});
 &nbsp;
 	useEffect(() =&gt; {
-		window.addEventListener("resize", onResize.current);
-		let _onResize = onResize.current;
+		window.addEventListener('resize', onResize.current);
+		const _onResize = onResize.current;
 &nbsp;
 		return () =&gt; {
-			window.removeEventListener("resize", _onResize);
+			window.removeEventListener('resize', _onResize);
 			syncCleanupFunctionRef.current();
 		};
 	}, []);
@@ -588,29 +574,24 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) =&gt; {
 		(e) =&gt; {
 			<span class="missing-if-branch" title="if path not taken" >I</span>if (!mapExists()) <span class="cstat-no" title="statement not covered" >return;</span>
 &nbsp;
-			let bounds = mapContext.maps[props.map1Id]
-				.getCanvas()
-				.getBoundingClientRect();
+			const bounds = mapContext.maps[props.map1Id].getCanvas().getBoundingClientRect();
 			let clientX =
 				e.clientX ||
-				(typeof e.touches !== "undefined" &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >typeof e.touches[0] !== "undefined"</span>
+				(typeof e.touches !== 'undefined' &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >typeof e.touches[0] !== 'undefined'</span>
 					? <span class="branch-0 cbranch-no" title="branch not covered" >e.touches[0].clientX</span>
 					: 0);
 			let clientY =
 				e.clientY ||
-				(typeof e.touches !== "undefined" &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >typeof e.touches[0] !== "undefined"</span>
+				(typeof e.touches !== 'undefined' &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >typeof e.touches[0] !== 'undefined'</span>
 					? <span class="branch-0 cbranch-no" title="branch not covered" >e.touches[0].clientY</span>
 					: 0);
 &nbsp;
 			clientX -= bounds.x;
 			clientY -= bounds.y;
-			let swipeX_tmp = ((clientX / bounds.width) * 100).toFixed(2);
-			let swipeY_tmp = ((clientY / bounds.height) * 100).toFixed(2);
+			const swipeX_tmp = ((clientX / bounds.width) * 100).toFixed(2);
+			const swipeY_tmp = ((clientY / bounds.height) * 100).toFixed(2);
 &nbsp;
-			<span class="missing-if-branch" title="else path not taken" >E</span>if (
-				swipeXRef.current !== swipeX_tmp ||
-<span class="branch-1 cbranch-no" title="branch not covered" >				swipeYRef.current !== swipeY_tmp</span>
-			) {
+			<span class="missing-if-branch" title="else path not taken" >E</span>if (swipeXRef.current !== swipeX_tmp || <span class="branch-1 cbranch-no" title="branch not covered" >swipeYRef.current !== swipeY_tmp)</span> {
 				setSwipeX(swipeX_tmp);
 				swipeXRef.current = swipeX_tmp;
 				setSwipeY(swipeY_tmp);
@@ -619,9 +600,9 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) =&gt; {
 				mapContext.maps[props.map2Id].getContainer().style.clipPath =
 					`circle(${magnifierRadius}px at ` +
 					(parseFloat(swipeXRef.current) * bounds.width) / 100 +
-					"px " +
+					'px ' +
 					(parseFloat(swipeYRef.current) * bounds.height) / 100 +
-					"px)";
+					'px)';
 			}
 		},
 		[mapContext, mapExists, props, magnifierRadius]
@@ -669,53 +650,53 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) =&gt; {
 		});
 	}, [mapContext.mapIds, mapContext, mapExists, props, onMove]);
 &nbsp;
-	const onDown = <span class="fstat-no" title="function not covered" >(e</span>:any) =&gt; {
-<span class="cstat-no" title="statement not covered" >		if (e.touches) {</span>
-<span class="cstat-no" title="statement not covered" >			document.addEventListener("touchmove", onMove);</span>
-<span class="cstat-no" title="statement not covered" >			document.addEventListener("touchend", onTouchEnd);</span>
+	const onDown = <span class="fstat-no" title="function not covered" >(e</span>: React.MouseEvent | React.TouchEvent) =&gt; {
+<span class="cstat-no" title="statement not covered" >		if (e.nativeEvent instanceof TouchEvent) {</span>
+<span class="cstat-no" title="statement not covered" >			document.addEventListener('touchmove', onMove);</span>
+<span class="cstat-no" title="statement not covered" >			document.addEventListener('touchend', onTouchEnd);</span>
 		} else {
-<span class="cstat-no" title="statement not covered" >			document.addEventListener("mousemove", onMove);</span>
-<span class="cstat-no" title="statement not covered" >			document.addEventListener("mouseup", onMouseUp);</span>
+<span class="cstat-no" title="statement not covered" >			document.addEventListener('mousemove', onMove);</span>
+<span class="cstat-no" title="statement not covered" >			document.addEventListener('mouseup', onMouseUp);</span>
 		}
 	};
 &nbsp;
 	const onTouchEnd = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >		document.removeEventListener("touchmove", onMove);</span>
-<span class="cstat-no" title="statement not covered" >		document.removeEventListener("touchend", onTouchEnd);</span>
+<span class="cstat-no" title="statement not covered" >		document.removeEventListener('touchmove', onMove);</span>
+<span class="cstat-no" title="statement not covered" >		document.removeEventListener('touchend', onTouchEnd);</span>
 	};
 &nbsp;
 	const onMouseUp = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >		document.removeEventListener("mousemove", onMove);</span>
-<span class="cstat-no" title="statement not covered" >		document.removeEventListener("mouseup", onMouseUp);</span>
+<span class="cstat-no" title="statement not covered" >		document.removeEventListener('mousemove', onMove);</span>
+<span class="cstat-no" title="statement not covered" >		document.removeEventListener('mouseup', onMouseUp);</span>
 	};
 &nbsp;
-	const onWheel = <span class="fstat-no" title="function not covered" >(e</span>:any) =&gt; {
-		let evCopy = <span class="cstat-no" title="statement not covered" >new WheelEvent(e.type, e);</span>
+	const onWheel = <span class="fstat-no" title="function not covered" >(e</span>: React.WheelEvent) =&gt; {
+		const evCopy = <span class="cstat-no" title="statement not covered" >new WheelEvent(e.type, e as unknown as WheelEventInit);</span>
 <span class="cstat-no" title="statement not covered" >		mapContext.map.getCanvas().dispatchEvent(evCopy);</span>
 	};
 &nbsp;
 	return (
 		&lt;div
 			style={{
-				position: "absolute",
-				left: swipeX + "%",
-				top: swipeY + "%",
-				borderRadius: "50%",
-				width: magnifierRadius * 2 + 1 + "px",
-				height: magnifierRadius * 2 + 1 + "px",
-				background: "rgba(0,0,0,0)",
-				border: "2px solid #fafafa",
-				boxShadow:
-					"1px 2px 2px rgba(19, 19, 19, .5), inset 1px 1px 1px rgba(19, 19, 19, .2)",
-				cursor: "pointer",
-				zIndex: "110",
-				marginLeft: magnifierRadius * -1 - 1 + "px",
-				marginTop: magnifierRadius * -1 - 1 + "px",
-				textAlign: "center",
-				lineHeight: "91px",
-				fontSize: "2em",
-				color: "#fafafa",
-				userSelect: "none",
+				position: 'absolute',
+				left: swipeX + '%',
+				top: swipeY + '%',
+				borderRadius: '50%',
+				width: magnifierRadius * 2 - 2 + 'px',
+				height: magnifierRadius * 2 - 2 + 'px',
+				background: 'rgba(0,0,0,0)',
+				border: '2px solid #fafafa',
+				boxShadow: '1px 2px 2px rgba(19, 19, 19, .5), inset 1px 1px 1px rgba(19, 19, 19, .2)',
+				cursor: 'pointer',
+				zIndex: '110',
+				marginLeft: magnifierRadius * -1 - 1 + 'px',
+				marginTop: magnifierRadius * -1 - 1 + 'px',
+				textAlign: 'center',
+				lineHeight: '91px',
+				fontSize: '2em',
+				color: '#fafafa',
+				userSelect: 'none',
+				...props.magnifierStyle,
 			}}
 			onTouchStart={onDown}
 			onMouseDown={onDown}
@@ -726,6 +707,7 @@ const MlLayerMagnify = (props: MlLayerMagnifyProps) =&gt; {
 &nbsp;
 MlLayerMagnify.defaultProps = {
 	magnifierRadius: 200,
+	magnifierStyle: {},
 };
 &nbsp;
 export default MlLayerMagnify;
@@ -736,7 +718,7 @@ export default MlLayerMagnify;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2022-12-16T12:30:49.297Z
+                at 2023-01-23T12:27:40.277Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlLayerMagnify/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2022-12-16T12:30:49.297Z
+                at 2023-01-23T12:27:40.277Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlLayerSwipe/MlLayerSwipe.tsx.html

@@ -23,9 +23,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">76.59% </span>
+                <span class="strong">77.08% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>36/47</span>
+                <span class='fraction'>37/48</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">77.77% </span>
+                <span class="strong">78.26% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>35/45</span>
+                <span class='fraction'>36/46</span>
             </div>
         
             
@@ -208,9 +208,7 @@
 <a name='L143'></a><a href='#L143'>143</a>
 <a name='L144'></a><a href='#L144'>144</a>
 <a name='L145'></a><a href='#L145'>145</a>
-<a name='L146'></a><a href='#L146'>146</a>
-<a name='L147'></a><a href='#L147'>147</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L146'></a><a href='#L146'>146</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -265,8 +263,6 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -279,11 +275,8 @@
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -355,19 +348,19 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, {
-	useContext,
-	useCallback,
-	useRef,
-	useEffect,
-	useState,
-} from "react";
+<span class="cline-any cline-yes">11x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useContext, useCallback, useRef, useEffect, useState } from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import syncMove from "@mapbox/mapbox-gl-sync-move";
-import "./style.css";
-import MapContext from "../../contexts/MapContext";
+import syncMove from '@mapbox/mapbox-gl-sync-move';
+import './style.css';
+import MapContext from '../../contexts/MapContext';
 &nbsp;
-interface MlLayerSwipeProps {
+export interface MlLayerSwipeProps {
 	/**
 	 * Id of the first MapLibre instance.
 	 */
@@ -376,6 +369,10 @@ interface MlLayerSwipeProps {
 	 * Id of the second MapLibre instance.
 	 */
 	map2Id: string;
+	/**
+	 * object (React.CSSProperties) that is added to the button default style
+	 */
+	buttonStyle: React.CSSProperties | undefined;
 }
 &nbsp;
 /**
@@ -402,33 +399,28 @@ const MlLayerSwipe = (props: MlLayerSwipeProps) =&gt; {
 	}, [mapContext, props.map1Id, props.map2Id]);
 &nbsp;
 	const cleanup = () =&gt; {
-			syncCleanupFunctionRef.current();
+		syncCleanupFunctionRef.current();
 	};
 &nbsp;
 	const onMove = useCallback(
 		(e) =&gt; {
 			<span class="missing-if-branch" title="if path not taken" >I</span>if (!mapExists()) <span class="cstat-no" title="statement not covered" >return;</span>
 &nbsp;
-			let bounds = mapContext.maps[props.map1Id]
-				.getCanvas()
-				.getBoundingClientRect();
+			const bounds = mapContext.maps[props.map1Id].getCanvas().getBoundingClientRect();
 			let clientX =
 				e.clientX ||
-				(typeof e.touches !== "undefined" &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >typeof e.touches[0] !== "undefined"</span>
+				(typeof e.touches !== 'undefined' &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >typeof e.touches[0] !== 'undefined'</span>
 					? <span class="branch-0 cbranch-no" title="branch not covered" >e.touches[0].clientX</span>
 					: 0);
 &nbsp;
 			clientX -= bounds.x;
-			let swipeX_tmp = parseFloat(((clientX / bounds.width) * 100).toFixed(2));
+			const swipeX_tmp = parseFloat(((clientX / bounds.width) * 100).toFixed(2));
 &nbsp;
 			<span class="missing-if-branch" title="else path not taken" >E</span>if (swipeXRef.current !== swipeX_tmp) {
 				setSwipeX(swipeX_tmp);
 				swipeXRef.current = swipeX_tmp;
 &nbsp;
-				var clipA =
-					"rect(0, " +
-					(swipeXRef.current * bounds.width) / 100 +
-					"px, 999em, 0)";
+				const clipA = 'rect(0, ' + (swipeXRef.current * bounds.width) / 100 + 'px, 999em, 0)';
 &nbsp;
 				mapContext.maps[props.map2Id].getContainer().style.clip = clipA;
 			}
@@ -453,46 +445,47 @@ const MlLayerSwipe = (props: MlLayerSwipeProps) =&gt; {
 		});
 	}, [mapContext.mapIds, mapContext, props, onMove, mapExists]);
 &nbsp;
-	const onDown = <span class="fstat-no" title="function not covered" >(e</span>: any) =&gt; {
-<span class="cstat-no" title="statement not covered" >		if (e.touches) {</span>
-<span class="cstat-no" title="statement not covered" >			document.addEventListener("touchmove", onMove);</span>
-<span class="cstat-no" title="statement not covered" >			document.addEventListener("touchend", onTouchEnd);</span>
+	const onDown = <span class="fstat-no" title="function not covered" >(e</span>: React.MouseEvent | React.TouchEvent) =&gt; {
+<span class="cstat-no" title="statement not covered" >		if (e.nativeEvent instanceof TouchEvent) {</span>
+<span class="cstat-no" title="statement not covered" >			document.addEventListener('touchmove', onMove);</span>
+<span class="cstat-no" title="statement not covered" >			document.addEventListener('touchend', onTouchEnd);</span>
 		} else {
-<span class="cstat-no" title="statement not covered" >			document.addEventListener("mousemove", onMove);</span>
-<span class="cstat-no" title="statement not covered" >			document.addEventListener("mouseup", onMouseUp);</span>
+<span class="cstat-no" title="statement not covered" >			document.addEventListener('mousemove', onMove);</span>
+<span class="cstat-no" title="statement not covered" >			document.addEventListener('mouseup', onMouseUp);</span>
 		}
 	};
 &nbsp;
 	const onTouchEnd = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >		document.removeEventListener("touchmove", onMove);</span>
-<span class="cstat-no" title="statement not covered" >		document.removeEventListener("touchend", onTouchEnd);</span>
+<span class="cstat-no" title="statement not covered" >		document.removeEventListener('touchmove', onMove);</span>
+<span class="cstat-no" title="statement not covered" >		document.removeEventListener('touchend', onTouchEnd);</span>
 	};
 &nbsp;
 	const onMouseUp = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >		document.removeEventListener("mousemove", onMove);</span>
-<span class="cstat-no" title="statement not covered" >		document.removeEventListener("mouseup", onMouseUp);</span>
+<span class="cstat-no" title="statement not covered" >		document.removeEventListener('mousemove', onMove);</span>
+<span class="cstat-no" title="statement not covered" >		document.removeEventListener('mouseup', onMouseUp);</span>
 	};
 &nbsp;
 	return (
 		&lt;div
 			style={{
-				position: "absolute",
-				left: swipeX + "%",
-				top: "50%",
-				borderRadius: "50%",
-				width: "100px",
-				height: "100px",
-				background: "#0066ff",
-				border: "3px solid #eaebf1",
-				cursor: "pointer",
-				zIndex: "110",
-				marginLeft: "-50px",
-				marginTop: "-50px",
-				textAlign: "center",
-				lineHeight: "91px",
-				fontSize: "2em",
-				color: "#fafafa",
-				userSelect: "none",
+				position: 'absolute',
+				left: swipeX + '%',
+				top: '50%',
+				borderRadius: '50%',
+				width: '100px',
+				height: '100px',
+				background: '#0066ff',
+				border: '3px solid #eaebf1',
+				cursor: 'pointer',
+				zIndex: '110',
+				marginLeft: '-50px',
+				marginTop: '-50px',
+				textAlign: 'center',
+				lineHeight: '91px',
+				fontSize: '2em',
+				color: '#fafafa',
+				userSelect: 'none',
+				...props.buttonStyle,
 			}}
 			onTouchStart={onDown}
 			onMouseDown={onDown}
@@ -500,6 +493,10 @@ const MlLayerSwipe = (props: MlLayerSwipeProps) =&gt; {
 	);
 };
 &nbsp;
+MlLayerSwipe.defaultProps = {
+	buttonStyle: {},
+};
+&nbsp;
 export default MlLayerSwipe;
 &nbsp;</pre></td></tr></table></pre>
 
@@ -508,7 +505,7 @@ export default MlLayerSwipe;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2022-12-16T12:30:49.297Z
+                at 2023-01-23T12:27:40.277Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlLayerSwipe/index.html

@@ -23,9 +23,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">76.59% </span>
+                <span class="strong">77.08% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>36/47</span>
+                <span class='fraction'>37/48</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">77.77% </span>
+                <span class="strong">78.26% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>35/45</span>
+                <span class='fraction'>36/46</span>
             </div>
         
             
@@ -80,17 +80,17 @@
 </thead>
 <tbody><tr>
 	<td class="file medium" data-value="MlLayerSwipe.tsx"><a href="MlLayerSwipe.tsx.html">MlLayerSwipe.tsx</a></td>
-	<td data-value="76.59" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 76%"></div><div class="cover-empty" style="width: 24%"></div></div>
+	<td data-value="77.08" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 77%"></div><div class="cover-empty" style="width: 23%"></div></div>
 	</td>
-	<td data-value="76.59" class="pct medium">76.59%</td>
-	<td data-value="47" class="abs medium">36/47</td>
+	<td data-value="77.08" class="pct medium">77.08%</td>
+	<td data-value="48" class="abs medium">37/48</td>
 	<td data-value="70.83" class="pct medium">70.83%</td>
 	<td data-value="24" class="abs medium">17/24</td>
 	<td data-value="60" class="pct medium">60%</td>
 	<td data-value="10" class="abs medium">6/10</td>
-	<td data-value="77.77" class="pct medium">77.77%</td>
-	<td data-value="45" class="abs medium">35/45</td>
+	<td data-value="78.26" class="pct medium">78.26%</td>
+	<td data-value="46" class="abs medium">36/46</td>
 	</tr>
 
 </tbody>
@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2022-12-16T12:30:49.297Z
+                at 2023-01-23T12:27:40.277Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/MlLayerSwitcher/MlLayerSwitcher.js.html

@@ -721,7 +721,7 @@ export default MlLayerSwitcher;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2022-12-16T12:30:49.297Z
+                at 2023-01-23T12:27:40.277Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>