Skip to content
maplibre-yaml

Quick Start

Let’s create a map showing earthquake data in under 5 minutes.

1. Create an HTML file

Section titled “1. Create an HTML file”

Create a new file called index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Map</title>
    <link
      href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="module" src="map.js"></script>
  </body>
</html>

2. Create your map configuration

Section titled “2. Create your map configuration”

Create a file called map.js:

import { parseYAML, MapRenderer } from "@maplibre-yaml/core";


const yaml = `
   type: map
   id: earthquake-map
   config:
     center: [-120, 37]
     zoom: 5
     mapStyle: "https://demotiles.maplibre.org/style.json"
   layers:
     - id: earthquakes
       type: circle
       source:
         type: geojson
         url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson"
       paint:
         circle-radius: 6
         circle-color: "#e74c3c"
         circle-stroke-width: 1
         circle-stroke-color: "#ffffff"
   `;


const config = parseYAML(yaml);
const renderer = new MapRenderer(document.getElementById("map"), config);


renderer.on("layer:loaded", ({ layerId, featureCount }) => {
  console.log(`Loaded ${featureCount} earthquakes`);
});

3. Run a local server

Section titled “3. Run a local server”
Terminal window
npx serve .

Open http://localhost:3000 in your browser.

Result

Section titled “Result”

Here’s what you’ll see:

Live earthquake data from USGS

Understanding the configuration

Section titled “Understanding the configuration”

Let’s break down the YAML:

Map configuration 
type: map                    # Block type (required)
id: earthquake-map           # Unique identifier
config:
center: [-120, 37]         # [longitude, latitude]
zoom: 5                    # Initial zoom level
mapStyle: &quot;https://...&quot;    # Base map style URL
Layer configuration 
layers:
- id: earthquakes          # Layer identifier
  type: circle             # Render as circles
  source:                  # Data source
    type: geojson
    url: &quot;https://...&quot;     # GeoJSON URL
Styling with paint properties 
paint:
    circle-radius: 6       # Circle size in pixels
    circle-color: &quot;#e74c3c&quot;
    circle-stroke-width: 1
    circle-stroke-color: &quot;#ffffff&quot;

Add interactivity

Section titled “Add interactivity”

Let’s make the earthquakes clickable. Update your YAML:

type: map
id: earthquake-map
config:
  center: [-120, 37]
  zoom: 5
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: earthquakes
    type: circle
    source:
      type: geojson
      url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson"
    paint:
      circle-radius: 6
      circle-color: "#e74c3c"
      circle-stroke-width: 1
      circle-stroke-color: "#ffffff"
    interactive:
      hover:
        cursor: pointer
      click:
        popup:
          - h3:
              - property: title
Click on any earthquake to see details

Add live updates

Section titled “Add live updates”

Make the map refresh automatically every 60 seconds:

source:
  type: geojson
  url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson"
  refreshInterval: 60000
  updateStrategy: replace

Next steps

Section titled “Next steps”

You’ve created your first interactive, live-updating map! Continue learning: