search ZoomControl.tsx

0% Statements 0/22
0% Branches 0/2
0% Functions 0/4
0% Lines 0/20
Press n or j to go to the next uncovered block, b, p or k for the previous block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import AddIcon from "@mui/icons-material/Add";
import RemoveIcon from "@mui/icons-material/Remove";
import { Box, IconButton, styled } from "@mui/material";
import React from "react";
import { MapRef } from "react-map-gl/maplibre";
 
import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL } from "./utils/constants";
 
interface ZoomControlProps {
  mapRef: React.RefObject<MapRef>;
  onZoomIn: (newZoom: number) => void;
  onZoomOut: (newZoom: number) => void;
  isZoomFromControlRef: React.MutableRefObject<boolean>;
}
 
const StyledIconButton = styled(IconButton)(({ theme }) => ({
  "&:hover": {
    borderRadius: 2,
  },
}));
 
const ZoomControl = ({
  mapRef,
  onZoomIn,
  onZoomOut,
  isZoomFromControlRef,
}: ZoomControlProps) => {
  const handleZoomIn = () => {
    Iif (mapRef.current) {
      const map = mapRef.current.getMap();
      const currentMapZoom = map.getZoom();
      const newZoom = Math.min(currentMapZoom + 2, MAX_ZOOM_LEVEL);
      onZoomIn(newZoom);
    }
  };
 
  const handleZoomOut = () => {
    Iif (mapRef.current) {
      const map = mapRef.current.getMap();
      const currentMapZoom = map.getZoom();
      const newZoom = Math.max(currentMapZoom - 2, MIN_ZOOM_LEVEL);
      onZoomOut(newZoom);
    }
  };
 
  return (
    <Box
      sx={{
        position: "absolute",
        top: 10,
        right: 10,
        display: "flex",
        flexDirection: "column",
        backgroundColor: "white",
        borderRadius: 2,
        boxShadow: 3,
        zIndex: 2,
      }}
      ref={isZoomFromControlRef}
    >
      <StyledIconButton onClick={handleZoomIn} size="small">
        <AddIcon />
      </StyledIconButton>
      <StyledIconButton onClick={handleZoomOut} size="small">
        <RemoveIcon />
      </StyledIconButton>
    </Box>
  );
};
 
export default ZoomControl;