How to show building floors in Deck.gl/react-map-gl

Question

So I'm currently working on Deck.gl and React and I need to load a geojson file which has an additional property named "floors" or something similar which tells how many floors the building has.

Is there any way to extrude alternating floors horizontally just a little bit so that it looks like a floor edge like some of the buildings in this image (although most of them just go thinner at the top). I tried searching the deck.gl but there is no such thing. I looked up and found MapBox-gl-js has something called an extrusion-base-height which lets you add polygon above another but there is no such thing as extruding horizontally to make 1 floor thinner and then back to the original size. This would give and edge whenever a new floor starts.

I have scoured the docs for deck.gl but couldn't find any thing on extruding horizontally or in another sense changing the polygon area/size so that I can draw multiple size polygons on the same spot.

Another clear picture of what I'm trying

Things I want to do.

1. The red polygon is tilted. Need to make it's orientation the same as the green one and reducing it's area at the same time.

2. Move the red polygon base at the top of the green polygon.

The test data I'm using is given below,

var offset = 0.00001;
    var data = [{
        polygon: [
                    [-77.014904,38.816248],
                    [-77.014842,38.816395],
                    [-77.015056,38.816449],
                    [-77.015117,38.816302],
                    [-77.014904,38.816248]                      
                ],
        height: 30
    },
    {
        polygon: [
                    [-77.014904 + offset ,38.816248],
                    [-77.014842 - offset, 38.816395 - offset],
                    [-77.015056 - offset, 38.816449 - offset],
                    [-77.015117 + offset, 38.816302],
                    [-77.014904 + offset, 38.816248]
                ],          
        height: 40
    }

    ];

EDIT:- I think the proper way would be to convert longitude/latitude to Cartesian Coordinates, get the vectors to the 4 corners of the polygon translate the vectors to move towards the center by the offset amount then convert back. But this would only work with quad/rectangle polygon, for buildings that are made up of multiple quads I'd need another way.

Answer 1

If I'm understanding correctly, your problem boils down to: given a polygon (the footprint of the lower part of the building), generate a slightly smaller version of the same polygon, centered within it.

Fortunately, this is really easy using Turf's transformScale method.

So your steps will be:

1. Convert your polygon data into GeoJSON. (Which I assume you have some mechanism to do, in order to display it in Mapbox-GL-JS in the first place.)
2. Generate a smaller polygon using turf.transformScale(base, 0.9)
3. Add the new polygon with map.addSource
4. Display the new polygon with map.addLayer, setting the extrusion base height etc as required.