@mapcomponents/react-maplibre 0.1.57 → 0.1.58

package/src/components/MlBasicComponent.js

@@ -6,34 +6,34 @@ import MapContext from "../contexts/MapContext";
  * This component is deprecated and will be removed in the next major release
  */
 const MlBasicComponent = (props) => {
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  // without the requirement of adding it to the dependency list (ignore the false eslint exhaustive deps warning)
-  // const layerRef = useRef(null);
-  const mapContext = useContext(MapContext);
+	// Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+	// without the requirement of adding it to the dependency list (ignore the false eslint exhaustive deps warning)
+	// const layerRef = useRef(null);
+	const mapContext = useContext(MapContext);
 
-  useEffect(() => {
-    if (!mapContext.mapExists()) return;
-    return () => {
-      // This is the cleanup function, it is called when this react component is removed from react-dom
-      // try to remove anything this component has added to the MapLibre-gl instance
-      // e.g.: remove the layer
-      // mapContext.map.removeLayer(layerRef.current);
-      if (typeof props.cleanup === "function") {
-        props.cleanup(mapContext.getMap(props.mapId));
-      }
-    };
-  });
+	useEffect(() => {
+		if (!mapContext.mapExists()) return;
+		return () => {
+			// This is the cleanup function, it is called when this react component is removed from react-dom
+			// try to remove anything this component has added to the MapLibre-gl instance
+			// e.g.: remove the layer
+			// mapContext.map.removeLayer(layerRef.current);
+			if (typeof props.cleanup === "function") {
+				props.cleanup(mapContext.getMap(props.mapId));
+			}
+		};
+	});
 
-  useEffect(() => {
-    if (!mapContext.mapExists(props.mapId)) return;
-    // the MapLibre-gl instance (mapContext.map) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance
-    if (typeof props.mapIsReady === "function") {
-      props.mapIsReady(mapContext.getMap(props.mapId));
-    }
-  }, [mapContext.mapIds, mapContext, props]);
+	useEffect(() => {
+		if (!mapContext.mapExists(props.mapId)) return;
+		// the MapLibre-gl instance (mapContext.map) is accessible here
+		// initialize the layer and add it to the MapLibre-gl instance
+		if (typeof props.mapIsReady === "function") {
+			props.mapIsReady(mapContext.getMap(props.mapId));
+		}
+	}, [mapContext.mapIds, mapContext, props]);
 
-  return <></>;
+	return <></>;
 };
 
 export default MlBasicComponent;

package/src/components/MlCenterPosition/MlCenterPosition.stories.js

@@ -5,12 +5,12 @@ import MlCenterPosition from "./MlCenterPosition";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 
 const storyoptions = {
-  title: "MapComponents/MlCenterPosition",
-  component: MlCenterPosition,
-  argTypes: {
-  },
-  decorators: mapContextDecorator,
-  parameters: { docs: { source: { type: 'code' } } }
+	title: "MapComponents/MlCenterPosition",
+	component: MlCenterPosition,
+	argTypes: {
+	},
+	decorators: mapContextDecorator,
+	parameters: { docs: { source: { type: 'code' } } }
 };
 export default storyoptions;
 

package/src/components/MlCenterPosition/MlCenterPosition.tsx

@@ -1,30 +1,30 @@
 import React, { useState, useCallback } from "react";
 import useMap from "../../hooks/useMap";
 import { Button } from "@mui/material";
-import  GpsFixedIcon  from "@mui/icons-material/GpsFixed";
+import	GpsFixedIcon	from "@mui/icons-material/GpsFixed";
 
 interface MlCenterPositionProps {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId?: string;
-  /**
-   * Id of an existing layer in the mapLibre instance to help specify the layer order
-   * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
-   */
-  insertBeforeLayer?: string;
-  /**
-   * Active button font color
-   */
-  onColor?: string;
-  /**
-   * Inactive button font color
-   */
-  offColor?: string;
-  /**
-   * CSS style object that is applied to the button component
-   */
-  style?: any;
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * Id of an existing layer in the mapLibre instance to help specify the layer order
+	 * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
+	 */
+	insertBeforeLayer?: string;
+	/**
+	 * Active button font color
+	 */
+	onColor?: string;
+	/**
+	 * Inactive button font color
+	 */
+	offColor?: string;
+	/**
+	 * CSS style object that is applied to the button component
+	 */
+	style?: any;
 }
 
 /**
@@ -32,55 +32,55 @@ interface MlCenterPositionProps {
  *
  */
 const MlCenterPosition = (props: MlCenterPositionProps) => {
-  const mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer,
-  });
-  const [locationAccessDenied, setLocationAccessDenied] = useState(false);
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+	const [locationAccessDenied, setLocationAccessDenied] = useState(false);
 
