Skip to main content
100%

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

✓ Published0🌍 Public
Aajzeigert
Last edited Oct 15, 2016
Created on Oct 15, 2016

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.

AI-generated description

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
72% match
Loading thumbnail…

Mapbox GL JS class demo

This interactive map uses Mapbox GL JS to display the locations of bars and pubs in Bend, Oregon, sourced from OpenStreetMap via Overpass Turbo. Each venue is represented by a point marker on a full-screen, scrollable map, with the points styled as distinct icons. The visualization demonstrates how to load external GeoJSON data into a Mapbox GL JS map and render point features with custom properties, such as the bar's name and amenity type. Users can pan and zoom around the map to explore the distribution of these establishments across the city.

Aajzeigert
70% match
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
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
67% 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
66% 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
66% 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
65% match
Loading thumbnail…

Gist 63540e65c30a453a7e2e9b0345aa42ce

This example renders a 3D cityscape from geospatial building footprints, showing extruded building volumes colored in a uniform teal tone. It queries buildings within a given distance of a latitude/longitude point using Django’s GeoQuerySet (`outline__dwithin`) and converts each polygon outline with Shapely, then extrudes it with Trimesh’s `creation.extrude_polygon`. The scene is centered via a translation matrix, scaled, and exported as a GLB file using Trimesh’s `exchange.gltf.export_glb`. The visualization highlights building heights relative to their footprint areas.

Aandybak
65% match