Leaflet GeoJSON Turf: × Error: Invalid LatLng object: (undefined, undefined)

Question

I set the return to null for the component and condition in question to check the data I'm returning and I couldn't find any issues in the coordinates arrays.

I get data as an array of geometry collections containing linestrings that make borders (from OSM's Overpass). Leaflet seems to only accept shapes, features, and featurecollections as inputs. As such, I wrote something to convert each geometry collection to a feature containing a multipolygon and added in a name and ID properties then made it into a featurecollection.

Example of OSM request body

[out:json];relation["name"="Mount Rainier National Park"]["type"="boundary"]; convert item ::=::,::geom=geom(),_osm_type=type(); out geom;

State

  // Get boundaries for national lands in state X
  const getBoundaries = async (st) => {
    try {
      // Fetch boundaries
      const usStates = new UsaStates({ includeTerritories: true });
      // Convert full state/territory name to two character abbrieviation. 
      let abbr = null;
      usStates.states.map((row) => {
        if (row.name === st) {
          abbr = row.abbreviation;
        }
      });
      // Build array of national land names
      let lands = [];
      state.locations.map((loc) => {
        if (loc.states.includes(abbr)) {
          lands.push(loc.fullName);
        }
      });
      // Build Overpass query for boundaries
      let query = "[out:json];";
      lands.map((location) => {
        query += `relation["name"="${location}"]["type"="boundary"]; convert item ::=::,::geom=geom(),_osm_type=type(); out geom;`;
      });

      const osmRes = await axios.post(
        "https://lz4.overpass-api.de/api/interpreter",
        query
      );
      dispatch({
        type: GET_BOUNDARIES,
        payload: osmRes.data,
      });
    } catch (err) {
      dispatch({
        type: TOAST_ERROR,
        payload: err,
      });
    }
  };

Reducer

case GET_BOUNDARIES:
  let b = [];
  let t = null;
  action.payload.elements.map((boundary) => {
    let a = [];
    t = polygonize(boundary.geometry);
    t.features.map((feature) => {
      a.push(feature.geometry.coordinates[0]);
    });
    b.push(multiPolygon(a));
    b[b.length - 1].properties = {
      name: boundary.tags.name,
      id: short.generate(),
    };
  });
  b = featureCollection(b);
  console.log("Reducer");
  return {
    ...state,
    boundaries: b,
    loading: false,
  };

Component

import React, { useContext} from "react";
import ParksContext from "../context/parks/ParksContext";
import { GeoJSON } from "react-leaflet";

const Boundaries = () => {
  const parksContext = useContext(ParksContext);
  const { boundaries, target, locations, states } = parksContext;

  return target === null &&
    Object.keys(states).length > 0 &&
    states.constructor === Object ? (
    <GeoJSON data={states} key={states}></GeoJSON>
  ) : target && locations.find((location) => location.id === target) ? (
    <GeoJSON
      data={
        boundaries[
          locations.find((location) => location.id === target).fullName
        ]
      }
    />
  ) : Object.keys(boundaries).length > 0 &&
    boundaries.constructor === Object ? (
    <GeoJSON data={boundaries} key={boundaries}></GeoJSON>
  ) : null;
};

export default Boundaries;

Answer 1

I used geojsonlint.com and found an error in my geojson. My coordinates array of arrays had to be in another array. The outermost array allows for a second element: holes.

case GET_BOUNDARIES:
  let b = [];
  let t = null;
  action.payload.elements.map((boundary) => {
    let a = [];
    t = polygonize(boundary.geometry);
    t.features.map((feature) => {
      a.push(feature.geometry.coordinates[0]);
    });
    b.push(multiPolygon([a]));     <-- Here
    b[b.length - 1].properties = {
      name: boundary.tags.name,
      id: short.generate(),
    };