-  const centerCurrentLocation = () => {
-    navigator.geolocation.getCurrentPosition(getLocationSuccess, getLocationError);
-  };
+	const centerCurrentLocation = () => {
+		navigator.geolocation.getCurrentPosition(getLocationSuccess, getLocationError);
+	};
 
-  const getLocationSuccess = useCallback((location) => {
-    mapHook.map?.map.setCenter?.([location.coords.longitude, location.coords.latitude]);
-  }, [mapHook.map]);
+	const getLocationSuccess = useCallback((location) => {
+		mapHook.map?.map.setCenter?.([location.coords.longitude, location.coords.latitude]);
+	}, [mapHook.map]);
 
-  const getLocationError = () => {
-    console.log("Access of user location denied");
-    setLocationAccessDenied(true);
-  };
-  return <>
-      <Button 
-        sx={{
-          zIndex: 1002,
-          color: !locationAccessDenied ? props.onColor : props.offColor,
-          ...props.style,
-        }}
-       onClick={centerCurrentLocation} disabled={locationAccessDenied}>
-        <GpsFixedIcon sx={{ ...(props.style?.fontSize?{fontSize: props.style?.fontSize}:{}) }} />{" "}
-      </Button>
-  </>;
+	const getLocationError = () => {
+		console.log("Access of user location denied");
+		setLocationAccessDenied(true);
+	};
+	return <>
+			<Button 
+				sx={{
+					zIndex: 1002,
+					color: !locationAccessDenied ? props.onColor : props.offColor,
+					...props.style,
+				}}
+			 onClick={centerCurrentLocation} disabled={locationAccessDenied}>
+				<GpsFixedIcon sx={{ ...(props.style?.fontSize?{fontSize: props.style?.fontSize}:{}) }} />{" "}
+			</Button>
+	</>;
 
 };
 
 MlCenterPosition.defaultProps = {
-  mapId: undefined,
-  style: {
-    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",
+	mapId: undefined,
+	style: {
+		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",
 };
 export default MlCenterPosition;

package/src/components/MlComponentTemplate/MlComponentTemplate.stories.js

@@ -5,11 +5,11 @@ import MlComponentTemplate from "./MlComponentTemplate";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 
 const storyoptions = {
-  title: "MapComponents/MlComponentTemplate",
-  component: MlComponentTemplate,
-  argTypes: {
-  },
-  decorators: mapContextDecorator,
+	title: "MapComponents/MlComponentTemplate",
+	component: MlComponentTemplate,
+	argTypes: {
+	},
+	decorators: mapContextDecorator,
 };
 export default storyoptions;
 

package/src/components/MlComponentTemplate/MlComponentTemplate.tsx

@@ -2,15 +2,15 @@ import React, { useRef, useEffect } from "react";
 import useMap from "../../hooks/useMap";
 
 interface MlComponentTemplateProps {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId?: string;
-  /**
-   * Id of an existing layer in the mapLibre instance to help specify the layer order
-   * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
-   */
-  insertBeforeLayer?: string;
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * Id of an existing layer in the mapLibre instance to help specify the layer order
+	 * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
+	 */
+	insertBeforeLayer?: string;
 }
 
 /**
@@ -18,25 +18,25 @@ interface MlComponentTemplateProps {
  *
  */
 const MlComponentTemplate = (props: MlComponentTemplateProps) => {
-  const mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer,
-  });
-  const initializedRef = useRef(false);
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+	const initializedRef = useRef(false);
 
-  useEffect(() => {
-    if (!mapHook.map || initializedRef.current) return;
-    // the MapLibre-gl instance (mapHook.map) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-    initializedRef.current = true;
+	useEffect(() => {
+		if (!mapHook.map || initializedRef.current) return;
+		// the MapLibre-gl instance (mapHook.map) is accessible here
+		// initialize the layer and add it to the MapLibre-gl instance or do something else with it
+		initializedRef.current = true;
 
-    mapHook.map.map.setCenter([7.132122000552613, 50.716405378037706]);
-  }, [mapHook.map, props.mapId]);
+		mapHook.map.map.setCenter([7.132122000552613, 50.716405378037706]);
+	}, [mapHook.map, props.mapId]);
 
-  return <></>;
+	return <></>;
 };
 
 MlComponentTemplate.defaultProps = {
-  mapId: undefined,
+	mapId: undefined,
 };
 export default MlComponentTemplate;

