1

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?

3
  • GeoJSON polygon requires that the first coordinate is repeated at the end (linear ring).
    – TomazicM
    Dec 13, 2022 at 18:19
  • @TomazicM That's what I figured too - but using [[68.92995788193984, 31.831280499087402], [69.3935964899183, 62.345344956509784], [76.163042830191, 94.14309010184775], [87.36469532319619, 145.5581976913369], [81.27137179020501, -34.75841798028471],[68.92995788193984, 31.831280499087402]] I am still getting the same error output. How can I debug further?
    – mohsan123
    Dec 15, 2022 at 15:45
  • GeoJSON polygon consists of linear rings, which means you are missing one set of [] brackets. It should be [[[68.92995788193984, 31.831280499087402], [69.3935964899183, 62.345344956509784], [76.163042830191, 94.14309010184775], [87.36469532319619, 145.5581976913369], [81.27137179020501, -34.75841798028471],[68.92995788193984, 31.831280499087402]]].
    – TomazicM
    Dec 15, 2022 at 15:54

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.