visgl / react-map-gl

React friendly API wrapper around MapboxGL JS
http://visgl.github.io/react-map-gl/
Other
7.87k stars 1.36k forks source link

Need help adding route data #1210

Closed AlfieFeldspar closed 4 years ago

AlfieFeldspar commented 4 years ago

I've started a react project using react-map-gl, but now I need to add routes from the optimization API. The docs that i'm finding all reference pure mapbox methods and events (map.on <load, move, etc>) - what is the best way to draw a route with react-map?

Should I consider it like the first example here? https://visgl.github.io/react-map-gl/docs/get-started/adding-custom-data

What are the on-change methods for a map created with react-map? Thank you!

Sorry for duplicate - have found #591. ##591

ariel262626 commented 4 years ago

Yep, you can use the geometry as the data of the GeoJsonLayer:

 const layer = new GeoJsonLayer({
   id: 'geojson-layer',
   data: getGeometry(),
   pickable: true,
   stroked: false,
   filled: true,
   extruded: true,
   lineWidthScale: 20,
   lineWidthMinPixels: 2,
   getFillColor: [160, 160, 180, 200],
   getLineColor: d => colorToRGBArray(d.properties.color),
   getRadius: 100,
   getLineWidth: 1,
   getElevation: 30
 });

And then pass it to your DeckGL layers prop.

Check the docs here: https://deck.gl/docs/api-reference/layers/geojson-layer