@mapcomponents/react-maplibre 0.1.56 → 0.1.58

package/src/components/MlFollowGps/MlFollowGps.tsx

@@ -9,69 +9,69 @@ import { point, circle, lineArc, Feature, Point } from "@turf/turf";
 import { CircleLayerSpecification, FillLayerSpecification } from "maplibre-gl";
 
 interface MlFollowGpsProps {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId?: string;
-  /**
-   * 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?: string;
-  /**
-   * By default a dot will be shown on the map at the user's location. Set to false to disable.
-   */
-  showUserLocation?: boolean;
-  /**
-   * By default a cone will be shown on the map at the user's location to indicate the device's orientation.
-   * Set to false to disable.
-   */
-  showOrientation?: boolean;
-  /**
-   * By default, if showUserLocation is true, a transparent circle will be drawn around the user location
-   * indicating the accuracy (95% confidence level) of the user's location. Set to false to disable.
-   */
-  showAccuracyCircle?: boolean;
-  /**
-   * Use the MapLibre.flyTo function to center the map to the current users position if true.
-   * Otherwise the MapLibre.setCenter function is used.
-   */
-  useFlyTo?: boolean;
-  /**
-   * Center map to current position once updated location data is recieved.
-   * "false" will center the map once on component activation and then display the updated user location on the map.
-   */
-  centerUserPosition?: boolean;
-  /**
-   * Orientation cone paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the orientation cone polygon.
-   * Use any available paint prop from layer type "fill".
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-   */
-  orientationConePaint?: FillLayerSpecification["paint"];
-  /**
-   * Position circle paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the position circle.
-   * Use any available paint prop from layer type "circle".
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-   */
-  circlePaint?: CircleLayerSpecification["paint"];
-  /**
-   * Active button font color
-   */
-  onColor?: string;
-  /**
-   * Inactive button font color
-   */
-  offColor?: string;
-  /**
-   * Accuracy paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the accuracy polygon.
-   * Use any available paint prop from layer type "fill".
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-   */
-  accuracyPaint?: FillLayerSpecification["paint"];
-  /**
-   * CSS style object that is applied to the button component
-   */
-  buttonSx?: SxProps | any;
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * 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?: string;
+	/**
+	 * By default a dot will be shown on the map at the user's location. Set to false to disable.
+	 */
+	showUserLocation?: boolean;
+	/**
+	 * By default a cone will be shown on the map at the user's location to indicate the device's orientation.
+	 * Set to false to disable.
+	 */
+	showOrientation?: boolean;
+	/**
+	 * By default, if showUserLocation is true, a transparent circle will be drawn around the user location
+	 * indicating the accuracy (95% confidence level) of the user's location. Set to false to disable.
+	 */
+	showAccuracyCircle?: boolean;
+	/**
+	 * Use the MapLibre.flyTo function to center the map to the current users position if true.
+	 * Otherwise the MapLibre.setCenter function is used.
+	 */
+	useFlyTo?: boolean;
+	/**
+	 * Center map to current position once updated location data is recieved.
+	 * "false" will center the map once on component activation and then display the updated user location on the map.
+	 */
+	centerUserPosition?: boolean;
+	/**
+	 * Orientation cone paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the orientation cone polygon.
+	 * Use any available paint prop from layer type "fill".
+	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+	 */
+	orientationConePaint?: FillLayerSpecification["paint"];
+	/**
+	 * Position circle paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the position circle.
+	 * Use any available paint prop from layer type "circle".
+	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
+	 */
+	circlePaint?: CircleLayerSpecification["paint"];
+	/**
+	 * Active button font color
+	 */
+	onColor?: string;
+	/**
+	 * Inactive button font color
+	 */
+	offColor?: string;
+	/**
+	 * Accuracy paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the accuracy polygon.
+	 * Use any available paint prop from layer type "fill".
+	 * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+	 */
+	accuracyPaint?: FillLayerSpecification["paint"];
+	/**
+	 * CSS style object that is applied to the button component
+	 */
+	buttonSx?: SxProps | any;
 }
 
 /**
@@ -80,181 +80,181 @@ interface MlFollowGpsProps {
  *
  */
 const MlFollowGps = (props: MlFollowGpsProps) => {
-  const mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer,
-  });
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
 
