3D visualization for communication of data

Basic Information



Latest update


Free of charge, depending on usage of final web application.

Application time

Expert knowledge of javascript needed.

Assistance required

Expert knowledge required

Assistance data

Depends on property to be extruded; i.e. building height data, population density etc.

Tool type

Mobile app

Application area

  • Dissemination and communication

Target Audience

  • Metropolitan regions


Add custom 3D visualisations to a web or mobile map by using Mapbox fill-extrusion layer type and specifying the height and base height of a polygon feature.

For example, you can now easily render 3D buildings, or use the extrusion feature to represent other data (e.g. population density across your city's downtown) when used with data-driven styling and the recent addition of building heights to Mapbox Streets map style.

More info: https://www.mapbox.com/mapbox-gl-js/example/3d-buildings/, https://blog.mapbox.com/3d-features-in-mapbox-gl-js-e94734f12110

Good Example

Melbourne shows planned, under construction and completed development activity in this 3D model of the city: https://developmentactivity.melbourne.vic.gov.au/. Population density in the U.S. using a population dataset, visualized through extrusions. https://www.mapbox.com/bites/00273/

Thematic areas

Road safety & security
  • Enhancing passenger security
  • Safer roads, bike and foot paths
  • Cybersecurity and data privacy

Integrated & inclusive planning
  • Spatial planning / land-use planning
  • Multimodal hubs
  • Cooperation of policy fields and institutional stakeholders
  • Sustainable Urban Mobility Plans - SUMP
Public participation & co-creation



cities [at] mapbox.com

00 n/a

.eu web awards
European Mobility Week
Smart Cities Marketplace
EU Logo

This website is produced as part of CIVITAS ELEVATE Coordination and Support Action funded by the European Union Horizon 2020 research and innovation programme under grant agreement No 824228. © Copyright 2022 CIVITAS Initiative. All rights reserved.

This website is hosted by an environmentally-friendly server provider.