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

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(),
};