Invalid LatLng object: (NaN, NaN)

[missinglink]

Hi, I'm one of the Pelias maintainers, I started using this lib today 👋

I noticed this bug, could you please point me in the right direction to fix it?

This is the example query I managed to trigger the bug, clicking the top result works fine, but selecting one of the lower results "Wellington, WC, South Africa" causes the following JS error:

https://pelias.github.io/compare/#/v1/autocomplete?text=wellington

Uncaught Error: Invalid LatLng object: (NaN, NaN)
    at new LatLng (LatLng.js:32:9)
    at Object.unproject (Projection.SphericalMercator.js:35:10)
    at Object.pointToLatLng (CRS.js:41:26)
    at NewClass.unproject (Map.js:989:27)
    at t._updateLevels (GridLayer.js:393:35)
    at t._setView (GridLayer.js:570:9)
    at t._resetView (GridLayer.js:530:8)
    at NewClass.fire (Events.js:195:9)
    at NewClass._move (Map.js:1231:10)
    at NewClass._resetView (Map.js:1186:5)

I believe it might be something to do with the bbox not being available on that result (as it's originally a point-based geometry).

Thanks

[missinglink]

Using the latest version from CDN

  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

[missinglink]

I tried making the following changes but It didn't resolve the issue 😿

diff --git a/src/geocoders/pelias.ts b/src/geocoders/pelias.ts
index de6b968..136c1cb 100644
--- a/src/geocoders/pelias.ts
+++ b/src/geocoders/pelias.ts
@@ -22,7 +22,7 @@ export class Pelias implements IGeocoder {
       text: query
     });
     const data = await getJSON<any>(this.options.serviceUrl + '/search', params);
-    return this._parseResults(data, 'bbox');
+    return this._parseResults(data);
   }
 
   async suggest(query: string): Promise<GeocodingResult[]> {
@@ -31,7 +31,7 @@ export class Pelias implements IGeocoder {
       text: query
     });
     const data = await getJSON<any>(this.options.serviceUrl + '/autocomplete', params);
-    return this._parseResults(data, 'bbox');
+    return this._parseResults(data);
   }
 
   async reverse(location: L.LatLngLiteral, scale: number): Promise<GeocodingResult[]> {
@@ -41,42 +41,25 @@ export class Pelias implements IGeocoder {
       'point.lon': location.lng
     });
     const data = await getJSON<any>(this.options.serviceUrl + '/reverse', params);
-    return this._parseResults(data, 'bounds');
+    return this._parseResults(data);
   }
 
-  _parseResults(data, bboxname): GeocodingResult[] {
-    const results: GeocodingResult[] = [];
-    new L.GeoJSON(data, {
-      pointToLayer(feature, latlng) {
-        return new L.CircleMarker(latlng, {radius: 10});
-      },
-      onEachFeature(feature, layer: any) {
-        const result = {} as GeocodingResult;
-        let bbox;
-        let center;
-
-        if (layer.getBounds) {
-          bbox = layer.getBounds();
-          center = bbox.getCenter();
-        } else if (layer.feature.bbox) {
-          center = layer.getLatLng();
-          bbox = new L.LatLngBounds(
-            L.GeoJSON.coordsToLatLng(layer.feature.bbox.slice(0, 2)),
-            L.GeoJSON.coordsToLatLng(layer.feature.bbox.slice(2, 4))
-          );
-        } else {
-          center = layer.getLatLng();
-          bbox = new L.LatLngBounds(center, center);
-        }
-
-        result.name = layer.feature.properties.label;
-        result.center = center;
-        result[bboxname] = bbox;
-        result.properties = layer.feature.properties;
-        results.push(result);
-      }
+  _parseResults(data: GeoJSON.FeatureCollection<GeoJSON.Point>): GeocodingResult[] {
+    return (data.features || []).map((f): GeocodingResult => {
+      const c = f.geometry.coordinates;
+      const center = new L.LatLng(c[1], c[0]);
+
+      const bbox = (Array.isArray(f.bbox) && f.bbox.length === 4)
+        ? new L.LatLngBounds([f.bbox[1], f.bbox[0]], [f.bbox[3], f.bbox[2]])
+        : new L.LatLngBounds(center, center);
+
+      return {
+        name: f.properties!.label,
+        center,
+        bbox,
+        properties: f.properties
+      };
     });
-    return results;
   }
 }

The code seems to written in such a way that it accepts two different names for the bbox property ('bounds'|'bbox'), I don't recall if it used to be like that but the APIs now only use bbox.

[simon04]

So this issue does not occur with 3.1.0, but occurs with 3.2.0? I would guess that this is a regression of 9ccd125. Leaflet 2.0 removes all factory methods, but L.latLng and new L.LatLng are different (the former returns null on invalid arguments).

[missinglink]

Today I tested 3.2.0, 3.1.0 and 3.0.0, they all trigger this Invalid LatLng object: (NaN, NaN) error.

I'm not sure if it is actually a problem with the Pelias client as I made the changes above to ensure that both a center point and a bbox are always present and yet the error persists.

I am able to log the result of parseResults and the features seem to be mapping correctly.

The bug is triggered only when an item is selected from the list of results.

[missinglink]

After a bit more digging I found that it's triggered here.

A simple reproducible testcase is:

window.map.fitBounds(new L.LatLngBounds([-33.63981, 19.0112], [-33.63981, 19.0112]))

Maybe this is a leaflet bug? or am I doing something silly here?

<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@latest/dist/leaflet-src.js"></script>

I also tried some older versions of Leaflet without success.

[missinglink]

Agh, I figured it out, it's coming from a different lib protomaps-leaflet@4.0.1, when I remove that script it works fine, apologies for the noise.

[simon04]

Hi, no worries. Thank you for reporting back the root cause of the problem.

[missinglink]

Would you be open to accepting a separate PR to update the Pelias provider?

[simon04]

Sure, PRs are very welcome 😄