React-mapbox-gl: Example of GeoJSONSource

[maxwell-oroark]

I am having a hard time following your API documentation with regard to drawing polygon features from a geoJSON source.

In your London (multiple markers) example, you seem to store the entire array of markers and their coordinates on state. Would you recommend this when you have tens of thousands of complex polygons? What would be your solution to drawing many polygons from a geoJSON source? Thanks!

I have tried the following:

import React, { Component } from 'react';
import ReactMapboxGl, { Layer, Feature } from "../node_modules/react-mapbox-gl/dist";
import logo from './logo.svg';
import './App.css';

let containerStyle = {
    height: "100vh",
    width: "100vw"
};

const accessToken = [access token removed for safety]

class App extends Component {

    _polygonClicked = ({ feature }) => {
    console.log("Polygon clicked", feature.geometry.coordinates);
    };

    render() {
        return (
        <div className="App">
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>Welcome to React</h2>
            </div>
            <ReactMapboxGl
                style={"mapbox://styles/mapbox/streets-v8"}
                center={[11.956511272000057,10.095463399000039]}
                zoom={[11]}
                accessToken={accessToken}
                containerStyle={containerStyle}>
                <Layer
                    type="fill"
                    paint={{ "fill-color": "#3bb2d0", "fill-opacity": .5 }}
                    id="testing"
                    sourceOptions={'religious',{
                        "type": 'geojson',
                        "data":'../small_poly/bridges.geojson'
                        }}
                    sourceId={'religious'}>
                </Layer>

            </ReactMapboxGl>
        </div>
    );
    }
}

export default App;

Thank you in advance!

[kitten]

My PR #44 should add the functionality you need. The problem is, React Mapbox GL actually generates GeoJSON for the features that are being rendered. If you did want to use it with your own GeoJSON, you either had to manually manage the source and add the sourceId to a layer ( :cry: ) or parse the GeoJSON and convert them into features... which are then converted back into GeoJSON :sob:

So in #44 I'm adding a GeoJSONLayer that will just take your data directly ;)

[alex3165]

I have added some documentations for the geojson layer and released it with the version 0.11.0 of the library.