Fix anth path

package.json

@@ -29,7 +29,6 @@
     "clsx": "^1.2.1",
     "json-schema-yup-transformer": "2.0.0-beta.0",
     "leaflet": "^1.9.4",
-    "leaflet-ant-path": "^1.3.0",
     "leaflet.locatecontrol": "^0.79.0",
     "lucide-react": "^0.221.0",
     "next": "^13.5.4",

src/components/map/geometry-item.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from 'react';
 import { Layer } from '@/api/settings';
 import { GeoJsonProperties, Geometry } from 'geojson';
 import { GeoJSONOptions } from 'leaflet';
@@ -11,7 +12,6 @@ import {
 } from 'react-leaflet';
 
 import { Icons } from '@/components/icons';
-import AntPath, { AntPathOptions } from '@/components/map/ant-path';
 import { DefaultMarker } from '@/components/map/default-marker';
 import Popup from '@/components/map/popup';
 
@@ -108,33 +108,23 @@ export const GeometryItem = ({
     return (
       <>
         {coordinatesAsMultiLineString.map((group, index) => {
-          if (layer.type === 'streams') {
-            return (
-              <AntPath
-                key={`linestring-${id}-${index}`}
+          return (
+            <Fragment key={`linestring-${id}-${index}`}>
+              {/* Duplicate streams layer to animate it */}
+              {layer.type === 'streams' && (
+                <Polyline
+                  positions={group.map(([lat, lng]) => [lng, lat])}
+                  pathOptions={options.style as GeoJSONOptions}
+                ></Polyline>
+              )}
+              <Polyline
                 positions={group.map(([lat, lng]) => [lng, lat])}
-                options={
-                  {
-                    dashArray: ['30', '30'],
-                    weight: 3,
-                    delay: 2000,
-                    ...options.style,
-                  } as AntPathOptions
-                }
+                pathOptions={options.style as GeoJSONOptions}
+                className={layer.type}
               >
                 <MetaData properties={properties} layer={layer} />
-              </AntPath>
-            );
-          }
-
-          return (
-            <Polyline
-              key={`linestring-${id}-${index}`}
-              positions={group.map(([lat, lng]) => [lng, lat])}
-              pathOptions={options.style as GeoJSONOptions}
-            >
-              <MetaData properties={properties} layer={layer} />
-            </Polyline>
+              </Polyline>
+            </Fragment>
           );
         })}
       </>

src/styles/globals.css

@@ -100,4 +100,21 @@ body .leaflet-container a.leaflet-popup-close-button {
 
 .tns-horizontal.tns-subpixel>.tns-item {
   vertical-align: middle !important;
-}
+}
+
+.streams.leaflet-interactive {
+  stroke-width: 2;
+  stroke: rgba(255, 255, 255, 0.6);
+  stroke-dasharray: 10;
+  stroke-dashoffset: 200;
+  animation-name: dash;
+  animation-duration: 20s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: 0;
+  }
+}

yarn.lock

@@ -2636,11 +2636,6 @@ language-tags@=1.0.5:
   dependencies:
     language-subtag-registry "~0.3.2"
 
-leaflet-ant-path@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/leaflet-ant-path/-/leaflet-ant-path-1.3.0.tgz#eac54e936e911666e61e9c2af682cba768b46a5a"
-  integrity sha512-wgWWcAD4w8QVguRsHh89NGj5eqwLOP6e/HazunW0fQaytqZqEh3WePWYIrmbUeMcOf2cX/+GecHkFfI5tirS1Q==
-
 leaflet.locatecontrol@^0.79.0:
   version "0.79.0"
   resolved "https://registry.npmjs.org/leaflet.locatecontrol/-/leaflet.locatecontrol-0.79.0.tgz"