Datenquellen

GeoJSON & Clustering

Vier Möglichkeiten, Vektordaten zu laden: ein Dienst in WGS84, ein Dienst mit projiziertem Koordinatensystem, eine Datei neben der Seite und eine FeatureCollection direkt in der Konfiguration.

Ausprobieren: Rund 2.400 Trinkbrunnen werden als ein GeoJSON-Dokument geladen. MapLibre fasst benachbarte Punkte zu Clustern zusammen. Hineinzoomen zeigt die einzelnen Brunnen. Mit „Auf Ebene zoomen“ im Layer-Panel lässt sich anschließend die lokale Demo-Datei anzeigen.

Was diese Demo zeigt

data akzeptiert eine URL oder ein GeoJSON-Objekt, hier am Beispiel einer WFS-Antwort, einer statischen Datei und eingebetteter Daten
Clustering ist ein einziger Config-Eintrag; die Gruppierung übernimmt MapLibre
Der vereinfachte Style (circle-*, line-*, fill-*) wird je Geometrietyp zu vollwertigen Style-Layern expandiert
„Auf Ebene zoomen“ berechnet die Bounding Box aus den Daten selbst
crs legt das Ausgangskoordinatensystem fest. Die U-Bahn-Stationen liegen in Gauß-Krüger M34 (EPSG:31256) vor und werden beim Laden nach WGS84 umgerechnet.

Ein WFS mit GeoJSON-Unterstützung kann als GeoJSON-Quelle dienen. Dazu werden das unterstützte outputFormat und srsName=EPSG:4326 in der GetFeature-URL angegeben. Für Daten in einem anderen Koordinatensystem wird crs am Layer gesetzt, wie bei den U-Bahn-Stationen. Der eigene wfs-Layer-Typ erstellt die Anfrage-URL und ergänzt das seitenweise Laden für WFS 2.0.

Konfiguration

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}}" }
    }
  ]
}

Volle Kontrolle über den Style

Für mehr Gestaltungsmöglichkeiten kann ein Array von MapLibre-Style-Layern mit Ausdrücken und Filtern angegeben werden. map0 weist die Datenquelle zu und behält die Layer-Reihenfolge bei:

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"]
      }
    }
  ]
}