@mapcomponents/react-maplibre 0.1.57 → 0.1.59

package/src/ui_components/ImageLoader.js

@@ -5,74 +5,74 @@ import CircularProgress from '@mui/material/CircularProgress';
 import ErrorIcon from '@mui/icons-material/Error';
 import { Box } from "@mui/system";
 const ImageLoader = (props) => {
-  const [state, setState] = useState("loading");
+	const [state, setState] = useState("loading");
 
-  useEffect(() => {
-    if (!props.src) {
-      setState("error");
-      return;
-    }
-    fetch(props.src)
-      .then(({ ok }) => {
-        if (ok) {
-          setState("ready");
-        } else {
-          setState("error");
-        }
-      })
-      .catch((e) => {
-        console.error(e);
-        setState("error");
-      });
-  }, [props.src]);
+	useEffect(() => {
+		if (!props.src) {
+			setState("error");
+			return;
+		}
+		fetch(props.src)
+			.then(({ ok }) => {
+				if (ok) {
+					setState("ready");
+				} else {
+					setState("error");
+				}
+			})
+			.catch((e) => {
+				console.error(e);
+				setState("error");
+			});
+	}, [props.src]);
 
-  const boxStyle = {
-    width: "100%",
-    height: "100%",
-    border: 2,
-    borderRadius: "8px",
-    textAlign: "center",
-    display: "flex",
-  };
+	const boxStyle = {
+		width: "100%",
+		height: "100%",
+		border: 2,
+		borderRadius: "8px",
+		textAlign: "center",
+		display: "flex",
+	};
 
-  const LoadingImage = () => {
-    return (
-      <Box className={props.className} sx={{ ...boxStyle, ...props.style }}>
-        <CircularProgress />
-      </Box>
-    );
-  };
+	const LoadingImage = () => {
+		return (
+			<Box className={props.className} sx={{ ...boxStyle, ...props.style }}>
+				<CircularProgress />
+			</Box>
+		);
+	};
 
-  const ReadyImage = () => {
-    return (
-      <img
-        className={props.className}
-        style={{ ...boxStyle, ...props.style }}
-        src={props.src}
-        alt={props.alt || ""}
-      />
-    );
-  };
-  const ErrorImage = () => {
-    return (
-      <Box className={props.className} sx={{ boxStyle, ...props.style }}>
-        <ErrorIcon sx={{ display: "block", margin: "auto" }} />
-      </Box>
-    );
-  };
+	const ReadyImage = () => {
+		return (
+			<img
+				className={props.className}
+				style={{ ...boxStyle, ...props.style }}
+				src={props.src}
+				alt={props.alt || ""}
+			/>
+		);
+	};
+	const ErrorImage = () => {
+		return (
+			<Box className={props.className} sx={{ boxStyle, ...props.style }}>
+				<ErrorIcon sx={{ display: "block", margin: "auto" }} />
+			</Box>
+		);
+	};
 
-  const renderImage = (state) => {
-    switch (state) {
-      case "ready":
-        return <ReadyImage />;
-      case "error":
-        return <ErrorImage />;
-      default:
-        return <LoadingImage />;
-    }
-  };
+	const renderImage = (state) => {
+		switch (state) {
+			case "ready":
+				return <ReadyImage />;
+			case "error":
+				return <ErrorImage />;
+			default:
+				return <LoadingImage />;
+		}
+	};
 
-  return <>{renderImage(state)}</>;
+	return <>{renderImage(state)}</>;
 };
 
 export default ImageLoader

package/src/ui_components/Legend.js

@@ -3,42 +3,42 @@ import makeStyles from '@mui/styles/makeStyles';
 import Drawer from "@mui/material/Drawer";
 
 const useStyles = makeStyles(() => ({
-  drawer: {
-    boxShadow: "0px 2px 3px 2px rgb(0,0,0, .4)",
-    flexGrow: 1,
-    zIndex: 110,
-    position: "absolute",
-    top: "100px",
-    left: 0,
-    height: "275px",
-    backgroundColor: "#aecaec",
-  },
-  drawerPaper: {
-    position: "static",
-    display: "flex",
-    alignItems: "stretch",
-    alignContent: "stretch",
-    flexDirection: "column",
-    padding: "10px 10px 10px 10px",
-    boxSizing: "border-box",
-    minWidth: "170px",
-  },
+	drawer: {
+		boxShadow: "0px 2px 3px 2px rgb(0,0,0, .4)",
+		flexGrow: 1,
+		zIndex: 110,
+		position: "absolute",
+		top: "100px",
+		left: 0,
+		height: "275px",
+		backgroundColor: "#aecaec",
+	},
+	drawerPaper: {
+		position: "static",
+		display: "flex",
+		alignItems: "stretch",
+		alignContent: "stretch",
+		flexDirection: "column",
+		padding: "10px 10px 10px 10px",
+		boxSizing: "border-box",
+		minWidth: "170px",
+	},
 }));
 
 export default function Legend(props) {
-  const classes = useStyles();
+	const classes = useStyles();
 
-  return (
-    <Drawer
-      className={classes.drawer}
-      variant="persistent"
-      anchor={"left"}
-      open={true}
-      classes={{
-        paper: classes.drawerPaper,
-      }}
-    >
-      {props.children}
-    </Drawer>
-  );
+	return (
+		<Drawer
+			className={classes.drawer}
+			variant="persistent"
+			anchor={"left"}
+			open={true}
+			classes={{
+				paper: classes.drawerPaper,
+			}}
+		>
+			{props.children}
+		</Drawer>
+	);
 }

package/src/ui_components/LoadingOverlay.js

