nearestPointOnLine throws Error: coordinates must contain numbers

[kamami]

I have a curious problem. I am using turf.nearestPointOnLine with two different lines. It is working perfectly fine with line1, but line2 is throwing me this Error: Error: coordinates must contain numbers

Honestly I don't see the difference...

Here is my code:

          const line1 = turf.lineString([
            [-77.031669, 38.878605],
            [-77.029609, 38.881946],
            [-77.020339, 38.884084],
            [-77.025661, 38.885821],
            [-77.021884, 38.889563],
            [-77.019824, 38.892368],
          ]);
          const line2 = turf.lineString([
            [10.57846, 49.8463959],
            [10.57846, 49.8468386],
            [10.57846, 49.8468386],
            [10.57846, 49.8468386],
            [10.57846, 49.8472814],
            [10.57846, 49.8472814],
          ]);

          const point = turf.point([-122.3102, 47.6634]);

          const nearest = turf.nearestPointOnLine(line2, point);  //throws error
          const nearest = turf.nearestPointOnLine(line1, point);  //works fine

[twelch]

Looks similar to #2807. I see the last two positions in your second line are redundant (the same). Can you try using the turf cleanCoords helper function and see if that addresses the error? I wonder if this is a new issue as of 7.2.0.

[kamami]

Yes, that did the trick! I used this to find the nearest point next to the mouse cursor on the LineString. If the zoom was too low, it threw the error. Now with cleanCoords, it is working also on low zoom levels!

    const handleMouseMove = (e) => {
      const mainLayerId = "route-ptv-segments-buffer"; // Stelle sicher, dass dies der korrekte Layer-Name ist

      if (!mapRef.current.getLayer(mainLayerId)) {
        return;
      }

      const features = mapRef.current.queryRenderedFeatures(e.point, {
        layers: [mainLayerId],
      });

      if (features.length > 0) {
        const mousePoint = turf.point([e.lngLat.lng, e.lngLat.lat]);
        let minDistance = Infinity;
        let closestFeature = null;
        let closestPoint = null;

        const feature = features[0];

        const line = turf.cleanCoords(feature);

        const nearest = turf.nearestPointOnLine(line, mousePoint);
        const distance = turf.distance(mousePoint, nearest);

        if (distance < minDistance) {
          minDistance = distance;
          closestFeature = feature;
          closestPoint = nearest;
        }

        if (closestFeature && closestPoint) {
          const energyRemaining =
            closestFeature.properties.energyRemaining || "0";
          const distance = closestFeature.properties.distance || "0";

          const popupContent = `
            <div>
              <strong>Strecke:</strong> ${(distance / 1000).toFixed(2)} km<br/>
              <strong>SoC:</strong> ${
                energyRemaining < 0 ? "0" : energyRemaining.toFixed(2)
              }%
            </div>
          `;

          if (!popUpRefLine.current) {
            // Popup erstellen, wenn es noch nicht existiert
            popUpRefLine.current = new mapboxgl.Popup({
              closeButton: false,
              closeOnClick: false,
              className: "line-popup",
              anchor: "top-left",
              offset: [15, 15],
            })
              .setLngLat(closestPoint.geometry.coordinates)
              .setHTML(popupContent)
              .addTo(mapRef.current);
          } else {
            // Popup aktualisieren
            popUpRefLine.current
              .setLngLat(closestPoint.geometry.coordinates)
              .setHTML(popupContent);
          }

          // Aktualisiere den Hover-Punkt
          mapRef.current.getSource("hover-point").setData({
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates: closestPoint.geometry.coordinates,
                },
                properties: {},
              },
            ],
          });
        }
      } else {
        if (popUpRefLine.current) {
          popUpRefLine.current.remove();
          popUpRefLine.current = null;
        }

        // Entferne den Hover-Punkt
        mapRef.current.getSource("hover-point").setData({
          type: "FeatureCollection",
          features: [],
        });
      }

      // Ändere den Cursor basierend auf der Hover-Interaktion
      mapRef.current.getCanvas().style.cursor =
        features.length > 0 ? "pointer" : "";
    };

