@mapcomponents/react-maplibre 0.1.57 → 0.1.58

package/src/components/MlNavigationTools/MlNavigationTools.stories.js

@@ -7,13 +7,13 @@ import BuildIcon from "@mui/icons-material/Build";
 import Button from "@mui/material/Button";
 
 const storyoptions = {
-  title: "MapComponents/MlNavigationTools",
-  component: MlNavigationTools,
-  argTypes: {
-    url: {},
-    layer: {},
-  },
-  decorators: noNavToolsDecorator,
+	title: "MapComponents/MlNavigationTools",
+	component: MlNavigationTools,
+	argTypes: {
+		url: {},
+		layer: {},
+	},
+	decorators: noNavToolsDecorator,
 };
 export default storyoptions;
 
@@ -26,40 +26,40 @@ DefaultConfig.args = {};
 export const No3DButton = Template.bind({});
 No3DButton.parameters = {};
 No3DButton.args = {
-  show3DButton: false,
+	show3DButton: false,
 };
 
 export const ShowCenterLocationButton = Template.bind({});
 ShowCenterLocationButton.parameters = {};
 ShowCenterLocationButton.args = {
-  showFollowGpsButton: false,
-  showCenterLocationButton: true,
+	showFollowGpsButton: false,
+	showCenterLocationButton: true,
 };
 
 export const AlterToolPosition = Template.bind({});
 AlterToolPosition.parameters = {};
 AlterToolPosition.args = {
-  sx: { top: "10px", right: "5px" },
+	sx: { top: "10px", right: "5px" },
 };
 
 export const NoZoomButtons = Template.bind({});
 NoZoomButtons.parameters = {};
 NoZoomButtons.args = {
-  showZoomButtons: false,
+	showZoomButtons: false,
 };
 
 export const NoFollowGpsButton = Template.bind({});
 NoFollowGpsButton.parameters = {};
 NoFollowGpsButton.args = {
-  showFollowGpsButton: false,
+	showFollowGpsButton: false,
 };
 
 export const CustomButton = Template.bind({});
 CustomButton.parameters = {};
 CustomButton.args = {
-  children: (
-    <Button onClick={() => {}}>
-      <BuildIcon sx={{ fontSize: "1em" }} />
-    </Button>
-  ),
+	children: (
+		<Button onClick={() => {}}>
+			<BuildIcon sx={{ fontSize: "1em" }} />
+		</Button>
+	),
 };

package/src/components/MlNavigationTools/MlNavigationTools.tsx

