diff --git a/package-lock.json b/package-lock.json index f808b98..4dd080f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "react": "19.0.0", "react-dom": "19.0.0", "react-router-dom": "^7.0.1", - "svg-pan-zoom": "^3.6.2" + "react-zoom-pan-pinch": "^3.6.1" }, "devDependencies": { "@eslint/js": "^9.13.0", @@ -2635,6 +2635,19 @@ "react-dom": ">=18" } }, + "node_modules/react-zoom-pan-pinch": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.6.1.tgz", + "integrity": "sha512-SdPqdk7QDSV7u/WulkFOi+cnza8rEZ0XX4ZpeH7vx3UZEg7DoyuAy3MCmm+BWv/idPQL2Oe73VoC0EhfCN+sZQ==", + "engines": { + "node": ">=8", + "npm": ">=5" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -2787,11 +2800,6 @@ "node": ">=8" } }, - "node_modules/svg-pan-zoom": { - "version": "3.6.2", - "resolved": "https://registry.npmjs.org/svg-pan-zoom/-/svg-pan-zoom-3.6.2.tgz", - "integrity": "sha512-JwnvRWfVKw/Xzfe6jriFyfey/lWJLq4bUh2jwoR5ChWQuQoOH8FEh1l/bEp46iHHKHEJWIyFJETbazraxNWECg==" - }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -4686,6 +4694,12 @@ "react-router": "7.0.1" } }, + "react-zoom-pan-pinch": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.6.1.tgz", + "integrity": "sha512-SdPqdk7QDSV7u/WulkFOi+cnza8rEZ0XX4ZpeH7vx3UZEg7DoyuAy3MCmm+BWv/idPQL2Oe73VoC0EhfCN+sZQ==", + "requires": {} + }, "resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -4787,11 +4801,6 @@ "has-flag": "^4.0.0" } }, - "svg-pan-zoom": { - "version": "3.6.2", - "resolved": "https://registry.npmjs.org/svg-pan-zoom/-/svg-pan-zoom-3.6.2.tgz", - "integrity": "sha512-JwnvRWfVKw/Xzfe6jriFyfey/lWJLq4bUh2jwoR5ChWQuQoOH8FEh1l/bEp46iHHKHEJWIyFJETbazraxNWECg==" - }, "to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", diff --git a/package.json b/package.json index 080782b..50e03b9 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "react": "19.0.0", "react-dom": "19.0.0", "react-router-dom": "^7.0.1", - "svg-pan-zoom": "^3.6.2" + "react-zoom-pan-pinch": "^3.6.1" }, "devDependencies": { "@eslint/js": "^9.13.0", diff --git a/src/assets/Map.tsx b/src/assets/Map.tsx index e4f5a8a..1deb129 100644 --- a/src/assets/Map.tsx +++ b/src/assets/Map.tsx @@ -1,1598 +1,1573 @@ // @ts-nocheck import React, { useState, useEffect } from "react"; -import svgPanZoom from "svg-pan-zoom"; +import { + TransformWrapper, + TransformComponent, + useControls, +} from "react-zoom-pan-pinch"; +import { MapControls } from "../components/MapControls"; export const Map = ({ onPathClick, }: { onPathClick: (e: MouseEvent) => void; }) => { - let panZoom; - useEffect(() => { - panZoom = svgPanZoom("#map-svg", { maxZoom: 60 }); - }, []); - return (
-
- - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + /> + + + + + + + + + + + + + + + + + + {" "} + + + )} +
); }; diff --git a/src/components/MapControls.tsx b/src/components/MapControls.tsx new file mode 100644 index 0000000..bca1b13 --- /dev/null +++ b/src/components/MapControls.tsx @@ -0,0 +1,13 @@ +import { useControls } from "react-zoom-pan-pinch"; + +export const MapControls = () => { + const { zoomIn, zoomOut, resetTransform } = useControls(); + + return ( +
+ + + +
+ ); +};