[kamami]

@twelch Unfortunately I discovered an issue with cleanCoords. It does not seem to remove duplicates which again result in this error: index.js:111 Uncaught Error: coordinates must contain numbers

        const feature = features[0];
        console.log(feature);
        const line = turf.cleanCoords(feature);
        console.log(line);
        const nearest = turf.nearestPointOnLine(line, mousePoint);

Output of feature:

{
    "type": "Feature",
    "state": {},
    "geometry": {
        "type": "LineString",
        "coordinates": [
            [
                11.25,
                49.15296965617043
            ],
            [
                11.25,
                49.15296965617043
            ],
            [
                11.25,
                49.15296965617043
            ],
            [
                11.25,
                49.15296965617043
            ],
            [
                11.25,
                49.15296965617043
            ],
            [
                11.25,
                49.15296965617043
            ],
            [
                11.25,
                49.15296965617043
            ],
            [
                11.25,
                49.1242192485914
            ],
            [
                11.25,
                49.1242192485914
            ],
            [
                11.25,
                49.1242192485914
            ],
            [
                11.25,
                49.1242192485914
            ],
            [
                11.25,
                49.1242192485914
            ],
            [
                11.25,
                49.1242192485914
            ],
            [
                11.25,
                49.1242192485914
            ],
            [
                11.25,
                49.1242192485914
            ],
            [
                11.2939453125,
                49.1242192485914
            ],
            [
                11.2939453125,
                49.1242192485914
            ],
            [
                11.2939453125,
                49.1242192485914
            ],
            [
                11.2939453125,
                49.1242192485914
            ],
            [
                11.2939453125,
                49.1242192485914
            ],
            [
                11.2939453125,
                49.1242192485914
            ],
            [
                11.2939453125,
                49.1242192485914
            ],
            [
                11.2939453125,
                49.1242192485914
            ],
            [
                11.2939453125,
                49.1242192485914
            ],
            [
                11.2939453125,
                49.1242192485914
            ],
            [
                11.2939453125,
                49.1242192485914
            ],
            [
                11.2939453125,
                49.1242192485914
            ],
            [
                11.2939453125,
                49.1242192485914
            ],
            [
                11.2939453125,
                49.1242192485914
            ],
            [
                11.2939453125,
                49.095452162534826
            ],
            [
                11.2939453125,
                49.095452162534826
            ],
            [
                11.2939453125,
                49.095452162534826
            ],
            [
                11.2939453125,
                49.095452162534826
            ],
            [
                11.2939453125,
                49.095452162534826
            ],
            [
                11.2939453125,
                49.095452162534826
            ],
            [
                11.2939453125,
                49.095452162534826
            ],
            [
                11.2939453125,
                49.095452162534826
            ]
        ]
    },
    "properties": {
        "color": "hsl(59.256, 100%, 50%)",
        "energyRemaining": 49.38,
        "distance": 163347
    },
    "id": 30,
    "tile": {
        "z": 0,
        "x": 0,
        "y": 0,
        "key": 0
    },
    "layer": {
        "id": "route-ptv-segments-buffer",
        "type": "line",
        "slot": "middle",
        "source": "route-ptv-segments",
        "minzoom": 0,
        "maxzoom": 24,
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-width": 40,
            "line-opacity": 0
        }
    },
    "source": "route-ptv-segments"
}

Output of line:

{
    "type": "Feature",
    "id": 66,
    "properties": {
        "color": "#4B0000",
        "energyRemaining": -7.98,
        "distance": 348017
    },
    "geometry": {
        "type": "LineString",
        "coordinates": [
            [
                11.9970703125,
                47.84265762816537
            ],
            [
                11.9970703125,
                47.84265762816537
            ]
        ]
    }
}