@@ -13,188 +13,188 @@ import useMap from "../../hooks/useMap";
 import MlCenterPosition from "../MlCenterPosition/MlCenterPosition";
 
 interface MlNavigationToolsProps {
-  /**
-   * 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;
-  /**
-   * Show 3D button
-   */
-  show3DButton?: boolean;
-  /**
-   * Show zoom button
-   */
-  showZoomButtons?: boolean;
-  /**
-   * Show follow GPS button
-   */
-  showFollowGpsButton?: boolean;
-  /**
-   * Show center on current position button
-   */
-  showCenterLocationButton?: boolean;
-  /**
-   * Additional JSX Elements to be rendered below MlNavigationTools buttons
-   */
-  children?: JSX.Element;
-  /**
-   * Style attribute for NavigationTools container
-   */
-  sx?: SxProps;
+	/**
+	 * 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;
+	/**
+	 * Show 3D button
+	 */
+	show3DButton?: boolean;
+	/**
+	 * Show zoom button
+	 */
+	showZoomButtons?: boolean;
+	/**
+	 * Show follow GPS button
+	 */
+	showFollowGpsButton?: boolean;
+	/**
+	 * Show center on current position button
+	 */
+	showCenterLocationButton?: boolean;
+	/**
+	 * Additional JSX Elements to be rendered below MlNavigationTools buttons
+	 */
+	children?: JSX.Element;
+	/**
+	 * Style attribute for NavigationTools container
+	 */
+	sx?: SxProps;
 }
 
 /**
  * @component
  */
 const MlNavigationTools = (props: MlNavigationToolsProps) => {
-  const mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer,
-  });
-
-  const [pitch, setPitch] = useState(0);
-  const mediaIsMobile = useMediaQuery("(max-width:900px)");
-  const buttonStyle = {
-    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.4em" : "1.2em",
-    ":hover": {
-      backgroundColor: "#515151",
-    },
-    color: "#ececec",
-  };
-  const iconStyle = {
-    fontSize: buttonStyle.fontSize,
-  };
-
-  useEffect(() => {
-    if (!mapHook.map) return;
-
-    mapHook.map.on(
-      "pitchend",
-      () => {
-        if (!mapHook.map) return;
-
-        setPitch(mapHook.map.map.getPitch());
-      },
-      mapHook.componentId
-    );
-    setPitch(mapHook.map.map.getPitch());
-  }, [mapHook.map, props.mapId]);
-
-  const zoomIn = () => {
-    if (!mapHook.map) return;
-
-    if (mapHook.map.map.transform._zoom + 0.5 <= mapHook.map.map.transform._maxZoom) {
-      mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom + 0.5 });
-    }
-  };
-
-  const zoomOut = () => {
-    if (!mapHook.map) return;
-
-    if (mapHook.map.map.transform._zoom - 0.5 >= mapHook.map.map.transform._minZoom) {
-      mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom - 0.5 });
-    }
-  };
-
-  const adjustPitch = () => {
-    if (!mapHook.map) return;
-
-    let targetPitch = 60;
-    if (mapHook.map.map.getPitch() !== 0) {
-      targetPitch = 0;
-    }
-    mapHook.map.map.easeTo({ pitch: targetPitch });
-  };
-
-  return (
-    <Box
-      sx={{
-        zIndex: 501,
-        position: "absolute",
-        display: "flex",
-        flexDirection: "column",
-        ...(mediaIsMobile ? { margin: "20px 10px 20px 10px" } : {}),
-        ...props.sx,
-      }}
-    >
-      <MlNavigationCompass
-        style={{
-          width: "31px",
-          position: "relative",
-          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)",
-        }}
-      />
-      {props.show3DButton && (
-        <Button
-          sx={{ ...buttonStyle, fontSize: mediaIsMobile ? "1.4em" : "1em", fontWeight: 600 }}
-          onClick={adjustPitch}
-        >
-          {pitch ? "2D" : "3D"}
-        </Button>
-      )}
-      {props.showFollowGpsButton && (
-        <MlFollowGps buttonSx={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
-      )}
-      {props.showCenterLocationButton && (
-        <MlCenterPosition style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
-      )}
-      <ButtonGroup
-        orientation="vertical"
-        sx={{
-          width: "50px",
-          border: "none",
-          Button: { minWidth: "20px !important", border: "none", padding: 0 },
-          "Button:hover": { border: "none" },
-        }}
-      >
-        {props.showZoomButtons && (
-          <>
-            <Button sx={{ ...buttonStyle }} onClick={zoomIn}>
-              <ControlPointIcon sx={{ ...iconStyle }} />
-            </Button>
-            <Button sx={{ ...buttonStyle }} onClick={zoomOut}>
-              <RemoveCircleOutlineIcon sx={{ ...iconStyle }} />
-            </Button>
-          </>
-        )}
-      </ButtonGroup>
-      {props.children &&
-        React.cloneElement(props.children, {
-          sx: { ...buttonStyle },
-        })}
-    </Box>
-  );
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+
+	const [pitch, setPitch] = useState(0);
+	const mediaIsMobile = useMediaQuery("(max-width:900px)");
+	const buttonStyle = {
+		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.4em" : "1.2em",
+		":hover": {
+			backgroundColor: "#515151",
+		},
+		color: "#ececec",
+	};
+	const iconStyle = {
+		fontSize: buttonStyle.fontSize,
+	};
+
+	useEffect(() => {
+		if (!mapHook.map) return;
+
+		mapHook.map.on(
+			"pitchend",
+			() => {
+				if (!mapHook.map) return;
+
+				setPitch(mapHook.map.map.getPitch());
+			},
+			mapHook.componentId
+		);
+		setPitch(mapHook.map.map.getPitch());
+	}, [mapHook.map, props.mapId]);
+
+	const zoomIn = () => {
+		if (!mapHook.map) return;
+
+		if (mapHook.map.map.transform._zoom + 0.5 <= mapHook.map.map.transform._maxZoom) {
+			mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom + 0.5 });
+		}
+	};
+
+	const zoomOut = () => {
+		if (!mapHook.map) return;
+
+		if (mapHook.map.map.transform._zoom - 0.5 >= mapHook.map.map.transform._minZoom) {
+			mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom - 0.5 });
+		}
+	};
+
+	const adjustPitch = () => {
+		if (!mapHook.map) return;
+
+		let targetPitch = 60;
+		if (mapHook.map.map.getPitch() !== 0) {
+			targetPitch = 0;
+		}
+		mapHook.map.map.easeTo({ pitch: targetPitch });
+	};
+
+	return (
+		<Box
+			sx={{
+				zIndex: 501,
+				position: "absolute",
+				display: "flex",
+				flexDirection: "column",
+				...(mediaIsMobile ? { margin: "20px 10px 20px 10px" } : {}),
+				...props.sx,
+			}}
+		>
+			<MlNavigationCompass
+				style={{
+					width: "31px",
+					position: "relative",
+					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)",
+				}}
+			/>
+			{props.show3DButton && (
+				<Button
+					sx={{ ...buttonStyle, fontSize: mediaIsMobile ? "1.4em" : "1em", fontWeight: 600 }}
+					onClick={adjustPitch}
+				>
+					{pitch ? "2D" : "3D"}
+				</Button>
+			)}
+			{props.showFollowGpsButton && (
+				<MlFollowGps buttonSx={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
+			)}
+			{props.showCenterLocationButton && (
+				<MlCenterPosition style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
+			)}
+			<ButtonGroup
+				orientation="vertical"
+				sx={{
+					width: "50px",
+					border: "none",
+					Button: { minWidth: "20px !important", border: "none", padding: 0 },
+					"Button:hover": { border: "none" },
+				}}
+			>
+				{props.showZoomButtons && (
+					<>
+						<Button sx={{ ...buttonStyle }} onClick={zoomIn}>
+							<ControlPointIcon sx={{ ...iconStyle }} />
+						</Button>
+						<Button sx={{ ...buttonStyle }} onClick={zoomOut}>
+							<RemoveCircleOutlineIcon sx={{ ...iconStyle }} />
+						</Button>
+					</>
+				)}
+			</ButtonGroup>
+			{props.children &&
+				React.cloneElement(props.children, {
+					sx: { ...buttonStyle },
+				})}
+		</Box>
+	);
 };
 
 MlNavigationTools.defaultProps = {
-  mapId: undefined,
-  show3DButton: true,
-  showFollowGpsButton: true,
-  showCenterLocationButton: false,
-  showZoomButtons: true,
-  sx: {
-    right: "5px",
-    bottom: "20px",
-  },
+	mapId: undefined,
+	show3DButton: true,
+	showFollowGpsButton: true,
+	showCenterLocationButton: false,
+	showZoomButtons: true,
+	sx: {
+		right: "5px",
+		bottom: "20px",
+	},
 };
 
 export default MlNavigationTools;

