Display buildings in 3D

100%

Display buildings in 3D

✓ Published0🌍 Public

Last edited Feb 22, 2018

Created on Feb 22, 2018

This example displays buildings in 3D on a Mapbox GL map centered on downtown Los Angeles, with a tilted and rotated perspective. It uses the Mapbox GL JS API to render a `fill-extrusion` layer from the `building` source-layer in the `composite` vector source, which contains OpenStreetMap building-height data. The extrusion height and base are interpolated from zoom level 15 to 15.05, creating a smooth transition as the user zooms in, with a gray color and 0.6 opacity.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

MapboxGL extrusions

MapboxGL renders a tilted, 3D view of San Francisco with yellow, semi-transparent extruded building footprints and parcel outlines. The map uses the MapboxGL JavaScript library with a custom vector tile style, a pitch of 45 degrees, and a bearing of -17.6 degrees. Two vector sources from Mapbox tilesets supply the parcel and building data, with building heights assigned from the `height` property using `fill-extrusion-height`. The example demonstrates the `fill-extrusion` layer type for realistic 3D visualization of urban geometry.

AAlan McConchie

78% match

Loading thumbnail…

Test of mapbox gl js builidng extrusion with Bend lidar test data

This example tests Mapbox GL JS building extrusion using Lidar-derived building footprint data from Bend, Oregon. Building polygons are styled with extrusion based on height properties, producing a 3D visualization of the urban landscape. The data, stored in a GeoJSON FeatureCollection, includes attributes such as elevation, height, and build height for each structure. The map renders the buildings as extruded 3D volumes, demonstrating Mapbox GL JS's ability to visualize lidar building data with realistic vertical dimensions.

Aajzeigert

72% match

Loading thumbnail…

Mapbox - Extruding circles (simple)

This visualization displays Japanese towers with observation decks on a 3D Mapbox globe, extruding each structure as a blue cylinder whose height corresponds to the tower’s full height—hovering highlights the shaft in red and shows the name, tower height, and observatory height in an info panel. The example loads tower data from a CSV file via D3’s `d3.csv`, geocodes the coordinates into GeoJSON points, and uses Mapbox’s `fill-extrusion` layer to render the bars. Turf’s `turf.circle` generates circular polygons around each point, while `mapObj.queryRenderedFeatures` and `setFeatureState` manage the interactive hover state. The map is tilted at a 60-degree pitch, and the towers’ extrusion heights are scaled by a factor of 600.

HHirosaji

72% match

Loading thumbnail…

Mapbox - Extruding circles (stacked)

This example visualizes Japanese towers with observation decks using Mapbox GL JS and D3 v5. It renders filled 3D extruded circles on a map, with the stacked heights representing each tower’s total height and its observation deck altitude, colored blue and red at hover. The code loads tower height data from a CSV, geocodes points, and uses Turf.js to create circular polygons that are extruded via Mapbox’s fill-extrusion layers and feature-state hover styling.

HHirosaji

71% match

Loading thumbnail…

Display a map

A map centered on Los Angeles displays a raster layer with an adjustable opacity slider. The example uses the Mapbox GL JS library to render the map and the `map.setPaintProperty` method with `raster-opacity` to control layer transparency. A slider input updates the opacity value, while a click event on the map triggers a popup showing the name and type of a feature from a layer called `47greenbook-dapl9g`. The map style and raster source come from Mapbox-hosted data.

Aandyrutkowski

70% match

Loading thumbnail…

Mapbox - Extruding circles (gradient)

A Mapbox GL map visualizes Japanese towers with observation decks, displaying each as a stack of extruded circular layers whose heights encode tower height. D3.js parses CSV data, while Turf.js generates circular geometries at each tower’s coordinates, and Mapbox’s fill-extrusion layers render them with a gradient color scale. Hover interactions reveal the tower name and heights, sourced from the Kiso Sansen Park and social statistics datasets.

HHirosaji

69% match

Loading thumbnail…

Display a map

This example shows an interactive 3D map of a running track at the Red Bull Ring, with the route extruded vertically from the terrain to visualize elevation changes. Built with MapLibre GL and Turf.js, it renders OpenStreetMap raster tiles as the basemap and uses WebGL to display a semi-transparent red fill-extrusion layer whose height corresponds to the elevation values from the GeoJSON LineString coordinates.

TThomasG77

69% match

Loading thumbnail…

Show and hide layers

This interactive map displays two historical layers of Los Angeles: redlining boundaries from 1939 and locations from the same year’s Green Book. A menu of toggleable layer names lets users show or hide each raster or vector source independently. Built with Mapbox GL JS v0.44.1, the code adds both layers on map load and uses `map.getLayoutProperty` and `map.setLayoutProperty` to switch visibility. The raster HOLC layer and the circle-styled Green Book points come from Mapbox-hosted tilesets.

Aandyrutkowski

68% match