How to show dynamically retrieved GeoJSON using a ShapeSource and Circle layer for Mapbox using React-Native

Question

I'm successfully retrieving a set of features from my API, when I output them to e.g. for the console it would something like this:

    {type: "feature" geometry: {type: point, coordinates: array(2)} 
    properties: {extra properties}}

Multiple of these features are retrieved from my API and stored in the state. Currently the max amount of features retrieved are anywhere between 0 to 50 features. So I'm guessing this isn't issue with too many features needed to be rendered.

Found an example on the project GitHub page that is linked below doing something similar but they are using an url instead of a shape property like the one I'm using. Which should be capable of what im trying to according the documentation.

Link to the example: https://github.com/react-native-mapbox-gl/maps/blob/master/example/src/examples/EarthQuakes.js

Link to the documentation: https://github.com/react-native-mapbox-gl/maps/blob/master/docs/ShapeSource.md

I've also tried the several solutions found on this SO post: How do you convert normal geographic json coming from server into geoJson?

Currently my render method looks like the one provided below:

        render() {
    return (
        <View style={styles.container}>
          <MapboxGL.MapView
              showUserLocation={true}
              rotateEnabled={false}
              style={styles.map}
              ref={map => { this.map = map; }}
              styleURL={MapboxGL.StyleURL.Street}
              onRegionDidChange={this.onRegionDidChange}
              onDidFinishLoadingMap={this.onDidFinishLoadingMap}>

            <MapboxGL.UserLocation
                visible={true}/>

            <MapboxGL.ShapeSource
                id='routeSource'
                shape={{type: "FeatureCollection", features: 
                this.state.routes}}
                type='geojson'>

                <MapboxGL.CircleLayer
                    id="singlePoint"
                    style={layerStyle.singlePoint}
                />
            </MapboxGL.ShapeSource>


            <MapboxGL.Camera
                ref={camera => {this.camera = camera;}}
                zoomLevel={8}/>

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

All the code compiles fine on both android and iOS there are no errors present either in the console or on the simulators. The expected result is that circles are rendered on the map using the features that were added to the state

Hi @MikeSli would you please suggest me how i get a draggable polygon in mapbox reactnative — MAhipal Singh
Hi, I haven't worked with a draggable polygon so sorry I won't be able to help — MikeSli

MikeSli MikeSli · Accepted Answer · 2019-07-14T13:13:55

So after another project that required my attention I was able to figure this one out yesterday. In my example above I did something like the code below.

<MapboxGL.ShapeSource shape={{type: "FeatureCollection", features: this.state.routes}}/>

After a while I was able to figure out that the shape object actually requires you to provide a full and complete geojson object. This is something I thought I was already providing but it appears I wasn't. First I installed a package for Javascript that enables me to parse something to geojson. NPM Package I used.

Then I started to mapping my data object to an empty array by doing something like this:

let data = [];

outsideMarkerlist.map((element) => {
    data.push(element);
})

Actually I'm not sure if the above step is required but this is what appear to work for me. The resulting array is something that I was able to parse to a actually geojson like so:

const geojson = GeoJSON.parse(data, {Point: ['latitude', 'longitude']});

The second argument denotes the type of geometry check the documentation for the supported types. Also make sure to change the 'latitude' and 'longitude' variables to the names of the properties in your data set that represent these values and then you should be able to fix the issue.

this.setState({json: geojson})

So the only part to show now is the shapesource in the render function. This looks something like the code below.

<MapboxGL.ShapeSource id="routeSource" shape={this.state.json}>
    <MapboxGL.LineLayer
      id="routeFill"
      style={layerStyles.route}
    />
</MapboxGL.ShapeSource>

How to show dynamically retrieved GeoJSON using a ShapeSource and Circle layer for Mapbox using React-Native

1 Answers