Only
Interactive WebGL maps from plain HTML. Every example below is a single file that runs with no build step — open one, copy it, edit it.
Features
One concept per page. Copy it, change one attribute, see what moves.
Getting started
Layers
Add scatterplot points
ScatterplotLayer points from a JSON file, sized by population with a sqrt scale and coloured by category.
Create a choropleth
Shade real country boundaries by GDP per capita with GeoJsonLayer. A threshold scale labels the legend classes.
Draw arcs and paths
The same five journeys twice: PathLayer follows the real driving route, ArcLayer curves straight between endpoints.
Animate trips
Move 48 vehicles at once with TripsLayer. Each carries its own departure time, so traffic builds and thins on its own.
Create a heatmap
HeatmapLayer turns thousands of points into a density surface, weighted so large events outweigh clusters of small ones.
Bin points into hexagons
HexagonLayer bins points into counts you can pick, with the tally encoded as both colour and height.
Add icons and labels
Mark places with IconLayer sprites cut from one atlas, then name them with TextLayer. A filter keeps only the biggest cities labelled.
Label many features
PopupLayer draws a WebGL badge on every earthquake above magnitude 5, over a heat ramp of all 1,960 on a dark map.
Aggregate by H3 cells
H3HexagonLayer draws pre-binned data from a column of H3 cell ids: 45 years of cyclone tracks. H3ClusterLayer merges cells into outlines.
Draw spatial index cells
S2Layer, GeohashLayer, QuadkeyLayer and A5Layer draw spatial index cells from a column of ids. The same power stations, binned four ways.
Draw 3D columns
Stand a ColumnLayer bar on every power station, sized by capacity and coloured by fuel. GridCellLayer is the square-cell sibling.
Rasters & tiles
Overlay an image
Pin one georeferenced picture to the map with BitmapLayer: an image and a bounds box, no data rows at all.
Add a raster tile layer
TileLayer takes a {z}/{x}/{y} URL template and draws NASA satellite imagery as a layer you can toggle, fade and stack.
Add vector tiles
MVTLayer turns vector tiles into real geometry styled by your own accessors: OpenStreetMap over Venice, with no basemap at all.
Display a GeoTIFF
COGLayer streams a Cloud-Optimized GeoTIFF by HTTP range request. Recolour and restretch Grand Canyon elevation as GPU uniforms.
3D, terrain & lighting
Place a 3D model
Place a glTF or GLB model at map coordinates with ScenegraphLayer. One asset, one instance per row, no three.js.
Load a CityJSON model
Load 3D buildings from a CityJSON city model: real LoD 2.2 roof surfaces with SolidPolygonLayer and full3d, or extruded footprints.
Render a point cloud
PointCloudLayer draws rows that carry a z: 24,336 elevation samples over the Matterhorn, sized in pixels and coloured by height.
Light the scene
Light extruded buildings with lighting presets, per-value lighting-* overrides, and a sun placed from a date with lighting-sun-date.
Google Photorealistic 3D Tiles
Render Google Photorealistic 3D Tiles through Tile3DLayer. Needs a browser-restricted Map Tiles API key.
Add terrain
Raise real terrain from a keyless DEM. Geographic layers drape onto the surface automatically.
Stories & animation
Sources
Load a file
Read GeoJSON, CSV, Shapefile, KML and GPX through one data attribute. The file extension picks the parser; nothing above it changes.
Extend the data layer
Teach the map a format it does not ship with registerFormat, and decode a live socket feed with registerSource.
Load columnar data
Load an Apache Arrow file with a GeoArrow geometry column, plus CSV, Shapefile and KML on one map. Columns feed the layer with no row objects.
Styling
Colour and size by data
Colour 243 cities four ways with scale(): sequential, threshold and diverging ramps, a categorical ternary chain, and sqrt sizing.
Write accessor scripts
Group accessors in a script type="om/accessors" block, then opt into full JavaScript with js for lookup tables and string work.
Interaction
Filter on the GPU
Cut 21,337 points live with filter-field and filter-range. The DataFilterExtension drops rows in the shader, so ctx.stats always agrees.
Emit and register actions
Fire one custom action from a behavior, a data-emit button and ctx.emit. registerAction defines the name and the payload once.
Undo and redo
Step layer toggles, filters, basemaps and sketches back with the undo-redo widget or Cmd/Ctrl-Z. Camera moves are not undo steps.
Time series
Step a month of USGS earthquakes through time with a custom slider widget that drives a GPU filter.
Wire up behaviors and overlays
Click a neighborhood for a popup, hover a bike rack for a tooltip, and filter points with a slider — all declarative.
Widgets
Add widgets
Add a legend, zoom controls, a scale bar and a live Vega-Lite chart without writing any script.
Use the responsive widget manager
Place widgets in eight logical slots that stack, cluster, and fold into drawers on narrow screens.
Measure distance and area
Measure geodesic distance and area on the map with the measure widget. Haversine lengths, spherical-excess areas, unit toggle.
Draw manually
Draw points, lines and polygons on the map, then save them as GeoJSON. Sketches join undo and redo.
Examples
Complete maps on real data, some of them live. Copy one and swap in your own — the chrome and interaction carry over.
Transport & logistics
Live European airspace
Track real aircraft over Europe from a live ADS-B websocket. IconLayer with key upserts, flush coalescing and transition tweening.
Bay Area shipping
Simulated AIS vessels crossing San Francisco Bay over a websocket. Upsert by key, coalesce bursts with flush, reconnect automatically.
San Francisco last mile
Fleet tracking with polled telematics: vehicle positions refreshed from a REST snapshot, with configureData attaching the bearer token.
Urban planning
Climate & hazards
No example matches that search.