package/src/components/MlCreatePdfButton/MlCreatePdfButton.stories.js

@@ -7,29 +7,29 @@ import TopToolbar from "../../ui_components/TopToolbar";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 
 const storyoptions = {
-  title: "MapComponents/MlCreatePdfButton",
-  component: MlCreatePdfButton,
-  argTypes: {
-  },
-  decorators: mapContextDecorator,
+	title: "MapComponents/MlCreatePdfButton",
+	component: MlCreatePdfButton,
+	argTypes: {
+	},
+	decorators: mapContextDecorator,
 };
 export default storyoptions;
 
 const Template = (args) => (
-  <TopToolbar>
-    <MlCreatePdfButton />
-  </TopToolbar>
+	<TopToolbar>
+		<MlCreatePdfButton />
+	</TopToolbar>
 );
 
 // <MapLibreMap options={args.options} />
 export const ExampleConfig = Template.bind({});
 //ExampleConfig.args = {
-//  //  options: {
-//  //    style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-//  //    center: [8.607, 53.1409349],
-//  //    maxBounds: [
-//  //      [1.40625, 43.452919],
-//  //      [17.797852, 55.973798],
-//  //    ],
-//  //  },
+//	//	options: {
+//	//		style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+//	//		center: [8.607, 53.1409349],
+//	//		maxBounds: [
+//	//			[1.40625, 43.452919],
+//	//			[17.797852, 55.973798],
+//	//		],
+//	//	},
 //};

package/src/components/MlCreatePdfButton/MlCreatePdfButton.tsx

@@ -7,45 +7,45 @@ import PrinterIcon from "@mui/icons-material/Print";
 import Button from "@mui/material/Button";
 
 interface MlCreatePdfButtonProps {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId?: string;
-  /**
-   * Id of an existing layer in the mapLibre instance to help specify the layer order
-   * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
-   */
-  insertBeforeLayer?: string;
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId?: string;
+	/**
+	 * Id of an existing layer in the mapLibre instance to help specify the layer order
+	 * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
+	 */
+	insertBeforeLayer?: string;
 }
 
 /**
  * Renders a button that will create a PDF version of the current map view (dimensions adjusted to fit Din A4 Paper).
  */
 const MlCreatePdfButton = (props: MlCreatePdfButtonProps) => {
-  const mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer,
-  });
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
 
-  return (
-    <>
-      <Button
-        color="primary"
-        variant="contained"
-        onClick={() => {
-          if (mapHook.map) {
-            createPdf(mapHook.map, null, () => {});
-          }
-        }}
-      >
-        <PrinterIcon />
-      </Button>
-    </>
-  );
+	return (
+		<>
+			<Button
+				color="primary"
+				variant="contained"
+				onClick={() => {
+					if (mapHook.map) {
+						createPdf(mapHook.map, null, () => {});
+					}
+				}}
+			>
+				<PrinterIcon />
+			</Button>
+		</>
+	);
 };
 
 MlCreatePdfButton.defaultProps = {
-  mapId: undefined,
+	mapId: undefined,
 };
 
 export default MlCreatePdfButton;