CODEWITHSUNDEEP
mapsmapboxmapbox-gl-jsmapbox-gl
Gregory Orlov
Gregory Orlov

Reputation: 537

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

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

Upvotes: 2

Views: 2949

Answers (1)

Manish
Manish

Reputation: 5213

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

Upvotes: 2

Related Questions