Mapbox GL draw lines and bezier

Question

There is some way to draw line inside Mapbox GL? For example, i need to draw some lines (straight or curve) that connect my markers. With Mapbox i can use Arc.js but i don't know if there already exist some solution for Mapbox GL.

I found mapbox-gl-draw (https://bl.ocks.org/danswick/083a0b48c2cc78c4a08d) but it seems just a tool to use inside a map... but i don't see any API to for draw using javascript.

I also found this Tesspathy (http://gree.github.io/tesspathy/) and maybe one solution could be using it to draw inside a map's context.

What do you think? What could be the best way? Thanks!

Blond

Answer 1

The preferred way to draw lines within Mapbox GL JS is to express the lines as GeoJSON and add them to the map as a GeoJSONSource / line layer pair.

You might find this example of drawing a GeoJSON line and this example of drawing a great arc line helpful.

Hellen

Answer 2

mapbox-gl-draw is the Mapbox supported GeoJSON drawing tool for mapbox-gl. It creates GeoJSON which does not support bezier curves, but it can be used to draw LineStrings.

Geodesic