SmoothWheelZoomプラグインを導入

Author: na-trium-144

package-lock.json

@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "leaflet": "^1.9.4",
+    "leaflet-smooth-zoom": "github:mutsuyuki/Leaflet.SmoothWheelZoom",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-leaflet": "^5.0.0",

package.json

@@ -22,6 +22,7 @@ import {
 } from "../markers";
 import { searchItems, type SearchableItem } from "../search";
 import { getBuildingCenter } from "../buildings";
+import "leaflet-smooth-zoom/SmoothWheelZoom.js";
 
 const imgWidth = 4000;
 const imgHeight = 2800;
@@ -226,6 +227,11 @@ export function MapPage() {
         center={[imgHeight / 2, imgWidth / 2]}
         zoom={-1}
         className="w-full h-full"
+        scrollWheelZoom={false}
+        // @ts-expect-error https://github.com/mutsuyuki/Leaflet.SmoothWheelZoom プラグインで提供されるオプション
+        smoothWheelZoom={true}
+        smoothSensitivity={5}
+        zoomSnap={0}
       >
         <ImageOverlay url={Komabamap} bounds={bounds} />
         <MapController