@mapcomponents/react-maplibre 0.1.56 → 0.1.58

package/src/components/MlLayerSwitcher/components/LayerBox.js

@@ -9,66 +9,66 @@ import useMapState from "../../../hooks/useMapState";
  *
  */
 const LayerBox = (props) => {
-  const { layers } = useMapState({
-    mapId: props.mapId,
-    watch: {
-      viewport: false,
-      layers: true,
-      sources: false,
-    },
-    filter: {
-      matchLayerIds: props.layerId,
-    },
-  });
-  const width = "40px";
+	const { layers } = useMapState({
+		mapId: props.mapId,
+		watch: {
+			viewport: false,
+			layers: true,
+			sources: false,
+		},
+		filter: {
+			matchLayerIds: props.layerId,
+		},
+	});
+	const width = "40px";
 
-  const defaultClass = css`
-    & img:hover {
-    }
-  `;
+	const defaultClass = css`
+		& img:hover {
+		}
+	`;
 
-  return (
-    <>
-      <Box
-        key={props.layerId}
-        className={defaultClass}
-        sx={{
-          width,
-          height: "53px",
-          justifyContent: "center",
-          py: 0.25,
-          px: "1rem",
-          cursor: "pointer",
-        }}
-        onClick={() => {
-          props?.handleLayerBoxClick?.(props.layerId);
-        }}
-      >
-        <ImageLoader
-          style={{
-            border: "2px solid " + (layers?.[0]?.visible ? "#64c864" : "#fd720f"),
-            borderRadius: "8px",
-            height: "40px",
-            width: "40px",
-          }}
-          src={props.thumbnail}
-        />
+	return (
+		<>
+			<Box
+				key={props.layerId}
+				className={defaultClass}
+				sx={{
+					width,
+					height: "53px",
+					justifyContent: "center",
+					py: 0.25,
+					px: "1rem",
+					cursor: "pointer",
+				}}
+				onClick={() => {
+					props?.handleLayerBoxClick?.(props.layerId);
+				}}
+			>
+				<ImageLoader
+					style={{
+						border: "2px solid " + (layers?.[0]?.visible ? "#64c864" : "#fd720f"),
+						borderRadius: "8px",
+						height: "40px",
+						width: "40px",
+					}}
+					src={props.thumbnail}
+				/>
 
-        <div
-          className="mllayerswitcher-layer-text"
-          style={{
-            textAlign: "center",
-            color: "rgb(112, 117, 122)",
-            fontFamily: "Roboto, Arial",
-            width,
-            fontSize: "0.60rem",
-          }}
-        >
-          {props.label}
-        </div>
-      </Box>
-    </>
-  );
+				<div
+					className="mllayerswitcher-layer-text"
+					style={{
+						textAlign: "center",
+						color: "rgb(112, 117, 122)",
+						fontFamily: "Roboto, Arial",
+						width,
+						fontSize: "0.60rem",
+					}}
+				>
+					{props.label}
+				</div>
+			</Box>
+		</>
+	);
 };
 
 export default LayerBox;

package/src/components/MlMarker/MlMarker.stories.js

@@ -5,9 +5,9 @@ import MlMarker from "./MlMarker";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
 
 const storyoptions = {
-  title: "MapComponents/MlMarker",
-  component: MlMarker,
-  decorators: mapContextDecorator,
+	title: "MapComponents/MlMarker",
+	component: MlMarker,
+	decorators: mapContextDecorator,
 };
 export default storyoptions;
 
@@ -15,8 +15,8 @@ const Template = (args) => <MlMarker {...args}/>;
 
 export const ExampleConfig = Template.bind({});
 ExampleConfig.args = {
-  content: 'WhereGroup',
-  lng: 7.0851268,
-  lat: 50.73884,
-  mapId: 'map_1',
+	content: 'WhereGroup',
+	lng: 7.0851268,
+	lat: 50.73884,
+	mapId: 'map_1',
 };

package/src/components/MlMarker/MlMarker.tsx

