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.

No comments: