Data sources

GeoJSON & clustering

Four ways to load vector data: a service in WGS84, a service in a projected CRS, a file hosted with the page, and a FeatureCollection embedded in the config.

Try it: around 2,400 drinking fountains load as one GeoJSON document. MapLibre groups nearby points into clusters. Zoom in to see individual fountains, then use “Zoom to layer” in the layer panel to find the local demo file.

What this demo shows

data accepts a URL or an inline GeoJSON object, shown here with a WFS response, a static file and embedded data
Clustering is one config key; MapLibre does the grouping
The simplified style (circle-*, line-*, fill-*) expands into proper style layers per geometry type
Zoom-to-layer computes the bounding box from the data itself
crs specifies the source coordinate system. The underground stations use Gauß-Krüger M34 (EPSG:31256) and are transformed to WGS84 on load.

A WFS that supports GeoJSON can serve as a GeoJSON source. Set the supported outputFormat and srsName=EPSG:4326 in its GetFeature URL. For data in another coordinate system, set crs on the layer, as shown with the underground stations. The dedicated wfs layer type builds the request URL and adds paging for WFS 2.0.

Configuration

geojson.map0.json

{
  "$schema": "https://map0.net/schema/v1.json",
  "version": 1,
  "meta": { "title": "GeoJSON sources and clustering" },
  "map": { "center": [16.3725, 48.2083], "zoom": 12 },
  "basemaps": [
    {
      "id": "grau",
      "title": "Grey",
      "type": "raster",
      "url": "https://mapsneu.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png",
      "attribution": "© basemap.at",
      "default": true
    }
  ],
  "layers": [
    {
      "id": "trinkbrunnen",
      "type": "geojson",
      "title": "Drinking fountains (clustered)",
      "data": "https://data.wien.gv.at/daten/geo?service=WFS&request=GetFeature&version=1.1.0&typeName=ogdwien:TRINKBRUNNENOGD&srsName=EPSG:4326&outputFormat=json",
      "cluster": { "enabled": true, "radius": 45 },
      "style": {
        "circle-color": "#0e7490",
        "circle-radius": 6,
        "circle-stroke-color": "#ffffff",
        "circle-stroke-width": 1.5
      },
      "popup": { "title": "{{BASIS_TYP_TXT}}" },
      "attribution": "Stadt Wien, data.wien.gv.at"
    },
    {
      "id": "ubahn",
      "type": "geojson",
      "title": "Underground stations (EPSG:31256)",
      "data": "https://data.wien.gv.at/daten/geo?service=WFS&request=GetFeature&version=1.1.0&typeName=ogdwien:UBAHNHALTOGD&srsName=EPSG:31256&outputFormat=json",
      "crs": "EPSG:31256",
      "style": {
        "circle-color": "#1d4ed8",
        "circle-radius": 6,
        "circle-stroke-color": "#ffffff",
        "circle-stroke-width": 1.5
      },
      "popup": {
        "title": "{{HTXT}}",
        "fields": [{ "key": "EROEFFNUNG_JAHR", "label": "Opened" }]
      },
      "hover": { "content": "{{HTXT}}" },
      "attribution": "Stadt Wien, data.wien.gv.at"
    },
    {
      "id": "demo-areas",
      "type": "geojson",
      "title": "Local demo file",
      "data": "/data/demo-areas.geojson",
      "style": {
        "fill-color": "#f59e0b",
        "fill-opacity": 0.25,
        "line-color": "#f59e0b",
        "line-width": 2
      },
      "popup": { "title": "{{name}}", "content": "<p>{{beschreibung}}</p>" }
    },
    {
      "id": "inline",
      "type": "geojson",
      "title": "Inline GeoJSON",
      "data": {
        "type": "FeatureCollection",
        "features": [
          {
            "type": "Feature",
            "properties": { "name": "Stephansdom" },
            "geometry": { "type": "Point", "coordinates": [16.3733, 48.2085] }
          }
        ]
      },
      "style": { "circle-color": "#dc2626", "circle-radius": 9, "circle-stroke-color": "#ffffff", "circle-stroke-width": 2 },
      "popup": { "title": "{{name}}" }
    }
  ]
}

Full control over the style

For more control, supply an array of MapLibre style layers with expressions and filters. map0 assigns the source and preserves the layer order:

excerpt

{
  "type": "geojson",
  "data": "/data/trees.geojson",
  "style": [
    {
      "type": "circle",
      "paint": {
        "circle-radius": ["interpolate", ["linear"], ["zoom"], 10, 2, 18, 9],
        "circle-color": ["match", ["get", "species"], "oak", "#166534", "#65a30d"]
      }
    }
  ]
}