3D geo data in the Mapbox-gl viewer with 3D tiles

Tom van Tilburg & Anne Blankert

Playlists: 'foss4g2019' videos starting here / audio / related events

Mapbox GL JS is a powerful JavaScript library that uses WebGL to render interactive maps from vector tiles and other sources. Mapbox has recently added custom layers to its set of allowed layer types. The custom layer allows developers to render custom data while directly using the the WebGL render engine.

We have implemented mapbox-gl custom layers for rendering 3D tiles and point cloud data. This enables the already feature rich Mapbox rendering engine to be combined with web-visualization of true geographic 3D data directly from OGC formats. An advantage of this is that you can use the mapbox navigation and base-layer rendering while at the same time complex 3D objects directly to your web browser. in a way similar to vectortiles in 2D space.

In this talk we will demonstrate an implementation of a 3D Tiles viewer as a Mapbox GL JS custom layer. WebGL rendering is implemented using three.js. This addition enables you to add a 3D-tiles layer with true 3D objects on top of your existing mapbox implementation just as easy as you would be adding a vector-tile service.

We will discuss some technical issues we have encountered, give examples on how you can use it and show an extensive demonstration of what you can do with it.