Note: this feature is available in WP Mapbox GL JS Advanced.

Add a 3D shape

To add a 3D shape, you need to start off by adding a normal fill. For help on how to do that, see the Other Shapes part of our documentation.

Once you have added a normal fill, you can transform it into a 3D shape. To do this, click on the “Make 3D” button in the Edit Area.

Once you click the Make 3D button, your shape will be transformed from a “Fill” into a Mapbox “Fill Extrusion”, or a 3D shape. You can change it back to a 2D Fill at any time by pressing the “Make 2D” button that replaces the Make 3D button.

You can now specify a base height and a height for the shape. Base height refers to the height above the ground where the shape starts, so you can have the shape begin in the air. Height refers to the highest point of the shape, and must be higher than the base height in order for the shape to work.

By default, we place the height at 2,000,000 metres, in order for the shape to be clearly visible as 3D, and leave the base height at 0 metres. Play around and see what you get!

You can continue to edit the shape and move the shape around on the map, but you need to click its position on the ground, not the shape that’s been made 3D.