Fogging the Terrain

Mapbox GL has a new fog effect which makes their 3D terrain map look even more impressive. This new distance fog effect helps to give 3D terrain a much better sense of depth. Having the terrain faded with distance provides an important visual clue to the perception of distance.

The new fog effect is very easy to implement in your Mapbox GL maps. It is added with a simple call map.setFog(..). The fog has three style properties which you can adjust: color, range - (adjusting the visual distance where fog is active and dissipates), and horizon-blend (controlling how it blends at the horizon line).

Some Mapbox GL JS users have already begun experimenting with this new fog effect. Steve Attewell has created a 3D map with a camera lens effect. This map uses CSS with the new fog effect to create a neat tilt-shift effect on the map terrain. 

James Seppi's 3D Hillshade Playground is a handy map which you can use to play around with some of the properties which can be applied to 3D terrain in Mapbox GL, including the new fog distance effect. This 3D Hillshade Playground could be very useful as it allows you to experiment with the terrain settings to find the desired style of 3D terrain which you can then use with your own Mapbox GL maps. 

Using the controls in the 3D Hillshade Playground you can adjust the fog color and range (and turn the fog on and off). You can also use the controls to adjust the height of the terrain and the hillshade shadows.