Is it possible to draw LineString with elevation (altitude) with Mapbox?

Question

I'm using react-mapbox-gl and was trying to pass LineString with tree coordinates [[[58.7541522, 55.7444, 10], [48.7041522, 55.7444, 80]]] to GeoJSONLayer and to line-Layer

 <GeoJSONLayer
                data={feature}
                linePaint={{
                    'line-color': '#3bb2d0',
                    'line-width': 2,
                }}
/>

But it doesn't work

That's not supported yet in Mapbox GL JS. DeckGL does seem to. — AndrewHarvey, Sep 19 '19 at 14:23
There is a way to do this using fill-extrusion by converting the linestring into a very thin polygon. https://fpbqf.csb.app/ — Manish, Sep 19 '19 at 19:11
Thanx @ManishRaj! Could you please add a link to this codesandbox page? — Gregory Orlov, Sep 20 '19 at 08:06

score 2 · Answer 1 · answered Sep 20 '19 at 10:56

There's a way to do this with mapbox-gl-js using fill-extrusion and extending the linestring to behave like a really thin polygon. You can use lineToPolygon from @turf/line-to-polygon to convert lineStrings to polygon to get a fill-able GeoJSON like this one:

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"height":40},"geometry":{"type":"Polygon","coordinates":[[[58.7541522,55.7444],[48.7041522,55.7444],[48.704152205,55.744405],[58.754152205,55.744405],[58.7541522,55.7444]]]}}]}

And then use fill-extrusion layer type to add it to map.

        <Source
          id="linestr"
          geoJsonSource={{
            type: "geojson",
            data: geojson
          }}
        />
        <Layer
          id="linestr"
          sourceId="linestr"
          type="fill-extrusion"
          paint={{
            "fill-extrusion-color": "#f00",
            "fill-extrusion-base": 0.5,
            "fill-extrusion-opacity": 0.5,
            "fill-extrusion-height": ["get", "height"]
          }}
        />

Here's the full example: https://codesandbox.io/s/trusting-currying-fpbqf

Is it possible to draw LineString with elevation (altitude) with Mapbox?

1 Answers1