3D Bathymetry Mapping

Mapbox's William B Davis has created an awesome demo map showing the bathymetry of the Great Lakes in 3D. His Great Lakes Extruded map actually allows you to virtually dive in and out of Lake Superior, the largest freshwater lake in the world.

The Great Lakes Extruded bathymetry map uses Mapbox GL's fill-extrusion styling option to help visualize bathymetry data taken from the National Oceanic and Atmospheric Administration. Usually fill-extrusion is used to show height, for example when used to extrude building footprints to visualize the height of buildings in 3D. With the Great Lakes Extruded map William has cleverly used fill-extrusion to visualize the depth of the Great Lakes. 

You can see Mapbox's fill-extrusion styling property used more conventionally (for height rather than depth) in a Ubilabs tutorial on how to use Mapbox GL's fill-extrusion property to create a 3d mapped visualization of European unemployment data. Using the fill-extrusion property you can extrude the height of shapefiles on a Mapbox GL map depending on the height of a value in your data. In this case Ubilabs have used this property to create a 3d map of Unemployment in Europe.

The Ubilabs tutorial shows you how you can use 'fill-extrusion-height' to apply a height to a polygon area based on data values. In the demo map European country shapefiles are extruded based on the unemployment rate in each country in 2015. Each of the country shapefiles on the map are also colored based on the country's unemployment rate.

Another good example of a map using the fill-extrusion property is this San Francisco Lidar Map, which applies the extrude property to San Francisco tree and building Lidar data. This Lidar data has been added to the map in Mapbox Studio from a GeoJSON file (presumably downloaded from the City of San Francisco). The result of using this Lidar data is that as well as visualizing buildings in 3D the map also extrudes other features, such as ships and individual trees.