Drawing Polygons From GeoJSON in react-mapbox-gl

Question

I'm trying to work with the react-friendly wrapper written by the uber team for mapbox gl.

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 <Layer/> component:

sourceOptions: Options object merged to the object used when calling GeoJSONSource method

Following the mapbox API for geoJsonSource, I am trying the following and wondering what else I need to do in order to get it to render:

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 }) => {
    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;

maxwell maxwell · Accepted Answer · 2016-08-31T15:42:47

So, I ended up using their onStyleLoad property on the <MapboxGl /> component in order to access a function which returns the original mapbox gl API. The solution is far from perfect but it does answer my underlying question. I guess it kind of functions like an escape hatch.

I followed this line of their documentation:

To use the original Mapbox API use onStyleLoad property, the callback function will receive the map object as a first arguments, then you can add your own logic using mapbox gl API.

The code looked like this:

class App extends Component {

    componentWillMount(){
        this.setState({
            center : [138.6000, -34.9286]
        })
    }

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

    _onStyleLoad = (map, event) => {
        console.log("map", map, "event: ", event, this.refs.map)
        map.addSource("16MAR13-FP-TOMNOD", {
            type: 'vector',
            tiles: ['https://s3.amazonaws.com/tomnod-vector-tiles/16MAR13-FP-TOMNOD/{z}/{x}/{y}']
        })
        map.addLayer({
            "id": "16MAR13-FP-TOMNOD",
            "type": "line",
            "source": "16MAR13-FP-TOMNOD",
            "source-layer": "16MAR13-FP-TOMNOD",
            "layout": {
                "visibility": "visible"
            },
            "paint": {},
            "interactive": true
     });
    }

    _onClick = () => {
        this.setState({
            center : [110,23]
        })
    }

    render() {
        return (
        <div className="App">
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
            </div>
            <ReactMapboxGl
                style={"mapbox://styles/mapbox/streets-v8"}
                center={this.state.center}
                zoom={[13]}
                accessToken={accessToken}
                containerStyle={containerStyle}
                onStyleLoad={this._onStyleLoad}
                onClick={this._onClick}
                ref='map'>
            </ReactMapboxGl>
        </div>
    );
    }
}

export default App

Drawing Polygons From GeoJSON in react-mapbox-gl

1 Answers