Skip to content

Add a GeoJSON polygon

Replicates the MapLibre example Add a GeoJSON polygon — the classic Maine polygon, authored with the region: sugar.

add-a-geojson-polygon.yaml
# yaml-language-server: $schema=https://docs.maplibre-yaml.org/schema/latest/map.schema.json
# Gallery twin of https://maplibre.org/maplibre-gl-js/docs/examples/add-a-geojson-polygon/
# The `region:` sugar stands in for the hand-built Feature<Polygon>
# (coordinates are an array of linear rings, as in GeoJSON).
type: map
id: add-a-geojson-polygon
config:
center: [-68.137343, 45.137451]
zoom: 5
mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
- id: maine
type: fill
source:
type: geojson
region:
name: Maine
coordinates:
- - [-67.13734, 45.13745]
- [-66.96466, 44.8097]
- [-68.03252, 44.3252]
- [-69.06, 43.98]
- [-70.11617, 43.68405]
- [-70.64573, 43.09008]
- [-70.75102, 43.08003]
- [-70.79761, 43.21973]
- [-70.98176, 43.36789]
- [-70.94416, 43.46633]
- [-71.08482, 45.30524]
- [-70.66002, 45.46022]
- [-70.30495, 45.91479]
- [-70.00014, 46.69317]
- [-69.23708, 47.44777]
- [-68.90478, 47.18479]
- [-68.2343, 47.35462]
- [-67.79035, 47.06624]
- [-67.79141, 45.70258]
- [-67.13734, 45.13745]
paint:
fill-color: "#088888"
fill-opacity: 0.5
  • region.coordinates is an array of linear rings, exactly as in GeoJSON Polygon — add a second ring to cut a hole.
  • The sugar node accepts only coordinates, name, and description; anything else is a parse error, so styling stays on the layer where it belongs.