Examples

Explore the runnable Tangram integrations. Each example is a first-class Docusaurus page, so the examples sidebar stays visible while you move between demos.

@vis.gl/tangram-layers

TangramLayerMapView perspectivedeck.gl owns the pitched camera and supplies its matrices to the Tangram renderer.TangramLayerMapView flatAn orthographic Web Mercator view using the same host-driven renderer contract.TangramLayer · experimentalGlobeViewProject Tangram’s vector-tile geometry onto deck.gl’s host-controlled globe.Capability previewFirstPersonViewExplore Tangram from deck.gl’s ground-aware first-person camera.

@vis.gl/tangram-layers (WebXR)

luma.gl experimental · WebXRWebXR GlobeViewRender one Tangram scene into host-provided left- and right-eye framebuffers.luma.gl experimental · WebXRWebXR MapViewPlace a pitched Tangram basemap in physical space with a stereoscopic tabletop view.luma.gl experimental · WebXRWebXR FirstPersonViewStand at street level while Tangram uses per-eye first-person camera matrices.Desktop gestures · WebXRThor gesturesDrive the shared logical view with webcam gesture intents in mono or stereo preview.

@vis.gl/tangram-renderer

PlaygroundClassic playgroundEdit schema-validated scene JSON and explore the original Tangram styling workflow.Offline vectorLocal streetsA keyless local vector-tile preview for quick renderer experiments.Offline vectorTRON previewDark neon roads and animated styling using the local preview data.RasterOpen light mapA light raster backdrop for comparing scene composition and overlays.RasterOpen street mapA street-map raster alternative for testing the renderer without vector data.Shader projectionAlbers projection morphMorph vertices between geographic projections as zoom changes without replacing the host camera.StyleSimpleThe compact starting point for learning scene sources, layers, and draw rules.StyleBubble WrapA colorful, playful map style with layered geometry and labels.StyleWalkaboutA hand-drawn travel-map treatment for exploring expressive styling.StyleRefillA dense, high-contrast city map with detailed roads and labels.StyleRefill Blue TerrainA cool terrain variation of the Refill style.StyleTRONNeon roads, glows, and animated highway traffic from the original style.ShaderCrosshatch previewA local preview of texture and fragment-shader styling.ShaderCrosshatchThe bundled texture and shader example from the classic gallery.Fragment shaderRainbow BuildingsColorful building surfaces driven by a fragment shader.Vertex shaderPop-up BuildingsExtruded building animation driven by a vertex shader.LeafletLeaflet integrationThe packaged classic integration preserves Tangram’s historical Leaflet lifecycle.