Live
minimal.xgis
Minimal
Natural Earth countries with one fill + stroke layer.
Examples
Real .xgis samples.
Click any card to launch the running demo — pan, zoom, rotate, and inspect.
Each card also carries a <> link to the
underlying .xgis source on GitHub for copy-paste.
Start here
Live
minimal.xgis
The simplest map
One source, one layer — copy this, change the URL, you have a map.
Run demo
Live
pmtiles-layered.xgis
Streaming PMTiles
Four MVT layers from one archive — water, landuse, roads, buildings.
Run demo
Live
animation-showcase.xgis
Live animation
Three keyframe blocks driving fill, stroke, and dash offset together.
Run demo
All examples
Basics
Single source, single layer — the smallest possible map.
PMTiles + MVT
Streaming vector tiles via PMTiles archives. Each MVT source-layer styles independently.
Live
pmtiles-source.xgis
Single MVT source-layer
One PMTiles archive, one xgis layer filtering one MVT layer.
Live
pmtiles-layered.xgis
Per-layer styling
water / landuse / roads / buildings each driven by its own MVT slice.
Live
osm-style.xgis
OSM-style cartography
Per-kind landuse + road hierarchy + extruded buildings (3D walls visible at high pitch).
Live
pmtiles-only-landuse.xgis
Landuse slice
Filter a PMTiles archive down to a single MVT layer.
Live
pmtiles-protomaps-v4.xgis
Protomaps v4
Protomaps v4 daily world basemap — earth source-layer + vector_layers metadata.
Live
openfreemap-bright.xgis
OpenFreeMap · Bright
Live OpenFreeMap "bright" Mapbox style, run through the /convert pipeline. 93 layers from a real-world cartographic style.
Data-driven styling
Bind feature properties to colors, sizes, and opacity through match(), filters, and gradients.
Live
continent-match.xgis
match() per continent
fill match(.CONTINENT) { ... } — one branch per category.
Live
continent-outlines.xgis
Continent outlines
Same match-table approach driving stroke color.
Live
filter-gdp.xgis
GDP filter
Multiple layers, each with a `filter:` predicate over the same source.
Live
gdp-gradient.xgis
GDP gradient
Continuous color ramp from a numeric property.
Live
income-match.xgis
Income match()
Categorical mapping for World Bank income tiers.
Live
population-gradient.xgis
Population gradient
Choropleth from population numbers.
Live
megacities.xgis
Megacities
Filter cities by population, render with sized symbols.
Live
categorical.xgis
Generic categorical
Cleanest match() example — each region one color.
Lines & strokes
Stroke widths, dash arrays, line caps and joins, signed-distance-field rendering.
Live
bold-borders.xgis
Bold borders
Heavy stroke on a thin fill for poster-style maps.
Live
dashed-borders.xgis
Dashed borders
stroke-dasharray on country boundaries.
Live
dashed-lines.xgis
Dashed lines
Multiple dash patterns side-by-side.
Live
layered-borders.xgis
Layered borders
Stack multiple stroke widths to fake casing.
Live
line-offset.xgis
Line offset
Parallel lines via stroke-offset.
Live
line-styles.xgis
Line styles
Cap, join, dash combinations gallery.
Live
pattern-lines.xgis
Pattern lines
Shape glyphs repeated along a line.
Live
stroke-align.xgis
Stroke align
inset / outset / center stroke alignment.
Live
translucent-lines.xgis
Translucent lines
Line opacity via the offscreen MAX-blend pass.
Live
multi-layer-line.xgis
Multi-layer line
Casing + body + centerline composed as three layers.
Symbols & points
Point glyphs from SVG path strings or built-in shapes, sized and colored from data.
Live
custom-symbol.xgis
Custom symbol
symbol arrow { path "..." } and shape-arrow.
Live
custom-shapes.xgis
Built-in shapes
Circle / square / triangle / arrow primitives.
Live
gradient-points.xgis
Gradient points
Per-point color from a numeric property.
Live
populated-places.xgis
Populated places
City labels sized by population.
Live
procedural-circles.xgis
Procedural circles
Generated point grid with ramped colors.
Live
sdf-points.xgis
SDF points
Signed-distance-field point rendering — crisp at any zoom.
Live
shape-gallery.xgis
Shape gallery
Side-by-side comparison of every built-in symbol.
Text labels
SDF text rendering — anchor strings to lon/lat from feature properties or imperatively from app code.
Live
labels.xgis
Auto labels (GeoJSON)
label-["{.name}"] resolves text from each feature's properties — Mapbox text-field equivalent.
Live
text-overlay.xgis
Imperative overlay
map.addOverlay({text, anchor, color, halo}) — text labels added from app code, re-projected every frame.
Live
pmtiles-labels.xgis
PMTiles labels (MVT)
Same label-["{.name}"] utility against PMTiles vector-tile features — properties surface from the MVT decode worker. Florence Duomo at z=14.
Animation
Time-driven property tweening declared via top-level `keyframes` blocks.
Zoom behavior
Zoom-conditional utilities and level-of-detail switching.
Interaction
Pointer events, hover state, selection.
Raster basemaps
XYZ tile URL templates as a base layer under vector content.
Geographic compositions
Multi-source compositions modeled after print cartography.
Live
physical-map.xgis
Physical map
Land + ocean + rivers + lakes + coastline at default resolution.
Live
physical-map-10m.xgis
Physical map (10m)
Higher-detail Natural Earth at 1:10m scale.
Live
physical-map-50m.xgis
Physical map (50m)
Mid-detail variant; faster initial load than 10m.
Live
night-map.xgis
Night map
Dark navigation palette with subtle hierarchy.
Live
rivers-lakes.xgis
Rivers & lakes
Hydro layers separated for independent styling.
Live
rivers-10m.xgis
Rivers (10m)
Detailed river network from Natural Earth 10m.
Live
states-provinces.xgis
States & provinces
Sub-national admin boundaries.
Live
coastline.xgis
Coastline
Single coastline polyline at default resolution.
The full examples directory carries another ~60 fixture and reference-test files used by the e2e harness — useful for contributors digging into a specific renderer behavior, less so for learning the language.