How do I format the geojson data so that it is accepted by Mapbox

Question

I have a geoJson of hex indexes, which I am trying to render on to mapbox.

Here is my code (ignore the indentation):

    export default class App extends Component {
  constructor() {
    super();
    const hexagons = ['8928308280fffff', '8928308281fffff', '8928308282fffff'];
    console.log(hex)
    this.state = {
      route:
      {
        type: 'FeatureCollection',
        features: hexagons.map(hex => ({
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: h3ToGeoBoundary(hex, { resolution: 8 })
          }
        }))
    }, 
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <MapboxGL.MapView
          styleURL={MapboxGL.StyleURL.Light}
          zoomLevel={15}
          centerCoordinate={[11.256, 43.770]}
          style={styles.container}> 
          <MapboxGL.ShapeSource id='hexagons' shape={this.state.route}>
            <MapboxGL.FillExtrusionLayer id='hexagons' style={{ fillExtrusionColor: '#ff0000' }} />
          </MapboxGL.ShapeSource>

        </MapboxGL.MapView>
      </View>
    );
  }
}

This is how the geojson looks when converting from hexagons[0]:

[[68.92995788193984, 31.831280499087402], [69.3935964899183, 62.345344956509784], [76.163042830191, 94.14309010184775], [87.36469532319619, 145.5581976913369], [81.27137179020501, -34.75841798028471], [73.31022368544396, 0.32561035194326043]]

This is the error I am getting:

Mapbox error RCTMGLShapeSource.updateShape  The data couldn’t be read because it isn’t in the correct format. {"level": "error", "message": "RCTMGLShapeSource.updateShape  The data couldn’t be read because it isn’t in the correct format."}

Mapbox error Unable to read shape: {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[-122.41719971841654,37.77519778289337],...dataCorrupted(Swift.DecodingError.Context(codingPath: [], debugDescription: \"Failed to decode GeoJSONSource `data` property\", underlyingError: nil)) setting it to empty"}

Any suggestions?

Answer 1

There is an error in the H3 call here, but I don't actually think it's the problem. The function h3ToGeoBoundary takes a cell (which has a fixed resolution), and a boolean formatAsGeoJSON argument (see docs). Your call h3ToGeoBoundary(hex, { resolution: 8 }) is accidentally giving you GeoJSON, because the { resolution: 8 } argument is interpreted as truthy.

But that doesn't seem to be the issue here, as you get GeoJSON out anyway. I can't debug the issue here without a better error; a very strict GeoJSON parser might require a properties key in each Feature, but that seems unlikely. Note that you can also use the geojson2h3 library to simplify the conversion from H3 to GeoJSON somewhat, though I can't guarantee that it will fix your problem in this case.