At a client of mine, we are working with Mapbox to show a floor plan of the building. As the map needs to be as readable as possible we wanted to do an experiment by using an orthographic or axonometric projection.

Unfortunately, the camera in the Mapbox GL JS library cannot be configured to show an orthographic projection. After some searching, I did find out that there is an undocumented property that allows you to control the Field of View of the camera. With this feature, you can approach an axonometric view by setting the Field of View to a really low value.

As it stands, it is quite straight-forward. You need to change the value of “map.transform._fov” or “map.transform.fov” to the desired value after you have initialized the map. Which value applies depends on the effect you want to achieve and I recommend playing around with it. Further on in this post, I will share which values I found to be effective.

Here is a short example implementation based on the Satellite map example of Mapbox:

<div id='map'></div>
<script>
mapboxgl.accessToken = '[TOKEN]';
var map = new mapboxgl.Map({
    container: 'map',
    zoom: 9,
    center: [137.9150899566626, 36.25956997955441],
    style: 'mapbox://styles/mapbox/satellite-v9'
});
// Here we set the field of view
map.transform._fov = 0.2;
</script>

Technically, this is a poor example since the Satellite map example has a top-down view and changing the Field of View won’t change much. But it was a concise piece of code and clarified the actual line that you would need to add.

If you want to see the effect of this in action, try it out your self using the Buildings in 3D example of Mapbox and set its FOV to 0.2, and set it to 0.9 and look at the differences.

Keep in mind that you get the best results when you stick to values between 0.2 and 1.0.

During my trials, I did find that if you go below 0.2 with the _fov property it will start to show artefacts where polygons (in this case, buildings) match. These artefacts mainly involve z-fighting issues and could be solved by adding a little extra room between your polygons; I haven’t found a way to programmatically introduce that in Mapbox so you’d probably need to edit your tiles/sources to accomplish this.

When you pick a number that is too high you run into some artefacts as well. If you go higher than 1-1.4 (depending on the pitch of your camera) you may experience clipping issues or performance issues.

If this tip was of any help to you, show me what awesome maps you have visualized using Mapbox and this tip. I love seeing what you create!