@@ -7,134 +7,134 @@ import useMap from "../../hooks/useMap";
 import Point from "@mapbox/point-geometry";
 
 interface MlMarkerProps {
-  /**
-   * 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;
-  /**
-   * Longitude of the marker position
-   */
-  lng: number;
-  /**
-   * Latitude of the marker position
-   */
-  lat: number;
-  /**
-   * Content of the description popup
-   */
-  content?: string;
+	/**
+	 * 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;
+	/**
+	 * Longitude of the marker position
+	 */
+	lng: number;
+	/**
+	 * Latitude of the marker position
+	 */
+	lat: number;
+	/**
+	 * Content of the description popup
+	 */
+	content?: string;
 }
 
 /**
  * Adds a marker to the map and displays the contents of the "content" property in an iframe next to it
  */
 const MlMarker = (props: MlMarkerProps) => {
-  const mapHook = useMap({
-    mapId: props.mapId,
-    waitForLayer: props.insertBeforeLayer,
-  });
-
-  const mapState = useMapState({
-    mapId: props.mapId,
-    watch: { viewport: true },
-  });
-
-  const iframe = useRef<HTMLIFrameElement>(null);
-
-  const [iframeDimensions, setIframeDimensions] = useState({
-    width: "400px",
-    height: "500px",
-  });
-
-  const [markerPixelPos, setMarkerPixelPos] = useState<Point>();
-
-  useEffect(() => {
-    if (!mapHook.map?.map?.project) return;
-
-    const _pixelPos = mapHook.map.map.project([props.lng, props.lat]);
-
-    setMarkerPixelPos(_pixelPos);
-  }, [mapHook.map, props.lng, props.lat, mapState.viewport]);
-
-  useEffect(() => {
-    if (
-      !mapHook.map ||
-      !iframe.current?.contentWindow?.document?.body?.scrollHeight
-    )
-      return;
-
-    let mapHeight = mapHook.map.map._container.clientHeight;
-
-    const _pixelPos = mapHook.map.map.project([props.lng, props.lat]);
-    let pixelToBottom = mapHeight - _pixelPos.y;
-    let iframeHeight =
-      iframe.current?.contentWindow?.document?.body?.scrollHeight;
-    let iframeWidth =
-      iframe.current?.contentWindow?.document?.body?.scrollWidth;
-
-    setIframeDimensions({
-      width: iframeWidth + "px",
-      height:
-        (pixelToBottom < iframeHeight ? pixelToBottom : iframeHeight) + "px",
-    });
-  }, [props.lng, props.lat, props.content]);
-
-  return (
-    <>
-      <MlGeoJsonLayer
-        geojson={{
-          type: "Feature",
-          geometry: {
-            type: "Point",
-            coordinates: [props.lng, props.lat],
-          },
-          properties: {},
-        }}
-        paint={{
-          "circle-radius": 14,
-          "circle-color": "rgba(40,200,20,0.5)",
-        }}
-        type="circle"
-        mapId={props.mapId}
-      ></MlGeoJsonLayer>
-      {markerPixelPos && (
-        <Paper
-          sx={{
-            opacity: 0.7,
-            position: "fixed",
-            display: "flex",
-            /** TODO: fix positioning delay when moving the map */
-            left: markerPixelPos.x,
-            top: markerPixelPos.y,
-            width: iframeDimensions.width,
-            height: iframeDimensions.height,
-            "&:hover": {
-              opacity: 1,
-            },
-            zIndex: -1,
-          }}
-        >
-          <iframe
-            style={{ width: "100%" }}
-            srcDoc={props.content}
-            ref={iframe}
-            sandbox="allow-same-origin allow-popups-to-escape-sandbox"
-            frameBorder="0"
-            title={mapHook.componentId}
-          ></iframe>
-        </Paper>
-      )}
-    </>
-  );
+	const mapHook = useMap({
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+
+	const mapState = useMapState({
+		mapId: props.mapId,
+		watch: { viewport: true },
+	});
+
+	const iframe = useRef<HTMLIFrameElement>(null);
+
+	const [iframeDimensions, setIframeDimensions] = useState({
+		width: "400px",
+		height: "500px",
+	});
+
+	const [markerPixelPos, setMarkerPixelPos] = useState<Point>();
+
+	useEffect(() => {
+		if (!mapHook.map?.map?.project) return;
+
+		const _pixelPos = mapHook.map.map.project([props.lng, props.lat]);
+
+		setMarkerPixelPos(_pixelPos);
+	}, [mapHook.map, props.lng, props.lat, mapState.viewport]);
+
+	useEffect(() => {
+		if (
+			!mapHook.map ||
+			!iframe.current?.contentWindow?.document?.body?.scrollHeight
+		)
+			return;
+
+		let mapHeight = mapHook.map.map._container.clientHeight;
+
+		const _pixelPos = mapHook.map.map.project([props.lng, props.lat]);
+		let pixelToBottom = mapHeight - _pixelPos.y;
+		let iframeHeight =
+			iframe.current?.contentWindow?.document?.body?.scrollHeight;
+		let iframeWidth =
+			iframe.current?.contentWindow?.document?.body?.scrollWidth;
+
+		setIframeDimensions({
+			width: iframeWidth + "px",
+			height:
+				(pixelToBottom < iframeHeight ? pixelToBottom : iframeHeight) + "px",
+		});
+	}, [props.lng, props.lat, props.content]);
+
+	return (
+		<>
+			<MlGeoJsonLayer
+				geojson={{
+					type: "Feature",
+					geometry: {
+						type: "Point",
+						coordinates: [props.lng, props.lat],
+					},
+					properties: {},
+				}}
+				paint={{
+					"circle-radius": 14,
+					"circle-color": "rgba(40,200,20,0.5)",
+				}}
+				type="circle"
+				mapId={props.mapId}
+			></MlGeoJsonLayer>
+			{markerPixelPos && (
+				<Paper
+					sx={{
+						opacity: 0.7,
+						position: "fixed",
+						display: "flex",
+						/** TODO: fix positioning delay when moving the map */
+						left: markerPixelPos.x,
+						top: markerPixelPos.y,
+						width: iframeDimensions.width,
+						height: iframeDimensions.height,
+						"&:hover": {
+							opacity: 1,
+						},
+						zIndex: -1,
+					}}
+				>
+					<iframe
+						style={{ width: "100%" }}
+						srcDoc={props.content}
+						ref={iframe}
+						sandbox="allow-same-origin allow-popups-to-escape-sandbox"
+						frameBorder="0"
+						title={mapHook.componentId}
+					></iframe>
+				</Paper>
+			)}
+		</>
+	);
 };
 
 MlMarker.defaultProps = {
-  mapId: undefined,
+	mapId: undefined,
 };
 
 export default MlMarker;

package/src/components/MlMeasureTool/MlMeasureTool.stories.js

@@ -10,81 +10,81 @@ import Box from "@mui/material/Box";
 import { MenuItem, Select } from "@mui/material";
 
 const storyoptions = {
-  title: "MapComponents/MlMeasureTool",
-  component: MlMeasureTool,
-  argTypes: {},
-  decorators: mapContextDecorator,
+	title: "MapComponents/MlMeasureTool",
+	component: MlMeasureTool,
+	argTypes: {},
+	decorators: mapContextDecorator,
 };
 export default storyoptions;
 
 const Template = (args) => {
-  const [unit, setUnit] = useState("kilometers");
-  const handleChange = (event) => {
-    setUnit(event.target.value);
-  };
+	const [unit, setUnit] = useState("kilometers");
+	const handleChange = (event) => {
+		setUnit(event.target.value);
+	};
 
-  return (
-    <div style={{ width: "200px", position: "absolute", zIndex: 105 }}>
-      <Select
-        name={"units"}
-        onChange={handleChange}
-        label={"Unit for measurement"}
-        defaultValue={"kilometers"}
-      >
-        <MenuItem value={"kilometers"}>Kilometers</MenuItem>
-        <MenuItem value={"miles"}>Miles</MenuItem>
-      </Select>
-      <Grid
-        container
-        style={{
-          textAlign: "left",
-          alignItems: "center",
-        }}
-      >
-        <SquareFootOutlinedIcon />
-        <h4 style={{ margin: "0px" }}>Measure Polygon</h4>
-      </Grid>
+	return (
+		<div style={{ width: "200px", position: "absolute", zIndex: 105 }}>
+			<Select
+				name={"units"}
+				onChange={handleChange}
+				label={"Unit for measurement"}
+				defaultValue={"kilometers"}
+			>
+				<MenuItem value={"kilometers"}>Kilometers</MenuItem>
+				<MenuItem value={"miles"}>Miles</MenuItem>
+			</Select>
+			<Grid
+				container
+				style={{
+					textAlign: "left",
+					alignItems: "center",
+				}}
+			>
+				<SquareFootOutlinedIcon />
+				<h4 style={{ margin: "0px" }}>Measure Polygon</h4>
+			</Grid>
 
-      <Box m={2} style={{ textAlign: "left" }}>
-        Area: <MlMeasureTool measureType={"polygon"} unit={unit} />
-      </Box>
-    </div>
-  );
+			<Box m={2} style={{ textAlign: "left" }}>
+				Area: <MlMeasureTool measureType={"polygon"} unit={unit} />
+			</Box>
+		</div>
+	);
 };
 
 const LineTemplate = (args) => {
-  const [unit, setUnit] = useState("kilometers");
-  const handleChange = (event) => {
-    setUnit(event.target.value);
-  };
+	const [unit, setUnit] = useState("kilometers");
+	const handleChange = (event) => {
+		setUnit(event.target.value);
+	};
 
-  return (
-    <div style={{ width: "200px", position: "absolute", zIndex: 105 }}>
-      <Select
-        name={"units"}
-        onChange={handleChange}
-        label={"Unit for measurement"}
-        defaultValue={"kilometers"}
-      >
-        <MenuItem value={"kilometers"}> Kilometers</MenuItem>
-        <MenuItem value={"miles"}> Miles</MenuItem>
-      </Select>
-      <Grid
-        container
-        style={{
-          textAlign: "left",
-          alignItems: "center",
-        }}
-      >
-        <StraightenOutlinedIcon />
-        <h4 style={{ margin: "0px" }}>Measure Line</h4>
-      </Grid>
+	return (
+		<div style={{ width: "200px", position: "absolute", zIndex: 105 }}>
+			<Select
+				name={"units"}
+				onChange={handleChange}
+				label={"Unit for measurement"}
+				defaultValue={"kilometers"}
+			>
+				<MenuItem value={"kilometers"}> Kilometers</MenuItem>
+				<MenuItem value={"miles"}> Miles</MenuItem>
+			</Select>
+			<Grid
+				container
+				style={{
+					textAlign: "left",
+					alignItems: "center",
+				}}
+			>
+				<StraightenOutlinedIcon />
+				<h4 style={{ margin: "0px" }}>Measure Line</h4>
+			</Grid>
 
-      <Box m={2} style={{ textAlign: "left" }}>
-        Length: <MlMeasureTool measureType={"line"} unit={unit} />
-      </Box>
-    </div>
-  );
+			<Box m={2} style={{ textAlign: "left" }}>
+				Length: <MlMeasureTool measureType={"line"} unit={unit} />
+			</Box>
+		</div>
+	);
 };
 
 export const MeasureLine = LineTemplate.bind({});

package/src/components/MlMeasureTool/MlMeasureTool.tsx

@@ -3,58 +3,58 @@ import MlFeatureEditor from "../MlFeatureEditor/MlFeatureEditor";
 import * as turf from "@turf/turf";
 
 interface MlMeasureToolProps {
-  /**
-   * String that specify if the Tool measures an area ("polygon") or length ("line")
-   */
-  measureType?: string;
-  /**
-   * String that dictates which unit of measurement is used
-   */
-  unit?: turf.Units;
+	/**
+	 * String that specify if the Tool measures an area ("polygon") or length ("line")
+	 */
+	measureType?: string;
+	/**
+	 * String that dictates which unit of measurement is used
+	 */
+	unit?: turf.Units;
 }
 
 //const unitSquareConvert = {
-//  kilometers: 1,
-//  miles: 1 / 2.58998811,
+//	kilometers: 1,
+//	miles: 1 / 2.58998811,
 //};
 function getUnitSquareMultiplier(measureType:string | undefined) {
-  return measureType === "miles" ? 1 / 2.58998811 : 1;
+	return measureType === "miles" ? 1 / 2.58998811 : 1;
 }
 function getUnitLabel(measureType:string | undefined) {
-  return measureType === "miles" ? 'mi' : 'km';
+	return measureType === "miles" ? 'mi' : 'km';
 }
 
 const MlMeasureTool = (props: MlMeasureToolProps) => {
-  const [length, setLength] = useState(0);
-  const [currentFeatures, setCurrentFeatures] = useState([undefined]);
+	const [length, setLength] = useState(0);
+	const [currentFeatures, setCurrentFeatures] = useState([undefined]);
 
-  useEffect(() => {
-    if (currentFeatures[0]) {
-      setLength(
-        props.measureType === "polygon"
-          ? (turf.area(currentFeatures[0]) / 1000000) * getUnitSquareMultiplier(props.unit)
-          : turf.length(currentFeatures[0], { units: props.unit })
-      );
-    }
-  }, [props.unit, currentFeatures]);
+	useEffect(() => {
+		if (currentFeatures[0]) {
+			setLength(
+				props.measureType === "polygon"
+					? (turf.area(currentFeatures[0]) / 1000000) * getUnitSquareMultiplier(props.unit)
+					: turf.length(currentFeatures[0], { units: props.unit })
+			);
+		}
+	}, [props.unit, currentFeatures]);
 
-  return (
-    <>
-      <MlFeatureEditor
-        onChange={(features:any) => {
-          setCurrentFeatures(features);
-        }}
-        mode={props.measureType === "polygon" ? "custom_polygon" : "draw_line_string"}
-      />
-      {length.toFixed(2)} {getUnitLabel(props.unit)}
-      {props.measureType === "polygon" ? "²" : ""}
-    </>
-  );
+	return (
+		<>
+			<MlFeatureEditor
+				onChange={(features:any) => {
+					setCurrentFeatures(features);
+				}}
+				mode={props.measureType === "polygon" ? "custom_polygon" : "draw_line_string"}
+			/>
+			{length.toFixed(2)} {getUnitLabel(props.unit)}
+			{props.measureType === "polygon" ? "²" : ""}
+		</>
+	);
 };
 
 MlMeasureTool.defaultProps = {
-  mapId: undefined,
-  measureType: "line",
-  unit: "kilometers",
+	mapId: undefined,
+	measureType: "line",
+	unit: "kilometers",
 };
 export default MlMeasureTool;