package/src/components/MlOsmLayer/MlOsmLayer.js

@@ -10,62 +10,62 @@ import useMap from "../../hooks/useMap";
  * @component
  */
 const MlOsmLayer = (props) => {
-  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+	const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
 
-  const layerId = useRef(props.layerId || "MlOsmLayer-" + mapHook.componentId);
+	const layerId = useRef(props.layerId || "MlOsmLayer-" + mapHook.componentId);
 
-  useEffect(() => {
-    if (!mapHook.map) return;
+	useEffect(() => {
+		if (!mapHook.map) return;
 
-    mapHook.map.addSource(
-      layerId.current,
-      {
-        type: "raster",
-        tileSize: 256,
-        ...props.sourceOptions,
-      },
-      mapHook.componentId
-    );
-    mapHook.map.addLayer(
-      {
-        id: layerId.current,
-        type: "raster",
-        source: layerId.current,
-        minzoom: 0,
-        maxzoom: 22,
-        ...props.layerOptions,
-      },
-      props.insertBeforeLayer,
-      mapHook.componentId
-    );
-  }, [props, mapHook.map]);
+		mapHook.map.addSource(
+			layerId.current,
+			{
+				type: "raster",
+				tileSize: 256,
+				...props.sourceOptions,
+			},
+			mapHook.componentId
+		);
+		mapHook.map.addLayer(
+			{
+				id: layerId.current,
+				type: "raster",
+				source: layerId.current,
+				minzoom: 0,
+				maxzoom: 22,
+				...props.layerOptions,
+			},
+			props.insertBeforeLayer,
+			mapHook.componentId
+		);
+	}, [props, mapHook.map]);
 
-  return <></>;
+	return <></>;
 };
 
 MlOsmLayer.propTypes = {
-  /**
-   * Id of the target MapLibre instance in mapHook
-   */
-  mapId: PropTypes.string,
-  /**
-   * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
-   */
-  idPrefix: PropTypes.string,
-  /**
-   * Options object that will be used as first parameter on the MapLibreGl.addSource call see MapLibre source options documentation.
-   */
-  sourceOptions: PropTypes.object,
-  /**
-   * Options object that will be used as first parameter on the MapLibreGl.addLayer call see MapLibre layer options documentation.
-   *
-   */
-  layerOptions: PropTypes.object,
-  /**
-   * 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,
+	/**
+	 * Id of the target MapLibre instance in mapHook
+	 */
+	mapId: PropTypes.string,
+	/**
+	 * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
+	 */
+	idPrefix: PropTypes.string,
+	/**
+	 * Options object that will be used as first parameter on the MapLibreGl.addSource call see MapLibre source options documentation.
+	 */
+	sourceOptions: PropTypes.object,
+	/**
+	 * Options object that will be used as first parameter on the MapLibreGl.addLayer call see MapLibre layer options documentation.
+	 *
+	 */
+	layerOptions: PropTypes.object,
+	/**
+	 * 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 default MlOsmLayer;

package/src/components/MlOsmLayer/MlOsmLayer.stories_.js

@@ -7,43 +7,43 @@ import Button from "@mui/material/Button";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 
 const storyoptions = {
-  title: "MapComponents/MlOsmLayer",
-  component: MlOsmLayer,
-  argTypes: {
-    options: {
-      control: {
-        type: "object",
-      },
-    },
-  },
-  decorators: mapContextDecorator,
+	title: "MapComponents/MlOsmLayer",
+	component: MlOsmLayer,
+	argTypes: {
+		options: {
+			control: {
+				type: "object",
+			},
+		},
+	},
+	decorators: mapContextDecorator,
 };
 export default storyoptions;
 
 const Template = (props) => {
-  const [showLayer, setShowLayer] = useState(true);
+	const [showLayer, setShowLayer] = useState(true);
 
-  return (
-    <TopToolbar>
-      <Button
-        color="primary"
-        variant={showLayer ? "contained" : "outlined"}
-        onClick={() => setShowLayer(!showLayer)}
-      >
-        OSM
-      </Button>
-      {showLayer && <MlOsmLayer {...props} />}
-    </TopToolbar>
-  );
+	return (
+		<TopToolbar>
+			<Button
+				color="primary"
+				variant={showLayer ? "contained" : "outlined"}
+				onClick={() => setShowLayer(!showLayer)}
+			>
+				OSM
+			</Button>
+			{showLayer && <MlOsmLayer {...props} />}
+		</TopToolbar>
+	);
 };
 
 // <MapLibreMap options={args.options} />
 export const ExampleConfig = Template.bind({});
 ExampleConfig.args = {
-  sourceOptions: {
-    tiles: ["https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg"],
-    attribution:
-      'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>',
-  },
-  layerOptions: {},
+	sourceOptions: {
+		tiles: ["https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg"],
+		attribution:
+			'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>',
+	},
+	layerOptions: {},
 };

package/src/components/MlOsmLayer/MlOsmLayer.test.js

@@ -6,14 +6,14 @@ import { uuid_regex } from "../../setupTests";
 const testComponent = <MlOsmLayer />;
 
 layerRemovalTest(
-  "<MlOsmLayer />",
-  testComponent,
-  new RegExp('^.*"MlOsmLayer-' + uuid_regex + '".*$'),
-  "MlOsmLayer-{uuid}"
+	"<MlOsmLayer />",
+	testComponent,
+	new RegExp('^.*"MlOsmLayer-' + uuid_regex + '".*$'),
+	"MlOsmLayer-{uuid}"
 );
 sourceRemovalTest(
-  "<MlOsmLayer />",
-  testComponent,
-  new RegExp('^.*"MlOsmLayer-' + uuid_regex + '".*$'),
-  "MlOsmLayer-{uuid}"
+	"<MlOsmLayer />",
+	testComponent,
+	new RegExp('^.*"MlOsmLayer-' + uuid_regex + '".*$'),
+	"MlOsmLayer-{uuid}"
 );