React-mapbox-gl: Need More Explanation About GeoJSONLayer Line

[loverdeveloper]

Hi guys!
Can You Send Me A Full Example?

[mklopets]

Hi, there's a GeoJSON example in our examples. You can run the examples locally or view the live demos at http://alex3165.github.io/react-mapbox-gl/demos (find geojson-data in the menu there).

Edit: that one doesn't actually have a LineString – I'll update this answer. Sorry for the premature closing of the issue.

[mklopets]

import * as React from 'react';
import ReactMapboxGl, { GeoJSONLayer } from 'react-mapbox-gl';
import * as MapboxGL from 'mapbox-gl';

// tslint:disable-next-line:no-var-requires
const { token, styles } = require('./config.json');

const Map = ReactMapboxGl({ accessToken: token });

const geojson = {
  'type': 'FeatureCollection',
  'features': [
    {
      'type': 'Feature',
      'geometry': {
        'type': 'LineString',
        'coordinates': [
          [
            -77.01239,
            38.91275
          ],
          [
            -77.00405,
            38.93800
          ]
        ]
      }
    }
  ]
};

const linePaint: MapboxGL.LinePaint = {
  'line-color': 'red',
  'line-width': 5
};

class GeoJsonLayer extends React.Component {
  private center = [-77.01239, 38.91275];

  public render() {
    return (
      <Map
        style={styles.dark}
        center={this.center}
        containerStyle={mapStyle}
      >
        <GeoJSONLayer
          data={geojson}
          linePaint={linePaint}
        />
      </Map>
    );
  }
}

export default GeoJsonLayer;

draws a line like this: