Fix smooth map route zooming

Author: Raytimz

docs/js/map.js

@@ -31,12 +31,12 @@ const MapView = (() => {
     return 2 * R * Math.asin(Math.sqrt(s));
   }
 
-  function segmentTrajectory(points) {
+  function segmentTrajectory(points, maxGapKm = PORT_MAX_GAP_KM) {
     if (!points || points.length < 2) return [];
     const segs = [];
     let cur = [points[0]];
     for (let i = 1; i < points.length; i++) {
-      if (haversineKm(points[i - 1], points[i]) > PORT_MAX_GAP_KM) {
+      if (haversineKm(points[i - 1], points[i]) > maxGapKm) {
         if (cur.length >= 2) segs.push(cur);
         cur = [points[i]];
       } else {
@@ -105,39 +105,32 @@ const MapView = (() => {
     setData(data, filters) {
       this._data    = data;
       this._filters = filters;
-      if (this._canvas) this._draw();
+      if (this._map) this._redraw();
     },
 
     onAdd(map) {
       this._map = map;
-      this._canvas = document.createElement("canvas");
-      this._canvas.style.cssText = "position:absolute;top:0;left:0;pointer-events:none;z-index:300;";
-      map.getPane("overlayPane").appendChild(this._canvas);
-      this._resize();
-      map.on("moveend zoomend resize", this._onMove, this);
-      this._draw();
+      this._renderer = L.canvas({ padding: 0.6, tolerance: 2 });
+      this._layer = L.layerGroup().addTo(map);
+      this._redraw();
     },
 
     onRemove(map) {
-      map.off("moveend zoomend resize", this._onMove, this);
-      this._canvas.remove();
-      this._canvas = null;
-    },
-
-    _onMove() { this._resize(); this._draw(); },
-
-    _resize() {
-      const sz = this._map.getSize();
-      this._canvas.width  = sz.x;
-      this._canvas.height = sz.y;
-      L.DomUtil.setPosition(this._canvas, this._map.containerPointToLayerPoint([0, 0]));
+      if (this._layer) {
+        this._layer.clearLayers();
+        map.removeLayer(this._layer);
+      }
+      if (this._renderer) {
+        this._renderer.remove();
+      }
+      this._layer = null;
+      this._renderer = null;
+      this._map = null;
     },
 
-    _draw() {
-      if (!this._canvas) return;
-      const ctx  = this._canvas.getContext("2d");
-      const sz   = this._map.getSize();
-      ctx.clearRect(0, 0, sz.x, sz.y);
+    _redraw() {
+      if (!this._layer || !this._renderer) return;
+      this._layer.clearLayers();
 
       const { activeTypes, hour } = this._filters;
 
@@ -147,42 +140,21 @@ const MapView = (() => {
         if (!traj.points || traj.points.length < 2) continue;
 
         const meanSog = traj.points.reduce((s, p) => s + (p.sog || 0), 0) / traj.points.length;
-        ctx.strokeStyle = meanSog >= GLOBAL_SOG_THRESHOLD ? GLOBAL_UNDERWAY_COLOR : GLOBAL_SLOW_COLOR;
-        ctx.globalAlpha = 0.42;
-        ctx.lineWidth   = 1.1;
-        ctx.beginPath();
-
-        let started = false;
-        let prevPx  = null;
-
-        for (const pt of traj.points) {
-          const px = this._map.latLngToContainerPoint([pt.lat, pt.lon]);
-
-          if (prevPx) {
-            const screenDist = Math.hypot(px.x - prevPx.x, px.y - prevPx.y);
-            const kmPerPx    = this._kmPerPixel();
-            if (screenDist * kmPerPx > GLOBAL_MAX_STEP_KM) {
-              if (started) ctx.stroke();
-              ctx.beginPath();
-              started = false;
-              prevPx  = null;
-            }
-          }
-
-          if (!started) { ctx.moveTo(px.x, px.y); started = true; }
-          else            ctx.lineTo(px.x, px.y);
-          prevPx = px;
-        }
-        if (started) ctx.stroke();
+        const color = meanSog >= GLOBAL_SOG_THRESHOLD ? GLOBAL_UNDERWAY_COLOR : GLOBAL_SLOW_COLOR;
+        const segs = segmentTrajectory(traj.points, GLOBAL_MAX_STEP_KM);
+
+        segs.forEach(seg => {
+          L.polyline(seg.map(p => [p.lat, p.lon]), {
+            renderer: this._renderer,
+            interactive: false,
+            bubblingMouseEvents: false,
+            color,
+            weight: 1.1,
+            opacity: 0.42,
+            smoothFactor: 1.2,
+          }).addTo(this._layer);
+        });
       }
-      ctx.globalAlpha = 1;
-    },
-
-    _kmPerPixel() {
-      const center = this._map.getCenter();
-      const zoom   = this._map.getZoom();
-      const mPerPx = (156543.03392 * Math.cos(center.lat * Math.PI / 180)) / (2 ** zoom);
-      return mPerPx / 1000;
     },
   });