mapbox/mapbox-data-visualization-patterns

Was macht mapbox-data-visualization-patterns?

Muster für die Datenvisualisierung auf Karten, einschließlich Choroplethenkarten, Heatmaps, 3D-Visualisierungen, datengesteuerter Gestaltung und animierten Daten. Behandelt Layertypen, Farbskalen und Leistungsoptimierung.

Einführung

Dieses Repository enthält wiederverwendbare Muster und Codebeispiele für die Erstellung von Kartenvisualisierungen mit Mapbox GL JS. Die Muster sind modular aufgebaut und können direkt in Ihre Projekte integriert werden.

Musterübersicht

Muster	Beschreibung
Choroplethenkarte	Färbt geografische Gebiete (z. B. Länder, Bezirke) basierend auf einem Datenwert ein. Verwendet fill-color-Eigenschaften mit datenabhängigen Ausdrücken.
Heatmap	Stellt Punktdichten als Farbverlauf dar (von kalt zu heiß). Nutzt den heatmap-Layertyp von Mapbox mit einstellbarem Radius und Deckkraft.
3D-Visualisierung	Zeigt Gebäudeextrusionen, digitale Geländemodelle oder dreidimensionale Punktwolken. Verwendet fill-extrusion-Layer und Terrainquellen.
Datengesteuerte Gestaltung	Passt Farbe, Größe, Deckkraft oder Symbol von Features dynamisch an Datenattribute an. Beispiel: Größere Kreise für höhere Werte.
Animierte Daten	Bewegt Marker, fließende Linien (Travel-Lines) oder interpoliert Werte über die Zeit. Nutzt requestAnimationFrame und GeoJSONSource.setData.

Erste Schritte

1. Installieren Sie Mapbox GL JS: npm install mapbox-gl
2. Erstellen Sie eine HTML-Datei mit einem Kartencontainer (<div id="map">)
3. Fügen Sie ein <script>-Tag mit Ihrem Mapbox-Token hinzu:

mapboxgl.accessToken = 'IHR_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [0, 0],
  zoom: 2
});

Beispiele

Choroplethenkarte

map.on('load', () => {
  map.addLayer({
    id: 'choropleth',
    type: 'fill',
    source: { type: 'geojson', data: 'https://daten.quelle/laender.geojson' },
    paint: {
      'fill-color': [
        'interpolate', ['linear'], ['get', 'bevoelkerung'],
        1000000, '#f2f2f2',
        10000000, '#fdcc8a',
        100000000, '#e34a33'
      ],
      'fill-opacity': 0.7
    }
  });
});

Heatmap

map.addLayer({
  id: 'heatmap',
  type: 'heatmap',
  source: { type: 'geojson', data: 'https://daten.quelle/standorte.geojson' },
  paint: {
    'heatmap-radius': 30,
    'heatmap-weight': 1,
    'heatmap-intensity': 1.2,
    'heatmap-color': [
      'interpolate', ['linear'], ['heatmap-density'],
      0, 'rgba(33,102,172,0)',
      0.2, 'rgb(103,169,207)',
      0.4, 'rgb(209,229,240)',
      0.6, 'rgb(253,219,199)',
      0.8, 'rgb(239,138,98)',
      1, 'rgb(178,24,43)'
    ]
  }
});

Leistungsoptimierung

• Clustering: Reduzieren Sie die Anzahl gerenderter Punkte, indem Sie nahe beieinander liegende Features zusammenfassen.
• LOD (Level of Detail): Zeigen Sie detaillierte Layer nur bei ausreichendem Zoom-Level an (minzoom/maxzoom).
• Layer minimieren: Entfernen Sie nicht sichtbare Layer mit map.removeLayer(id).
• Quell-Puffer: Cache GeoJSON-Quellen in einem geeigneten Format (z. B. Vector Tiles für große Datensätze).

Unterstützte Plattformen

• Mapbox GL JS (Web)
• Mapbox Mobile SDKs (iOS, Android)
• Mapbox Studio (Style-Editor) – die Beispiele sind auf GL JS bezogen, aber die Konzepte übertragbar.

Lizenz

Dieses Projekt steht unter der MIT-Lizenz – siehe LICENSE für Details.