Examples

Every example here is a live map with the complete YAML document that draws it, ready to copy. Start with the first four, in order; each adds one idea to the one before. Then use the gallery to look up a specific technique.

Learn by example

Basic map Five cities written into the document, drawn as circles sized by population, with a popup.

Interactive points Points colored by category, with a generated legend, a hover highlight and a richer popup.

Thematic maps Four maps from one classify: block each: a choropleth, a rate map, graduated symbols and categories.

Earthquake tracker The USGS earthquake feed, fetched again every minute and redrawn.

Find a specific technique

MapLibre examples in YAML

The MapLibre GL JS examples rebuilt as YAML documents, grouped by what they show, with a search. Open the gallery

Clustered points

Thousands of points grouped into counted clusters that zoom in on click. Create and style clusters

Live updates by id

Vehicles or sensors that move: each poll updates the features it matches and keeps the rest. Live data: merge

Large data files

Files read in parts from a static host, with no tile server: PMTiles, FlatGeobuf, GeoParquet and Cloud Optimized GeoTIFF.

Showcase

Mapzen classics

Crosshatch and Blueprint, two Tangram-era looks rebuilt in YAML and run with experimental effects, next to their exported style.json. View the classics

Use an example on your page

Save the document as a .yaml file in your site and load it with <ml-map src="map.yaml"> on an HTML page, or with the <Map> component in Astro. A document that reads a file by a path starting with /, such as /data/classify/sample-tracts.geojson, needs that file in your site too.