OSM Buildings + CartoDB : Long night of museums Berlin 2014

Faking building height by using polygon size (CartoCSS)

This example visualizes building footprints from OpenStreetMap by using polygon size to suggest height, with taller structures implied through larger, more prominent shapes. It applies CartoCSS styling to render the polygons with a semi-transparent black outline and a muted tan fill, while the `building-height` property references a `height` attribute from the data. The code relies on CartoCSS’s styling syntax to control line width, fill color, and opacity, but does not extrude actual 3D geometry; instead, it fakes verticality through 2D visual weight. The source data comes from an OSM export polygon layer.

67% match

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

66% match

Scoring buildings based on proximity to neighborhood features

This example visualizes building scores in Portland based on proximity to nearby amenities, assigning higher ranks to structures near supermarkets, rail stops, and parks. It shows a ranked map of buildings, with scores aggregated from overlapping amenity zones. The workflow uses PostGIS spatial SQL functions like `st_expand` and `st_intersects` to generate buffered zones, then sums scores per building via a `union` query and stores results in a new table. The rendering likely relies on a mapping library such as Leaflet or Mapbox, though the code excerpt focuses on the spatial data preparation rather than the front-end visualization.

CCaged

65% match

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

Leaflet example | CartoDB.js

This example combines CartoDB.js with Leaflet to display a choropleth-style map of urban areas, overlaying vector polygons from a CartoDB SQL query. The map uses a Stamen toner tile layer as the base, with a CartoDB visualization layer added via `cartodb.createLayer`. The code enables hover interactions on the sublayer, showing a popup with the `area_sqkm` attribute, and separately renders simplified GeoJSON from the `ne_50m_urban_areas` table using `L.geoJson`. Mouseover events highlight polygons by changing their stroke color to red, while mouseout resets the style.

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

Gist 6bf5a60d08034143bf8b

This map visualizes building footprints across Cambridge and Somerville, joined with distances to Boston libraries and MBTA transit stations. Using CartoDB’s SQL interface, the code applies `ST_Distance` with a nearest-neighbor subquery to compute proximity metrics, then publishes the results as a multilayer visualization. The map is rendered through CartoDB’s mapping engine, displaying thematic styling based on the calculated spatial relationships.

Faking building height by using polygon size

This example visualizes building footprints from OpenStreetMap by faking height through polygon size rather than actual 3D extrusion. It shows how larger building footprints appear taller, using the SQL expression `st_area(the_geom_webmercator)/400` to compute a pseudo-height value from each polygon’s area. The code relies on PostGIS spatial functions (`st_area`, `the_geom_webmercator`) to transform the geometry and calculate the metric, then renders the result as a choropleth-like map where polygon size visually encodes the derived height. The data source is the `osm_export_polygon` table, and the approach emphasizes area-to-height mapping over true elevation data.