FlatGeobuf source

FlatGeobuf is a compact binary file of features with an optional spatial index. A .fgb URL on a geojson source is all it takes: maplibre-yaml reads the file into the source, so layers, popups, the legend and fitTo behave exactly as for a .geojson file. Click a district; zoom in past 11 to see the stations, which are read by view.

Edit this map in the playground

The complete document

flatgeobuf-source.yaml

# A FlatGeobuf file as a GeoJSON source — YAML only. The .fgb file
# name is the only hint; layers, popups, the legend and fitTo work as for
# a .geojson file. Synthetic, public-domain data (a fictional sea area).
type: map
id: flatgeobuf-source
config:
  center: [10.2, 42.15]
  zoom: 8
  mapStyle: "https://tiles.openfreemap.org/styles/positron"
  fitTo: { source: districts, padding: 24 }
legend:
  title: District plan
sources:
  districts:
    type: geojson
    url: /gallery-assets/cloud-native/districts.fgb
  points:
    type: geojson
    url: /gallery-assets/cloud-native/points.fgb
    load: { mode: viewport, minzoom: 11 }
layers:
  - id: districts
    type: fill
    source: districts
    paint:
      fill-color: ["match", ["get", "category"], "park", "#2a9d8f", "residential", "#e9c46a", "industrial", "#e76f51", "#8d99ae"]
      fill-opacity: 0.65
      fill-outline-color: "#1d3557"
    legend: { label: Districts, color: "#e9c46a", shape: square }
    interactive:
      click:
        popup:
          - h3: [{ property: name }]
          - p: [{ str: "Category: " }, { property: category }]
          - p: [{ str: "Population " }, { property: population }]
  - id: points
    type: circle
    source: points
    paint: { circle-radius: 4, circle-color: "#264653", circle-stroke-width: 1, circle-stroke-color: "#ffffff" }
    legend: { label: "Stations (from zoom 11)", color: "#264653", shape: circle }

What to notice

• type: geojson stays the MapLibre source type; the .fgb file name tells maplibre-yaml to read it as FlatGeobuf. For a URL without the extension, add format: flatgeobuf.
• districts is read whole (the default, load: all) — fine for files up to about 10 MB.
• points uses load: { mode: viewport, minzoom: 11 }: only the features in view are read, through the file’s spatial index, and re-read as the map moves. Below zoom 11 nothing is read. This needs a host with HTTP range requests (GitHub Pages, Netlify, S3, R2; not python -m http.server).
• fitTo frames the decoded districts.
• Data: synthetic and public domain (a fictional sea area), generated by scripts/fixtures/cloud-native.py.

More: FlatGeobuf — sizes, hosting, and what the map says when a file can’t be read.

Use this map

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. To use it without maplibre-yaml, export it to a style.json with mlym emit.

Open this map in the playground: change it and see the result as you type, then share it as a link or download it as a folder.

Guide

FlatGeobuf · Large data

Reference

Sources

← Back to MapLibre examples in YAML