MapboxGL extrusions

100%

MapboxGL extrusions

✓ Published0🌍 Public

Last edited Jul 2, 2017

Created on Jul 1, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Display buildings in 3D

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.

AAlan McConchie

78% 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

70% 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

70% 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

69% 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

68% match

Loading thumbnail…

Vector Tiles

This example displays vector-tiled map data, rendering both road networks and building footprints over San Francisco. The visualization loads GeoJSON tiles from an external OpenStreetMap vector-datasource service and projects them using `d3.geo.mercator` and `d3.geo.path`. It employs the custom `d3.geo.tile` helper to compute visible tile coordinates at the current zoom level, then asynchronously fetches and draws each tile’s features as SVG paths. Road types are distinguished by stroke colors, while buildings appear as solid black polygons.

Mmbostock

68% match

Loading thumbnail…

Mapbox - Extruding circles (choropleth)

This map visualization shows the locations and heights of Japanese towers with observation decks, using extruded circles on a 3D Mapbox globe. The towers are colored on a yellow-to-red scale based on total height, and hovering over a polygon changes its color to a blue-green scheme and displays the tower's name and height in a white info panel. Built with Mapbox GL JS and d3.v5, the code loads tower data from a CSV, projects point locations into circular polygons using the Turf library, and applies `fill-extrusion` layers with feature-state hover styling. The data comes from the Kiso Sansen National Government Park website and the Social Atlas of Japan.

HHirosaji

67% match

Loading thumbnail…

Simple Mapbox GL example with a custom vector tile

A Mapbox GL example displays tax lot parcels from a custom vector tile source over a base map. The map loads the "deschutes-taxlots" source, rendered as semi-transparent filled polygons with white outlines, and uses the `featuresAt` API to query features on mouse movement. The page shows the current tax lot ID in an overlay panel, updating live as the cursor moves. The code uses Mapbox GL JS v0.11.1 with the light-v8 style and interactive layer events.

Aajzeigert

65% match