-  const [isFollowed, setIsFollowed] = useState(false);
-  const [userLocationGeoJson, setUserLocationGeoJson] = useState<Feature<Point>>();
-  const [locationAccessDenied, setLocationAccessDenied] = useState(false);
-  const [accuracyGeoJson, setAccuracyGeoJson] = useState<Feature>();
-  const [deviceOrientation, setDeviceOrientation] = useState(0);
-  const initiallyCentered = useRef(false);
+	const [isFollowed, setIsFollowed] = useState(false);
+	const [userLocationGeoJson, setUserLocationGeoJson] = useState<Feature<Point>>();
+	const [locationAccessDenied, setLocationAccessDenied] = useState(false);
+	const [accuracyGeoJson, setAccuracyGeoJson] = useState<Feature>();
+	const [deviceOrientation, setDeviceOrientation] = useState(0);
+	const initiallyCentered = useRef(false);
 
-  const getLocationSuccess = useCallback(
-    (pos) => {
-      if (!mapHook.map) return;
+	const getLocationSuccess = useCallback(
+		(pos) => {
+			if (!mapHook.map) return;
 
-      if ((!props.centerUserPosition && !initiallyCentered.current) || props.centerUserPosition) {
-        if (props.useFlyTo) {
-          mapHook.map.map.flyTo({
-            center: [pos.coords.longitude, pos.coords.latitude],
-            zoom: 18,
-            speed: 1,
-            curve: 1,
-          });
-        } else {
-          mapHook.map.map.setCenter([pos.coords.longitude, pos.coords.latitude]);
-        }
+			if ((!props.centerUserPosition && !initiallyCentered.current) || props.centerUserPosition) {
+				if (props.useFlyTo) {
+					mapHook.map.map.flyTo({
+						center: [pos.coords.longitude, pos.coords.latitude],
+						zoom: 18,
+						speed: 1,
+						curve: 1,
+					});
+				} else {
+					mapHook.map.map.setCenter([pos.coords.longitude, pos.coords.latitude]);
+				}
 
-        initiallyCentered.current = true;
-      }
-      if (!props.showUserLocation) return;
-      const geoJsonPoint = point([pos.coords.longitude, pos.coords.latitude]);
-      setUserLocationGeoJson(geoJsonPoint);
-      setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy / 1000));
-    },
-    [mapHook.map, props]
-  );
+				initiallyCentered.current = true;
+			}
+			if (!props.showUserLocation) return;
+			const geoJsonPoint = point([pos.coords.longitude, pos.coords.latitude]);
+			setUserLocationGeoJson(geoJsonPoint);
+			setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy / 1000));
+		},
+		[mapHook.map, props]
+	);
 
-  const getLocationError = () => {
-    console.log("Access of user location denied");
-    setLocationAccessDenied(true);
-  };
+	const getLocationError = () => {
+		console.log("Access of user location denied");
+		setLocationAccessDenied(true);
+	};
 
-  const orientationCone = useMemo(() => {
-    if (!userLocationGeoJson) {
-      return undefined;
-    }
-    let radius = 0.02;
-    let bearing1 = deviceOrientation - 15;
-    let bearing2 = deviceOrientation + 15;
-    const options = { steps: 65 };
-    let arc = lineArc(userLocationGeoJson, radius, bearing1, bearing2, options);
-    let copy = arc;
-    copy.geometry.coordinates.push(userLocationGeoJson.geometry.coordinates);
-    copy.geometry.coordinates.slice(0, 0);
-    return copy;
-  }, [deviceOrientation, userLocationGeoJson]);
+	const orientationCone = useMemo(() => {
+		if (!userLocationGeoJson) {
+			return undefined;
+		}
+		let radius = 0.02;
+		let bearing1 = deviceOrientation - 15;
+		let bearing2 = deviceOrientation + 15;
+		const options = { steps: 65 };
+		let arc = lineArc(userLocationGeoJson, radius, bearing1, bearing2, options);
+		let copy = arc;
+		copy.geometry.coordinates.push(userLocationGeoJson.geometry.coordinates);
+		copy.geometry.coordinates.slice(0, 0);
+		return copy;
+	}, [deviceOrientation, userLocationGeoJson]);
 
