I'm trying to perform point in polygon analysis via turf, however it's consistently returning a ring undefined error

Question

So, i'm building a react project as part of a code exercise. I've got a sheet of geojson data with various polygons defined within. I'm tasked with taking a pair of user coordinates and checking whether or not that set of coordinates is located within any of the specified polygons. However as soon as I submit coordinates it's tossing up the following error:

Uncaught TypeError: ring is undefined
    inRing index.js:82
    booleanPointInPolygon index.js:54
    CheckCoordinate CheckCoordinate.jsx:24
    CheckCoordinate CheckCoordinate.jsx:23
    React 8
        commitHookEffectListMount
        commitPassiveMountOnFiber
        commitPassiveMountEffects_complete
        commitPassiveMountEffects_begin
        commitPassiveMountEffects
        flushPassiveEffectsImpl
        flushPassiveEffects
        commitRootImpl
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533

I'd just like some direction as to what is causing this. I thought initially it was due to dynamically fetching the geojson file, which I removed and replaced with just a straight import as you can see in the code block below. However that yielded no change in behavior.

import React, { useState, useEffect } from 'react';
import * as turf from '@turf/turf';
import yardZoneMap from './yard-zone-map.json'; // Adjust the path as necessary

function CheckCoordinate(props) {
  const unparsedString = props.inputCoord || '';
  const parsedValues = unparsedString.split(',').map(item => parseFloat(item));

  const [pointLocation, setPointLocation] = useState(null);
  const [isInside, setIsInside] = useState(false);

  useEffect(() => {
    if (parsedValues.length === 2) {
      setPointLocation(parsedValues);
    }
  }, [unparsedString]);

  useEffect(() => {
    if (pointLocation) {
      const point = turf.point(pointLocation); // Correctly define the point here
      let insideAnyPolygon = false;

      yardZoneMap.features.forEach(feature => {
        if (turf.booleanPointInPolygon(point, feature)) {
          insideAnyPolygon = true;
        }
      });

      setIsInside(insideAnyPolygon);
    }
  }, [pointLocation]);

  return (
    <div>
      <p>Point is inside polygon: {isInside ? 'Yes' : 'No'}</p>
    </div>
  );
}

export default CheckCoordinate;

I've made use of an online validation tool to verify that my geojson data is good and it had no trouble displaying, so I'm fairly sure that it's not a data formatting issue, but something to do with how I'm processing it.

Any advice would be much appreciated!

Answer 1

Issue was due to the JSON data containing point features as opposed to just polygons. Once I edited the program to ignore these features things began to run smoothly.