Sunday, January 29, 2017

Indoor Mapping with Mapbox GL

Mapbox GL's extrude property can be used to extrude polygon shapes to create interesting mapped visualizations of data in 3D. It can be used to extrude and color building footprints, as in this Toronto Zoning Map. It can also be used to represent census data in 3D, like in this Population Density Inspector map, which shows the number of people living in each census block in America in 3D. Vox even recently used the extrude property in their National Snowfall Map to visualize the last 24 hours of snowfall across the whole of the USA.

The extrude property has probably been most used to create 3D maps of building height and use. The University of Michigan for example has used the extrude property to create a 3D map of its campus. However Rooms with Mapbox-gl.js is much more than just a building height map. It actually uses the extrude property to create a useful indoor map of all the university's buildings.

By extruding each floor level separately the university has managed to create a map which the user can use to select and view each floor layer individually. This enables the user to view a floor plan of any floor level of any university building. Rooms on the map have also been colored by function, such as office, lab, classroom and restroom.

Rooms with Mapbox-gl.js is a neat demonstration of how the extrude property can be used to create an indoor map. The next stage would be to use map labels to add room information. The map would also benefit from a room search function or a drop-down menu which allowed you to select and find individual rooms on the map.


David Fung said...

I am going to deliver an indoor map by mapboxl. Your blog is very useful to us. May I have a look of the data source (mapbox://ahgnoy.5rk6zsvy)? We want to use the geojson to define the data. Thanks.

Keir Clarke said...

Sorry, that isn't my map so I don't have access. Looking at the code for the map it seems to me that the url: 'mapbox://ahgnoy.5rk6zsvy' points to a generic Mapbox style (in Mapbox Studio this is the monochrome - dark style).