map resizing update

src/components/main.vue

@@ -46,6 +46,7 @@ export default {
   data() {
     return {
       map: null,
+      routeRenderer: null,
       routeLatlngs: [],
       stationMarkers: [],
       sightMarkers: [],
@@ -231,13 +232,20 @@ export default {
     // ─────────────────────────────────────────────────────────────────────────────
 
     initializeMap() {
+      this.routeRenderer = L.canvas({ padding: 0.5 });
+
       this.map = L.map("map", {
         zoomControl: false,
         attributionControl: false,
-        maxZoom: 14, // default max zoom
-        minZoom: 12, // default min zoom
-        zoomSnap: 0, // allow fractional zoom levels
-        zoomDelta: 0.5, // smoother wheel steps
+        zoomAnimation: false,
+        inertia: false,
+        preferCanvas: true,
+        renderer: this.routeRenderer,
+        maxZoom: 18,
+        minZoom: 10,
+        zoomSnap: 0,
+        zoomDelta: 0.1,
+        wheelPxPerZoomLevel: 50,
       });
       this.map.whenReady(() => {
         const mapPane = this.map.getPane("mapPane") || this.map.getContainer();
@@ -597,6 +605,7 @@ export default {
             color: "red",
             weight: 7,
             pane: "routePane",
+            renderer: this.routeRenderer,
           }).addTo(this.map);
         } else {
           this.passedPolyline.setLatLngs(passedCoords);
@@ -607,6 +616,7 @@ export default {
             color: "white",
             weight: 7,
             pane: "routePane",
+            renderer: this.routeRenderer,
           }).addTo(this.map);
         } else {
           this.fullPolyline.setLatLngs(fullCoords);