-  const handleOrientation = (event: any) => {
-    setDeviceOrientation(-event.alpha);
-  };
+	const handleOrientation = (event: any) => {
+		setDeviceOrientation(-event.alpha);
+	};
 
-  useEffect(() => {
-    if (isFollowed) {
-      let _handleOrientation = handleOrientation;
-      window.addEventListener("deviceorientation", _handleOrientation);
-      return () => {
-        window.removeEventListener("deviceorientation", _handleOrientation);
-      };
-    } else {
-      initiallyCentered.current = false;
-    }
-    return;
-  }, [isFollowed]);
+	useEffect(() => {
+		if (isFollowed) {
+			let _handleOrientation = handleOrientation;
+			window.addEventListener("deviceorientation", _handleOrientation);
+			return () => {
+				window.removeEventListener("deviceorientation", _handleOrientation);
+			};
+		} else {
+			initiallyCentered.current = false;
+		}
+		return;
+	}, [isFollowed]);
 
-  useEffect(() => {
-    if (!mapHook.map) return;
+	useEffect(() => {
+		if (!mapHook.map) return;
 
-    if (isFollowed) {
-      let _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
+		if (isFollowed) {
+			let _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
 
-      return () => {
-        navigator.geolocation.clearWatch(_watchId);
-      };
-    }
-    return;
-  }, [mapHook.map, isFollowed, getLocationSuccess]);
+			return () => {
+				navigator.geolocation.clearWatch(_watchId);
+			};
+		}
+		return;
+	}, [mapHook.map, isFollowed, getLocationSuccess]);
 
