69 lines
2.0 KiB
TypeScript
69 lines
2.0 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";
|
|
import ZoomControlls from "./ZoomControlls";
|
|
import { Clouds } from "./Clouds";
|
|
import WeatherWidget from "./WeatherWidget";
|
|
|
|
const Map = () => {
|
|
const { hoveredMarker } = useMarker();
|
|
|
|
const imageMarkers: MarkerComponentProps[] = markers.map((marker) => {
|
|
return {
|
|
top: marker.top,
|
|
left: marker.left,
|
|
itemNumber: marker.itemNumber,
|
|
};
|
|
});
|
|
|
|
return (
|
|
<div className="relative">
|
|
<TransformWrapper
|
|
initialScale={isMobile ? 1 : 1}
|
|
minScale={isMobile ? 1 : 1}
|
|
maxScale={2}
|
|
alignmentAnimation={{ sizeX: 50, sizeY: 50 }}
|
|
wheel={{ step: 10000, smoothStep: 0.0005 }}
|
|
zoomAnimation={{
|
|
size: 0,
|
|
animationType: "easeOutQuart",
|
|
animationTime: 500,
|
|
}}
|
|
centerOnInit
|
|
>
|
|
<WeatherWidget />
|
|
{!isMobile && <ZoomControlls />}
|
|
<TransformComponent
|
|
wrapperStyle={{
|
|
width: "calc(100vw + 400px)",
|
|
height: "calc(100vh + 150px)",
|
|
}}
|
|
wrapperClass={"top-[-50px] left-[-200px]"}
|
|
>
|
|
<ImageMarker
|
|
src="images/Map.jpg"
|
|
markers={imageMarkers}
|
|
markerComponent={Clouds}
|
|
extraClass={`transition-all absolute top-0 left-0 duration-300 ease-in-out z-50 ${
|
|
hoveredMarker ? "brightness-[.7]" : ""
|
|
}`}
|
|
/>
|
|
<ImageMarker
|
|
src="images/Map.jpg"
|
|
markers={imageMarkers}
|
|
markerComponent={Marker}
|
|
extraClass={`transition-all duration-300 ease-in-out ${
|
|
hoveredMarker ? "brightness-[.7]" : ""
|
|
}`}
|
|
/>
|
|
</TransformComponent>
|
|
</TransformWrapper>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Map;
|