56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
|
|
import ImageMarker, { MarkerComponentProps } from "react-image-marker";
|
|
import { isMobile } from "react-device-detect";
|
|
import Marker from "./Marker";
|
|
import { markers } from "../../../consts/markers";
|
|
import useMarker from "../../../store/useMarker";
|
|
|
|
const Map = () => {
|
|
const { hoveredMarker } = useMarker();
|
|
const imageMarkers: MarkerComponentProps[] = markers.map((marker) => {
|
|
return {
|
|
top: marker.top,
|
|
left: marker.left,
|
|
itemNumber: marker.itemNumber,
|
|
};
|
|
});
|
|
|
|
return (
|
|
<TransformWrapper
|
|
initialScale={isMobile ? 2 : 1}
|
|
minScale={isMobile ? 2 : 1}
|
|
alignmentAnimation={{ sizeX: 50, sizeY: 50 }}
|
|
wheel={{ step: 2 }}
|
|
// zoomAnimation={{
|
|
// disabled: false,
|
|
// size: 0,
|
|
// animationType: "easeOutQuart",
|
|
// animationTime: 500,
|
|
// }}
|
|
|
|
// velocityAnimation={{
|
|
// sensitivity: 1000,
|
|
// animationTime: 1000,
|
|
// animationType: "easeOut",
|
|
// }}
|
|
>
|
|
<TransformComponent
|
|
wrapperClass={
|
|
"h-[calc(100vh+150px)] w-[calc(100vw+400px)] top-[-50px] left-[-200px]"
|
|
}
|
|
>
|
|
<ImageMarker
|
|
src="images/Map.jpg"
|
|
markers={imageMarkers}
|
|
markerComponent={Marker}
|
|
extraClass={`transition-all duration-300 ease-in-out ${
|
|
hoveredMarker ? "brightness-[.7]" : ""
|
|
}`}
|
|
/>
|
|
</TransformComponent>
|
|
</TransformWrapper>
|
|
);
|
|
};
|
|
|
|
export default Map;
|