@@ -6,36 +6,36 @@ import FadeLoader from "react-spinners/FadeLoader";
 import "./LoadingOverlay.css";
 
 function LoadingOverlay() {
-  const loadingOverlayContext = useContext(LoadingOverlayContext);
-  let { fadeoutAnimation, visible } = loadingOverlayContext;
+	const loadingOverlayContext = useContext(LoadingOverlayContext);
+	let { fadeoutAnimation, visible } = loadingOverlayContext;
 
-  return (
-    <div
-      className={
-        fadeoutAnimation ? "loadingOverlay-fadeout" : "loadingOverlay-fadein"
-      }
-      style={{
-        position: "fixed",
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        backgroundColor: "#000",
-        zIndex: 1000000,
-        overflow: "hidden",
-        display: visible ? "flex" : "none",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <FadeLoader
-        color={"#ababab"}
-        loading={visible}
-        css={{ display: "block", borderColor: "red" }}
-        size={50}
-      />
-    </div>
-  );
+	return (
+		<div
+			className={
+				fadeoutAnimation ? "loadingOverlay-fadeout" : "loadingOverlay-fadein"
+			}
+			style={{
+				position: "fixed",
+				top: 0,
+				left: 0,
+				bottom: 0,
+				right: 0,
+				backgroundColor: "#000",
+				zIndex: 1000000,
+				overflow: "hidden",
+				display: visible ? "flex" : "none",
+				alignItems: "center",
+				justifyContent: "center",
+			}}
+		>
+			<FadeLoader
+				color={"#ababab"}
+				loading={visible}
+				css={{ display: "block", borderColor: "red" }}
+				size={50}
+			/>
+		</div>
+	);
 }
 
 export default LoadingOverlay;

package/src/ui_components/LoadingOverlayContext.js

@@ -6,77 +6,77 @@ const LoadingOverlayContext = React.createContext({});
 const LoadingOverlayContextProvider = LoadingOverlayContext.Provider;
 
 const LoadingOverlayProvider = ({ children }) => {
-  const mapContext = useContext(MapContext);
-
-  const [controlled, setControlled] = useState(false);
-  const [loadingDone, setLoadingDone] = useState(false);
-  const [visible, setVisible] = useState(true);
-  const [fadeoutAnimation, setFadeoutAnimation] = useState(false);
-  const mapJobsRef = useRef({});
-  const [checkIdleTrigger, setCheckIdleTrigger] = useState(0);
-
-  const createOnMapIdleFunction = (mapId) => () => {
-    mapJobsRef.current[mapId] = true;
-    setCheckIdleTrigger(Math.random());
-  };
-
-  const fadeOut = () => {
-    // add another setTimeout as MapLibre appear to fire idle before all tiles have rendered
-    setTimeout(() => {
-      setFadeoutAnimation(true);
-      setTimeout(() => {
-        setVisible(false);
-      }, 1700);
-    }, 900);
-  };
-
-  useEffect(() => {
-    if (!mapContext.map || controlled) return;
-
-    for (var key in mapJobsRef.current) {
-      if (!mapJobsRef.current[key]) return;
-    }
-
-    fadeOut();
-  }, [checkIdleTrigger, controlled, mapContext]);
-
-  useEffect(() => {
-    for (var i = 0, len = mapContext.mapIds.length; i < len; i++) {
-      if (Object.keys(mapJobsRef.current).indexOf(mapContext.mapIds[i]) === -1) {
-        let mapId = mapContext.mapIds[i] + "";
-
-        if (mapContext.getMap(mapId)) {
-          mapJobsRef.current[mapId] = false;
-
-          mapContext.getMap(mapId).on("idle", createOnMapIdleFunction(mapId));
-        }
-      }
-    }
-  }, [mapContext, mapContext.mapIds]);
-
-  useEffect(() => {
-    if (loadingDone) {
-      fadeOut();
-    }
-  }, [loadingDone]);
-
-  const value = {
-    setControlled,
-    controlled,
-    visible,
-    fadeoutAnimation,
-    setLoadingDone,
-  };
-
-  return (
-    <LoadingOverlayContextProvider value={value}>
-      {children}
-    </LoadingOverlayContextProvider>
-  );
+	const mapContext = useContext(MapContext);
+
+	const [controlled, setControlled] = useState(false);
+	const [loadingDone, setLoadingDone] = useState(false);
+	const [visible, setVisible] = useState(true);
+	const [fadeoutAnimation, setFadeoutAnimation] = useState(false);
+	const mapJobsRef = useRef({});
+	const [checkIdleTrigger, setCheckIdleTrigger] = useState(0);
+
+	const createOnMapIdleFunction = (mapId) => () => {
+		mapJobsRef.current[mapId] = true;
+		setCheckIdleTrigger(Math.random());
+	};
+
+	const fadeOut = () => {
+		// add another setTimeout as MapLibre appear to fire idle before all tiles have rendered
+		setTimeout(() => {
+			setFadeoutAnimation(true);
+			setTimeout(() => {
+				setVisible(false);
+			}, 1700);
+		}, 900);
+	};
+
+	useEffect(() => {
+		if (!mapContext.map || controlled) return;
+
+		for (var key in mapJobsRef.current) {
+			if (!mapJobsRef.current[key]) return;
+		}
+
+		fadeOut();
+	}, [checkIdleTrigger, controlled, mapContext]);
+
+	useEffect(() => {
+		for (var i = 0, len = mapContext.mapIds.length; i < len; i++) {
+			if (Object.keys(mapJobsRef.current).indexOf(mapContext.mapIds[i]) === -1) {
+				let mapId = mapContext.mapIds[i] + "";
+
+				if (mapContext.getMap(mapId)) {
+					mapJobsRef.current[mapId] = false;
+
+					mapContext.getMap(mapId).on("idle", createOnMapIdleFunction(mapId));
+				}
+			}
+		}
+	}, [mapContext, mapContext.mapIds]);
+
+	useEffect(() => {
+		if (loadingDone) {
+			fadeOut();
+		}
+	}, [loadingDone]);
+
+	const value = {
+		setControlled,
+		controlled,
+		visible,
+		fadeoutAnimation,
+		setLoadingDone,
+	};
+
+	return (
+		<LoadingOverlayContextProvider value={value}>
+			{children}
+		</LoadingOverlayContextProvider>
+	);
 };
 
 LoadingOverlayProvider.propTypes = {
-  children: PropTypes.node.isRequired,
+	children: PropTypes.node.isRequired,
 };
 
 export { LoadingOverlayContext, LoadingOverlayProvider };

package/src/ui_components/Sidebar.js

@@ -8,93 +8,93 @@ import { IconButton } from "@mui/material";
 import useMediaQuery from "@mui/material/useMediaQuery";
 
 const useStyles = makeStyles((theme) => ({
-  drawer: {
-    flexGrow: 1,
-    zIndex: 105,
-    position: "absolute",
-    top: 0,
-    left: 0,
-    bottom: 0,
-    backgroundColor: "#fafafa",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "stretch",
-    alignContent: "stretch",
-  },
-  drawerPaper: {
-    position: "initial !important",
-    boxSizing: "border-box",
-    padding: "40px",
-    visibility: "visible !important",
-    zIndex: "initial !important",
-  },
-  drawerHeader: {
-    alignContent: "flex-start",
-    display: "flex",
-  },
-  drawerContent: {},
+	drawer: {
+		flexGrow: 1,
+		zIndex: 105,
+		position: "absolute",
+		top: 0,
+		left: 0,
+		bottom: 0,
+		backgroundColor: "#fafafa",
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "stretch",
+		alignContent: "stretch",
+	},
+	drawerPaper: {
+		position: "initial !important",
+		boxSizing: "border-box",
+		padding: "40px",
+		visibility: "visible !important",
+		zIndex: "initial !important",
+	},
+	drawerHeader: {
+		alignContent: "flex-start",
+		display: "flex",
+	},
+	drawerContent: {},
 }));
 
 const DrawerHeader = styled("div")(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
+	display: "flex",
+	alignItems: "center",
 }));
 
 export default function Sidebar(props) {
-  const classes = useStyles();
-  const mediaIsMobile = useMediaQuery("(max-width:900px)");
+	const classes = useStyles();
+	const mediaIsMobile = useMediaQuery("(max-width:900px)");
 
-  const [drawerOpen, setDrawerOpen] = useState(true);
+	const [drawerOpen, setDrawerOpen] = useState(true);
 
-  const handleDrawerOpen = () => {
-    setDrawerOpen(true);
-  };
-  const handleDrawerClose = () => {
-    setDrawerOpen(false);
-  };
+	const handleDrawerOpen = () => {
+		setDrawerOpen(true);
+	};
+	const handleDrawerClose = () => {
+		setDrawerOpen(false);
+	};
 
-  return (
-    <>
-      <IconButton
-        onClick={handleDrawerOpen}
-        style={{
-          zIndex: 101,
-          position: "relative",
-          padding: "20px",
-        }}
-      >
-        <MenuIcon />
-      </IconButton>
-      <Drawer
-        transitionDuration={0}
-        className={classes.drawer}
-        variant="persistent"
-        anchor="left"
-        open={drawerOpen}
-        classes={{
-          paper: classes.drawerPaper,
-        }}
-        sx={{
-          ...props.sx,
-          ...{
-            maxWidth: mediaIsMobile ? "90vw" : "20vw",
-          },
-          ...(drawerOpen ? {} : { left: mediaIsMobile ? "-90vw" : "-20vw" }),
-        }}
-      >
-        <DrawerHeader className={classes.drawerHeader}>
-          <IconButton onClick={handleDrawerClose}>
-            <ChevronLeftIcon
-              style={
-                {
-                  //paddingBottom: "40px",
-                }
-              }
-            />
-          </IconButton>
-        </DrawerHeader>
-        <div style={{ maxWidth: "100%" }}>{props.children}</div>
-      </Drawer>
-    </>
-  );
+	return (
+		<>
+			<IconButton
+				onClick={handleDrawerOpen}
+				style={{
+					zIndex: 101,
+					position: "relative",
+					padding: "20px",
+				}}
+			>
+				<MenuIcon />
+			</IconButton>
+			<Drawer
+				transitionDuration={0}
+				className={classes.drawer}
+				variant="persistent"
+				anchor="left"
+				open={drawerOpen}
+				classes={{
+					paper: classes.drawerPaper,
+				}}
+				sx={{
+					...props.sx,
+					...{
+						maxWidth: mediaIsMobile ? "90vw" : "20vw",
+					},
+					...(drawerOpen ? {} : { left: mediaIsMobile ? "-90vw" : "-20vw" }),
+				}}
+			>
+				<DrawerHeader className={classes.drawerHeader}>
+					<IconButton onClick={handleDrawerClose}>
+						<ChevronLeftIcon
+							style={
+								{
+									//paddingBottom: "40px",
+								}
+							}
+						/>
+					</IconButton>
+				</DrawerHeader>
+				<div style={{ maxWidth: "100%" }}>{props.children}</div>
+			</Drawer>
+		</>
+	);
 }

package/src/ui_components/Tooltip.js

@@ -5,17 +5,17 @@ import Drawer from "@mui/material/Drawer";
 import Divider from "@mui/material/Divider";
 
 const useStyles = makeStyles((theme) => ({
-  tooltip: {
-    position: "fixed",
-    top: "100px",
-    left: "100px",
-    zIndex: 100000,
-  },
+	tooltip: {
+		position: "fixed",
+		top: "100px",
+		left: "100px",
+		zIndex: 100000,
+	},
 }));
 
 export default function Legend(props) {
-  const classes = useStyles();
-  const theme = useTheme();
+	const classes = useStyles();
+	const theme = useTheme();
 
-  return <div className={classes.tooltip}>tooltip</div>;
+	return <div className={classes.tooltip}>tooltip</div>;
 }