-  return (
-    <>
-      {isFollowed && userLocationGeoJson && (
-        <MlGeoJsonLayer
-          geojson={accuracyGeoJson}
-          type={"fill"}
-          paint={{
-            "fill-color": "#cbd300",
-            "fill-opacity": 0.3,
-            ...props.accuracyPaint,
-          }}
-          insertBeforeLayer={props.insertBeforeLayer}
-        />
-      )}
+	return (
+		<>
+			{isFollowed && userLocationGeoJson && (
+				<MlGeoJsonLayer
+					geojson={accuracyGeoJson}
+					type={"fill"}
+					paint={{
+						"fill-color": "#cbd300",
+						"fill-opacity": 0.3,
+						...props.accuracyPaint,
+					}}
+					insertBeforeLayer={props.insertBeforeLayer}
+				/>
+			)}
 
-      {isFollowed && orientationCone && (
-        <MlGeoJsonLayer
-          geojson={orientationCone}
-          type={"fill"}
-          paint={{
-            "fill-color": "#0000ff",
-            "fill-antialias": false,
-            "fill-opacity": 0.3,
-            ...props.orientationConePaint,
-          }}
-          insertBeforeLayer={props.insertBeforeLayer}
-        />
-      )}
+			{isFollowed && orientationCone && (
+				<MlGeoJsonLayer
+					geojson={orientationCone}
+					type={"fill"}
+					paint={{
+						"fill-color": "#0000ff",
+						"fill-antialias": false,
+						"fill-opacity": 0.3,
+						...props.orientationConePaint,
+					}}
+					insertBeforeLayer={props.insertBeforeLayer}
+				/>
+			)}
 
-      {isFollowed && userLocationGeoJson && (
-        <MlGeoJsonLayer
-          geojson={userLocationGeoJson}
-          type={"circle"}
-          paint={{
-            "circle-color": "#009ee0",
-            "circle-radius": 5,
-            "circle-stroke-color": "#fafaff",
-            "circle-stroke-width": 1,
-            ...props.circlePaint,
-          }}
-          insertBeforeLayer={props.insertBeforeLayer}
-        />
-      )}
+			{isFollowed && userLocationGeoJson && (
+				<MlGeoJsonLayer
+					geojson={userLocationGeoJson}
+					type={"circle"}
+					paint={{
+						"circle-color": "#009ee0",
+						"circle-radius": 5,
+						"circle-stroke-color": "#fafaff",
+						"circle-stroke-width": 1,
+						...props.circlePaint,
+					}}
+					insertBeforeLayer={props.insertBeforeLayer}
+				/>
+			)}
 
-      <Button
-        sx={{
-          zIndex: 1002,
-          color: isFollowed ? props.onColor : props.offColor,
-          ...props.buttonSx,
-        }}
-        disabled={locationAccessDenied}
-        onClick={() => {
-          setIsFollowed(!isFollowed);
-        }}
-      >
-        {" "}
-        <GpsFixedIcon
-          sx={{ ...(props.buttonSx?.fontSize ? { fontSize: props.buttonSx?.fontSize } : {}) }}
-        />{" "}
-      </Button>
-    </>
-  );
+			<Button
+				sx={{
+					zIndex: 1002,
+					color: isFollowed ? props.onColor : props.offColor,
+					...props.buttonSx,
+				}}
+				disabled={locationAccessDenied}
+				onClick={() => {
+					setIsFollowed(!isFollowed);
+				}}
+			>
+				{" "}
+				<GpsFixedIcon
+					sx={{ ...(props.buttonSx?.fontSize ? { fontSize: props.buttonSx?.fontSize } : {}) }}
+				/>{" "}
+			</Button>
+		</>
+	);
 };
 
 MlFollowGps.defaultProps = {
-  mapId: undefined,
-  buttonSx: {
-    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",
-  showAccuracyCircle: true,
-  showUserLocation: true,
-  showOrientation: true,
-  centerUserPosition: true,
-  useFlyTo: false,
+	mapId: undefined,
+	buttonSx: {
+		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",
+	showAccuracyCircle: true,
+	showUserLocation: true,
+	showOrientation: true,
+	centerUserPosition: true,
+	useFlyTo: false,
 };
 
 export default MlFollowGps;

package/src/components/MlGPXViewer/MlGPXViewer.stories.js

@@ -6,25 +6,25 @@ import mapContextDecorator from "../../decorators/MapContextDecorator";
 import GeoJsonProvider from "./util/GeoJsonProvider";
 
 const storyoptions = {
-  title: "MapComponents/MlGPXViewer",
-  component: MlGPXViewer,
-  argTypes: {
-    options: {
-      control: {
-        type: "object",
-      },
-    },
-  },
-  decorators: mapContextDecorator,
+	title: "MapComponents/MlGPXViewer",
+	component: MlGPXViewer,
+	argTypes: {
+		options: {
+			control: {
+				type: "object",
+			},
+		},
+	},
+	decorators: mapContextDecorator,
 };
 export default storyoptions;
 
 const Template = (args) => (
-  <>
-    <GeoJsonProvider>
-      <MlGPXViewer />
-    </GeoJsonProvider>
-  </>
+	<>
+		<GeoJsonProvider>
+			<MlGPXViewer />
+		</GeoJsonProvider>
+	</>
 );
 
 export const ExampleConfig = Template.bind({});

package/src/components/MlGPXViewer/MlGPXViewer.test.js

@@ -5,22 +5,22 @@ import MlGPXViewer from "./MlGPXViewer";
 const testComponent = <MlGPXViewer />;
 
 let sourceTestParams = [
-  "<MlGPXViewer />",
-  testComponent,
-  /^.*\"import\-source\".*$/,
-  "import-source",
+	"<MlGPXViewer />",
+	testComponent,
+	/^.*\"import\-source\".*$/,
+	"import-source",
 ];
 let layer1TestParams = [
-  "<MlGPXViewer />",
-  testComponent,
-  /^.*\"importer\-layer\-lines\".*$/,
-  "importer-layer-lines",
+	"<MlGPXViewer />",
+	testComponent,
+	/^.*\"importer\-layer\-lines\".*$/,
+	"importer-layer-lines",
 ];
 let layer2TestParams = [
-  "<MlGPXViewer />",
-  testComponent,
-  /^.*\"importer\-layer\-points\".*$/,
-  "importer-layer-points",
+	"<MlGPXViewer />",
+	testComponent,
+	/^.*\"importer\-layer\-points\".*$/,
+	"importer-layer-points",
 ];
 
 layerRemovalTest(...layer1TestParams);