Drawing Polygons From GeoJSON in react-mapbox-gl
<p>I'm trying to work with the react-friendly wrapper written by the   <a href="https://github.com/alex3165/react-mapbox-gl/blob/master/docs/API.md" rel="nofollow">uber team for mapbox gl</a>.</p>

<p>I am wondering if anyone has successfully rendered polygon features from a geojson source with their API.  It states that a source options is attribute is available on the <code>&lt;Layer/&gt;</code> component:</p>

<blockquote>
  <p><strong>sourceOptions</strong>: Options object merged to the object used when calling GeoJSONSource method</p>
</blockquote>

<p>Following the mapbox API for <a href="https://www.mapbox.com/mapbox-gl-js/api/#GeoJSONSource" rel="nofollow">geoJsonSource</a>, I am trying the following and wondering what else I need to do in order to get it to render:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 = _removed for safety_

class App extends Component {

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

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

            &lt;/ReactMapboxGl&gt;
        &lt;/div&gt;
    );
    }
}

export default App;</code></pre>
</div>
</div>
</p>