§ examples

Every API, shipped as a live demo.

Each card mounts a real MapGPU MapView in your browser — no screenshots, no marketing mocks. Code is read-only; the running canvas is exactly the listed source.

total32
live32
rolling out0
simple → advanced · every example has its own URL · every example implements the same `run(container)` contract
basics
01
Basic Map

Smallest viable MapGPU: one MapView, one raster basemap, Ankara in view.

MapViewRasterTileLayer+1
live
basics
02
Zoom, Scale & Attribution

Mount ZoomControlWidget, ScaleBarWidget and AttributionWidget on a base map — each widget follows the same new → mount → bind → destroy lifecycle.

ZoomControlWidgetScaleBarWidget+2
live
basics
03
Imagery Providers

Cycle between OSM, ArcGIS Imagery, CartoDB Dark and OpenTopoMap — one add/remove per swap. The new basemap crossfades over the previous tiles via `raster-fade-duration`.

RasterTileLayerRasterTileLayerOptions+1
live
basics
04
Map Events

Subscribe to click · dblclick · view-change · zoomend · moveend. Live log panel prints the last 5 events with their payloads.

MapView.onMapView.off+1
live
basics
05
fitBounds & flyTo

Three cities arc in via `flyTo` (zoom-out → pan → zoom-in) and one bbox frames the world with padded `fitBounds`. Toggle 2D/3D to see the same call honor pitch/bearing on the globe.

MapView.flyToMapView.fitBounds+2
live
layers
06
GeoJSON Layer

Three GeoJSONLayers — 10 city points, 3 river polylines, 1 polygon hull — each with its own SimpleRenderer symbol type (marker / line / fill). Per-layer visibility toggles.

GeoJSONLayerSimpleRenderer+3
live
layers
07
WMS Layer

Terrestris public WMS endpoint routed through `WmsAdapter` with auto CRS + version negotiation. Segmented control swaps between OSM and Topo layer names at runtime.

WMSLayerWmsAdapter+1
live
layers
08
Layer Group

Three layers (regions · rivers · cities) grouped under a single LayerGroup handle. Toggle cascades visibility to every child, segmented control sweeps opacity from 100% → 25%.

LayerGroupGeoJSONLayer+1
live
layers
09
Image & Video Overlay

ImageOverlay drapes a static bitmap over Türkiye at geographic bounds; VideoOverlay composites a streaming video over a smaller quad. Both follow the same `bounds: [lon,lat,lon,lat]` contract.

ImageOverlayVideoOverlay+1
live
symbology
10
Renderers

Same ten cities rendered four different ways. Segmented control swaps the IRenderer instance on the layer — Simple / UniqueValue (by region) / ClassBreaks (by population) / Callback (size+color from multiple attributes).

SimpleRendererUniqueValueRenderer+2
live
symbology
11
Icon Symbology

Three inline SVG icons (capital / port / airport) registered via `view.loadIcon(id, url)` and assigned per feature through a CallbackRenderer that reads the city's `category` attribute.

MapView.loadIconCallbackRenderer+1
live
symbology
12
GPU Clustering

5 000 random points aggregated through `GpuClusterLayer`. Cluster bucketing runs on CPU (grid-hash) with GPU-side rendering; radius + theme swap at runtime.

GpuClusterLayerGeoJSONLayer+1
live
interactions
13
Drawing Tools

DrawPoint / DrawPolyline / DrawPolygon with live guides, undo/redo, commit callbacks.

DrawPointToolDrawPolylineTool+2
live
interactions
14
Measurement Tools

MeasureLineTool with haversine segments, geodesic area, live readouts via UnitManager.

MeasureLineToolMeasurePolygonTool+1
live
interactions
15
Snap Engine

Endpoint / midpoint / intersection snaps with visual guides. Works with any drawing tool.

SnapEngineSnapVisualizer+1
live
globe
16
Globe View

Vertical-perspective globe with atmosphere halo and transparent space. Satellite imagery basemap; toggle to animate a slow polar spin via `view.goTo({ bearing })`.

MapViewGlobeEffectsConfig+2
live
globe
17
Globe Effects

Atmosphere, fog, pole caps and three sky presets over a satellite globe. Toggle and segmented controls call `view.setGlobeEffects(...)` live.

MapView.setGlobeEffectsGlobeEffectsConfig+2
live
globe
18
Globe Vectors

Six international flight routes sampled along great-circle paths (Slerp) over a dark basemap globe — curving arcs instead of straight chords that would cut through the sphere.

GeoJSONLayerSimpleRenderer+2
live
terrain
19
DTED Terrain

DT0 / DT1 / DT2 elevation data with hillshade and blended raster draping.

DTEDLayerHillshadeLayer
live
terrain
20
TerrainRGB

Mapbox / custom TerrainRGB tiles decoded to real elevation and vertex-displaced.

TerrainRGBLayerTileJSON
live
3d
21
3D Primitives

Four Mesh3DSymbol primitives (box · cylinder · sphere · cone) placed as point features over a satellite tilt view. A CallbackRenderer dispatches on the feature's `kind` attribute.

Mesh3DSymbolGraphicsLayer+1
live
3d
22
MVT 3D Buildings

OpenFreeMap `building` source layer over Manhattan, fill-extruded by `render_height`. ClassBreaksRenderer maps height (0-500 m) to a 13-step color ramp.

VectorTileLayerClassBreaksRenderer+1
live
3d
23
OSM Buildings (live)

Live Overpass API fetch for `building` ways inside a bbox, decoded to GraphicsLayer polygons. ClassBreaksRenderer extrudes each building by its `height` tag.

GraphicsLayerClassBreaksRenderer+1
live
analysis
24
Line of Sight

LosTool + BuildingObstacleProvider with elevation profile chart, 2D and 3D modes.

LosToolBuildingObstacleProvider+1
live
analysis
25
Buffer & Route Sampling

50 km buffer, polyline route elevation sampling, great-circle interpolation.

BufferAnalysisRouteSampler+1
live
analysis
26
Heatmap

Screen-space GPU heatmap from 1 M+ points, adjustable radius and color ramp.

HeatmapLayer
live
shader
27
Custom WGSL Layer

Write your own WGSL vertex + fragment; animated flow field over a raster basemap.

WGSLLayerCustomShaderLayer
live
shader
28
Post-Processing

Bloom, SSAO, FXAA, ACES/Reinhard tonemap — composable post stack.

PostProcessConfig
live
data
29
KML Parser

parseKml → Placemarks with Style and ExtendedData; mount as a GraphicsLayer.

parseKmlGraphicsLayer
live
data
30
GPX Parser

Track, Waypoint and Route features with elevation and timestamp preserved.

parseGpx
live
data
31
CZML Parser

Time-varying scenes: SampledPosition interpolation, Clock tick, temporal entities.

parseCzmlClock+1
live
symbology
32
MIL-STD-2525D/E Symbology

Six tactical units with different affiliations, each keyed by a SIDC code. MilSymbolLayer batch-loads the SVG glyphs via MilBatchLoader + MapViewIconSink and renders them at feature positions.

MilSymbolLayerMilBatchLoader+1
live