Demo Library · 820 English Pages

820 runnable examples.

Every example now has an English page: title, description, live preview and full source. The curated set below is a starting point; the eight library catalogs cover all 820.

CesiumOpenLayersLeaflet deck.glMapLibreTurf.js three.jsluma.gl

Note: demo interfaces are in Chinese. The code, APIs and behavior are not. Use “Notes (中文)” for the full write-up, or “Run demo” to open the standalone file.

00

All 820, by library

Each catalog lists every example in that library, with an English page for each one.

Cesium240 examples · 3D globe, terrain, 3D Tiles OpenLayers320 examples · projections, OGC services Leaflet35 examples · lightweight 2D maps deck.gl60 examples · large-scale WebGL layers MapLibre GL JS60 examples · open vector tiles Turf.js32 examples · browser-side spatial analysis three.js65 examples · custom 3D scenes luma.gl8 examples · WebGL2 / WebGPU pipelines

01

Cesium

3D globe · terrain · 3D Tiles · three selected examples.

3D Tiles formats demo screenshot

RUN

Cesium

3D Tiles formats

How b3dm, pnts, i3dm and cmpt payloads differ, and which one to export for your data.

Run demo Notes (中文)

Billboards demo screenshot

RUN

Cesium

Billboards

Screen-space icons that always face the camera, with scale, origin and distance rules.

Run demo Notes (中文)

Bathymetry demo screenshot

RUN

Cesium

Bathymetry

A code-generated underwater surface, rendered without external imagery or tokens.

Run demo Notes (中文)

02

OpenLayers

Projections · OGC services · three selected examples.

Point clustering demo screenshot

RUN

OpenLayers

Point clustering

Cluster 300 points by distance, split them on zoom, and keep the labels readable.

Run demo Notes (中文)

Heatmap demo screenshot

RUN

OpenLayers

Heatmap

A canvas heatmap over a street basemap, with radius, blur and weight controls.

Run demo Notes (中文)

ArcGIS tiled service demo screenshot

RUN

OpenLayers

ArcGIS tiled service

Connect an ArcGIS REST tile service with a custom tile grid and resolutions.

Run demo Notes (中文)

03

Leaflet

Lightweight 2D maps · three selected examples.

Basemap switching demo screenshot

RUN

Leaflet

Basemap switching

Swap street, light and dark basemaps without losing markers or overlays.

Run demo Notes (中文)

Marker clustering demo screenshot

RUN

Leaflet

Marker clustering

Cluster 700 points, split them on zoom, and keep click handlers working.

Run demo Notes (中文)

Draw polygon demo screenshot

RUN

Leaflet

Draw polygon

Draw and edit polygons with the drawing plugin and GeoJSON output.

Run demo Notes (中文)

04

deck.gl

Large-scale WebGL layers · three selected examples.

Arc layer demo screenshot

RUN

deck.gl

Arc layer

Great-circle arcs between cities, with GPU picking and hover states.

Run demo Notes (中文)

Bitmap layer demo screenshot

RUN

deck.gl

Bitmap layer

Render a georeferenced bitmap over the map with bounds and opacity.

Run demo Notes (中文)

Brushing demo screenshot

RUN

deck.gl

Brushing

Brush a selection across linked layers and keep the two views in sync.

Run demo Notes (中文)

05

MapLibre GL JS

Open vector tiles · three selected examples.

3D terrain demo screenshot

RUN

MapLibre GL JS

3D terrain

Add terrain, hillshade and exaggeration to a vector-tile map.

Run demo Notes (中文)

Point clustering demo screenshot

RUN

MapLibre GL JS

Point clustering

Cluster a GeoJSON source with expanding circles and counts.

Run demo Notes (中文)

Heatmap demo screenshot

RUN

MapLibre GL JS

Heatmap

A density heatmap driven by a vector source and paint expressions.

Run demo Notes (中文)

06

three.js

Custom 3D scenes · three selected examples.

Cinematic camera demo screenshot

RUN

three.js

Cinematic camera

Fly the camera along a spline over terrain, then hand control to the user.

Run demo Notes (中文)

Data columns demo screenshot

RUN

three.js

Data columns

Extruded columns from tabular data, batched with instancing.

Run demo Notes (中文)

Batched lines demo screenshot

RUN

three.js

Batched lines

Pack thousands of line segments into a single buffer and draw them once.

Run demo Notes (中文)

07

Turf.js

Spatial analysis in the browser · three selected examples.

Buffer demo screenshot

RUN

Turf.js

Buffer

Build a buffer polygon around points or lines, with configurable steps.

Run demo Notes (中文)

Points along a line demo screenshot

RUN

Turf.js

Points along a line

Sample points at fixed distances along a line and label each one.

Run demo Notes (中文)

Bezier spline demo screenshot

RUN

Turf.js

Bezier spline

Smooth a raw polyline into a bezier spline without server-side processing.

Run demo Notes (中文)

08

luma.gl

WebGL / WebGPU pipelines · three selected examples.

Per-vertex color demo screenshot

RUN

luma.gl

Per-vertex color

A minimal WebGL2 pipeline with shaders and per-vertex color attributes.

Run demo Notes (中文)

Texture mapping demo screenshot

RUN

luma.gl

Texture mapping

Bind a texture, sample it in a fragment shader, and handle UV coordinates.

Run demo Notes (中文)

Instancing demo screenshot

RUN

luma.gl

Instancing

Draw thousands of instances in one call with per-instance attributes.

Run demo Notes (中文)

Want the full catalog?

Each library has 8–320 examples, all with source and a live iframe on the Chinese site.

OpenLayers (320)Cesium (240)