Skip to content
maplibre-yaml

maplibre-yaml

Describe a web map in a YAML file and put it on any page, with no JavaScript to write.
Get started View on GitHub

One file, one map

Section titled “One file, one map”

This map of the past week’s earthquakes, sized by magnitude, is the YAML below it. Click a circle to see where it happened.

Earthquakes of the past seven days, from the USGS live feed

Edit this map in the playground

map.yaml
type: map
id: earthquake-map
config:
  center: [-160, 20]
  zoom: 1
  mapStyle: "https://tiles.openfreemap.org/styles/liberty"
layers:
  - id: earthquakes
    type: circle
    source:
      type: geojson
      url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson"
    paint:
      circle-radius: ["interpolate", ["linear"], ["get", "mag"], 1, 2, 7, 20]
      circle-color: "#e74c3c"
      circle-opacity: 0.7
      circle-stroke-width: 1
      circle-stroke-color: "#ffffff"
    interactive:
      hover:
        cursor: pointer
      click:
        popup:
          - h3:
              - property: place
          - p:
              - str: "Magnitude "
              - property: mag
                format: { max-fraction-digits: 1 }
controls:
  navigation: true
  scale: true

Save it as map.yaml, put <ml-map src="map.yaml"></ml-map> on a web page, and the page shows this map. The quick start builds it with you in a few minutes.

Why maplibre-yaml?

Section titled “Why maplibre-yaml?”

No JavaScript to write

The basemap, your data, its styling, popups, legends and story chapters all go in one YAML file, which checks itself and tells you which line is wrong.

Live data

Data loads when the page opens, so the map shows today’s version of a feed, and it can refresh itself while the page stays open.

All of MapLibre

Layers use the MapLibre style spec as it is: expressions, data-driven styling, 3D terrain and globe. You can export a map to a plain style.json.

Works in any page

A plain HTML page from a CDN, an Astro site, or a React, Vue or Svelte app: the <ml-map> element is the same in each.

Choose your path

Section titled “Choose your path”

A map in an HTML page

One HTML file and one YAML file, loaded from a CDN: nothing to install. Quick start →

A story map

A map that moves as the reader scrolls through chapters. Story maps →

Try it in the browser

Edit a map or a story map and watch it change, with nothing to install. Open the playground →

Something else, or not sure? Choose your path lists every route, including Vue and Svelte, thematic maps, large data and coming from MapLibre.