Display a map

100%

✓ Published0🌍 Public

Last edited Jul 3, 2021

Created on Jul 3, 2021

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Display a map

This example displays an interactive map of France using the Maplibre GL JS library. Two map styles are showcased: a standard topographic map from the IGN PLAN.IGN vector tiles, and an isohypse (contour line) style with an orange monochrome rendering, centered on the Alps. The code fetches style definitions as JSON and applies them to the map, adjusting the tile scheme for compatibility. Attribution is provided to the IGN data source.

TThomasG77

75% match

Loading thumbnail…

Display cadastre on Maplibre

This interactive map displays the French land registry, or cadastre, within the Maplibre GL rendering engine. It shows administrative boundaries—from regions down to individual communes—along with detailed cadastral sections, parcels, and buildings. Using the WebGL-driven Maplibre GL API, it loads vector tile sources from `openmaptiles.geo.data.gouv.fr`, with parcel lines appearing at zoom level 16 and property numbers labeled for identification. The styling, defined in a JSON style sheet, uses fill and line layers with conditional opacity to highlight parcels.

TThomasG77

68% match

Loading thumbnail…

MapLibre GL Starter

This example displays an interactive world map using MapLibre GL and OpenMapTiles. The map is rendered with a dark matter style from Maptiler, centered on coordinates [8, 15] with an initial zoom level of one. The code initializes a `mapboxgl.Map` object, specifying the container element, the style URL, and the default view. This starter serves as a minimal foundation for building map-based visualizations with these libraries.

CCurran Kelleher

67% match

Loading thumbnail…

Wow 3D Map

A 3D terrain map of a game world is rendered as an interactive, rotating surface. A heightmap drives vertex displacement, with multiple textures such as ocean, sand, grass, rock, and snow blended via a custom GLSL shader based on elevation. The visualization uses Three.js with WebGL rendering, OrbitControls for camera navigation, and D3 for CSV data loading. The scene includes a point light, a semi-transparent water plane, and a checkerboard ground, all presented at five times standard pixel density for clarity on high-DPI displays.

Mmeperezcuello

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

66% match

Loading thumbnail…

three.js

This example combines 2D map tiles with a 3D plane using Three.js and OpenLayers. It loads New York City basemap and label layers from a WMTS service, then wraps the rendered map canvas as a texture onto a PlaneGeometry. TrackballControls enable interactive camera rotation around the mapped plane. The scene renders via WebGL, with the map texture updating on each map postrender event.

Ssabrinamochi

66% match

Loading thumbnail…

A basic map with MapboxGL.js

This example shows a basic interactive map of the Netherlands, displaying earthquake data as colored circles and extruded 3D buffers. The map uses MapboxGL.js v0.44.0 to render vector tiles from the PDOK topotiles service and GeoJSON point and buffer data from GitHub. Circle radius and fill-extrusion heights are interpolated based on zoom level, while colors are assigned categorically by earthquake type. The code defines a full Mapbox style object inline, including sources, layers, and paint properties.

NNieneB

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

65% match