Skip to content
maplibre-yaml

maplibre-yaml

Create interactive maps with simple YAML — no JavaScript required
Get Started View on GitHub

See It in Action

Section titled “See It in Action”
A simple map created with just YAML

Why maplibre-yaml?

Section titled “Why maplibre-yaml?”

No JavaScript Required

Define your entire map in YAML. Perfect for students, content creators, and developers who want rapid prototyping.

Runtime-First

Data is fetched when your map loads, keeping bundles tiny (~165KB) and supporting real-time updates.

Full MapLibre Power

Access all MapLibre GL features: expressions, data-driven styling, 3D terrain, and more.

Framework Agnostic

Use with vanilla JavaScript, Astro, or any framework via web components.

Quick Example

Section titled “Quick Example”
type: map
id: my-first-map
config:
  center: [-74.006, 40.7128]
  zoom: 12
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: bike-lanes
    type: line
    source:
      type: geojson
      url: "https://data.cityofnewyork.us/resource/bikes.geojson"
    paint:
      line-color: "#00ff00"
      line-width: 2
controls:
  navigation: true
  scale: true

Ready to Start?

Section titled “Ready to Start?”

Installation

Get maplibre-yaml installed in your project in under a minute. Install Now →

Your First Map

Follow our step-by-step tutorial to create your first map. Start Tutorial →