Adding Layers

Layers are how you visualize data on your map. maplibre-yaml supports all MapLibre layer types, each suited to different kinds of geographic data.

Layer types

Type	Best for	Geometry
circle	Point markers, dots	Point
symbol	Icons and labels	Point
line	Roads, paths, routes	LineString
fill	Areas, regions, polygons	Polygon
fill-extrusion	3D buildings	Polygon
heatmap	Density visualization	Point
raster	Satellite imagery	Raster tiles

Circle layers

Circles are the simplest way to show point data:

- id: points
  type: circle
  source:
    type: geojson
    data: { ... }
  paint:
    circle-radius: 8
    circle-color: "#3b82f6"
    circle-stroke-width: 2
    circle-stroke-color: "#ffffff"
    circle-opacity: 0.8

Line layers

Use lines for paths, routes, and boundaries:

- id: route
  type: line
  source:
    type: geojson
    data: { ... }
  paint:
    line-color: "#ef4444"
    line-width: 4
    line-opacity: 0.8
  layout:
    line-cap: round
    line-join: round

Fill layers

Fill layers shade polygon areas:

- id: regions
  type: fill
  source:
    type: geojson
    data: { ... }
  paint:
    fill-color: "#22c55e"
    fill-opacity: 0.5
    fill-outline-color: "#166534"

Data-driven styling

The real power of maplibre-yaml is data-driven styling. Style features based on their properties using expressions.

Categorical colors

Color features based on a category:

paint:
  circle-color:
    - match
    - ["get", "type"] # Get the "type" property
    - "hospital"
    - "#ef4444" # Red for hospitals
    - "school"
    - "#3b82f6" # Blue for schools
    - "park"
    - "#22c55e" # Green for parks
    - "#6b7280" # Gray default

Colors based on feature type

Interpolated values

Create smooth gradients based on numeric properties:

paint:
  circle-radius:
    - interpolate
    - ["linear"]
    - ["get", "magnitude"]
    - 1 # Input: magnitude 1
    - 4 # Output: radius 4px
    - 5 # Input: magnitude 5
    - 20 # Output: radius 20px
  circle-color:
    - interpolate
    - ["linear"]
    - ["get", "magnitude"]
    - 1
    - "#fef08a" # Yellow for small
    - 5
    - "#dc2626" # Red for large

Size and color based on magnitude

Step functions

Create discrete categories from continuous values:

paint:
  circle-color:
    - step
    - ["get", "count"]
    - "#22c55e" # Green: count < 10
    - 10
    - "#eab308" # Yellow: 10 <= count < 100
    - 100
    - "#ef4444" # Red: count >= 100

Layer ordering

Layers are drawn in order. Later layers appear on top:

layers:
  - id: background-fill      # Drawn first (bottom)
    type: fill
    ...
  - id: roads                # Drawn second
    type: line
    ...
  - id: labels               # Drawn last (top)
    type: symbol
    ...

Filtering layers

Show only features matching certain criteria:

- id: large-earthquakes
  type: circle
  source: earthquakes
  filter: [">=", ["get", "mag"], 4.5] # Only magnitude 4.5+
  paint:
    circle-color: "#ef4444"

Next steps

• Data Sources - Load data from URLs
• Live Data - Auto-refresh and streaming
• Interactivity - Popups and hover effects