Individuelle Karte gestalten: Dark Mode, Brandfarben und kein

Jede Karte, die Sie je in einer App eines Mitbewerbers gesehen haben, verwendet denselben Standardstil. Die generischen beigen Straßen, das mittelblaue Wasser, die überfüllten POI-Icons, die um Aufmerksamkeit mit Ihrer eigenen UI kämpfen, das sind die universellen Standards, entworfen, um niemanden zu verletzen und niemanden zu begeistern. Sie kommunizieren eine Sache deutlich: Dieses Produkt verwendet eine Kartenbibliothek, besitzt kein Kartenerlebnis.

Benutzerdefiniertes Karten-Styling ändert das. Eine Dark-Mode-Karte auf einem Logistik-Dashboard, ein markengrünes Straßennetz auf einer Immobilien-App, ein sauberer minimalistischer Stil mit Ihrem Logo, wo früher das Attributions-Wasserzeichen war, das sind Details, die ein Tool in ein Produkt verwandeln.

Dieses Tutorial führt durch die Mapbox Style Specification, wie sie von MapAtlas implementiert wird, von der Struktur des Style-JSON bis zu einem vollständigen Hell/Dunkel-Toggle in React. Sie benötigen keine GIS-Erfahrung. Sie müssen mit JSON und JavaScript vertraut sein.

Wenn Sie noch keine grundlegende Karte eingerichtet haben, beginnen Sie zuerst mit So fügen Sie Ihrer Website interaktive Karten hinzu, dann kommen Sie für das Styling hierher zurück.

Warum Standard-Kartenstile generisch aussehen

Der Standardstil eines Tile-Anbieters ist für die maximal breite Zielgruppe in möglichst vielen Kontexten universell lesbar konzipiert. Er priorisiert Informationsdichte über ästhetische Meinung. Straßen müssen sichtbar sein. Labels müssen kontrastieren. POI-Icons müssen erkennbar sein.

Keines dieser Ziele stimmt mit den Zielen Ihres Produkts überein. Ihre App interessiert sich wahrscheinlich für eine kleine Teilmenge dessen, was auf der Karte ist, Lieferrouten, Immobilienstandorte, Gesundheitseinrichtungen, und alles andere ist visueller Lärm.

Benutzerdefiniertes Styling ermöglicht es Ihnen, zu unterdrücken, was Sie nicht brauchen, hervorzuheben, was Sie brauchen, und sicherzustellen, dass die Karte als Teil Ihres Produkts gelesen wird, anstatt als einem eingeworfenen Widget eines Drittanbieters.

Die Style Specification verstehen

Ein MapAtlas-Stil ist ein JSON-Dokument mit fünf Schlüsselabschnitten:

{
  "version": 8,
  "name": "My Brand Style",
  "sources": { ... },
  "glyphs": "https://tiles.mapatlas.eu/fonts/{fontstack}/{range}.pbf?key=YOUR_API_KEY",
  "sprite": "https://tiles.mapatlas.eu/sprites/basic?key=YOUR_API_KEY",
  "layers": [ ... ]
}

• sources: woher die Kartendaten kommen (MapAtlas Vektor-Tile-Endpunkte)
• glyphs: woher Schriftdateien für Label-Rendering geladen werden
• sprite: woher Icon-Bilder für POI-Marker geladen werden
• layers: die geordnete Liste visueller Ebenen, jeweils mit Paint- und Layout-Eigenschaften

Das layers-Array ist der Bereich, in dem Sie die meiste Zeit verbringen. Jede Ebene gibt einen Datentyp an (fill, line, symbol, circle, fill-extrusion), welche Quell-Features gezeichnet werden sollen und wie sie gemalt werden sollen.

Ein minimaler, aber vollständiger Stil, der eine Vektor-Tile-Basis rendert:

{
  "version": 8,
  "name": "Brand Base",
  "sources": {
    "mapatlas": {
      "type": "vector",
      "tiles": ["https://tiles.mapatlas.eu/v1/tiles/{z}/{x}/{y}.mvt?key=YOUR_API_KEY"],
      "minzoom": 0,
      "maxzoom": 14
    }
  },
  "glyphs": "https://tiles.mapatlas.eu/fonts/{fontstack}/{range}.pbf?key=YOUR_API_KEY",
  "sprite": "https://tiles.mapatlas.eu/sprites/basic?key=YOUR_API_KEY",
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": { "background-color": "#f5f0eb" }
    }
  ]
}

Das rendert eine leere Leinwand in Ihrer gewählten Hintergrundfarbe. Von hier aus fügen Sie Ebenen für Wasser, Landnutzung, Straßen, Gebäude und Labels hinzu.

Dark Mode: Die Kernfarben ändern

Eine Dark-Mode-Karte ist nicht einfach ein invertiertes Rasterbild. Es ist ein vollständig anderer Satz von Paint-Eigenschaften, die auf dieselbe Vektorgeometrie angewendet werden. Das ist einer der Kernvorteile von Vektor-Tiles: ein Tile, unendliche visuelle Interpretationen.

Die wichtigsten Farben, die für ein dunkles Theme aktualisiert werden müssen:

So wenden Sie das in einer Stil-Ebene an:

{
  "id": "water",
  "type": "fill",
  "source": "mapatlas",
  "source-layer": "water",
  "paint": {
    "fill-color": "#0d3b66",
    "fill-opacity": 1
  }
}

{
  "id": "road-major",
  "type": "line",
  "source": "mapatlas",
  "source-layer": "transportation",
  "filter": ["==", "class", "primary"],
  "layout": {
    "line-join": "round",
    "line-cap": "round"
  },
  "paint": {
    "line-color": "#3a3a5c",
    "line-width": ["interpolate", ["linear"], ["zoom"], 10, 1, 16, 4]
  }
}

Der interpolate-Ausdruck in line-width skaliert die Straßenbreite basierend auf dem Zoom-Level, schmal bei geringem Zoom, breiter beim Hineinzoomen. Das ist datengesteuertes Styling ohne zusätzliche Netzwerkanfragen.

Markenfarben anwenden

Die meisten Design-Systeme definieren eine Primärfarbe (z.B. #97C70A), eine Sekundärfarbe und eine neutrale Palette. Die Karte sollte dieselben Werte verwenden, nicht Annäherungen.

Zielen Sie diese Ebenen für die Markenfarbanwendung an:

Straßen als Markenelemente. Wenn Ihre Markenfarbe lebendig genug ist, verwenden Sie sie für Hauptstraßen oder hervorgehobene Routen:

{
  "id": "road-highlighted",
  "type": "line",
  "source": "mapatlas",
  "source-layer": "transportation",
  "filter": ["==", "class", "primary"],
  "paint": {
    "line-color": "#97C70A",
    "line-width": 3,
    "line-opacity": 0.8
  }
}

Benutzerdefinierte POI-Marker. Ersetzen Sie die Standard-Sprite-Icons durch Ihre eigenen, indem Sie ein benutzerdefiniertes Sprite-Sheet hosten und die sprite-URL aktualisieren. Dann referenzieren Sie Ihre Icons in Symbol-Ebenen:

{
  "id": "brand-poi",
  "type": "symbol",
  "source": "mapatlas",
  "source-layer": "poi",
  "layout": {
    "icon-image": "brand-pin",
    "icon-size": 1.2,
    "text-field": ["get", "name"],
    "text-font": ["Inter Bold", "Noto Sans Regular"],
    "text-size": 12,
    "text-offset": [0, 1.5],
    "text-anchor": "top"
  },
  "paint": {
    "text-color": "#97C70A",
    "text-halo-color": "#1a1a2e",
    "text-halo-width": 1
  }
}

Benutzerdefinierte Schriftarten für Karten-Labels

Die Standard-Karten-Label-Schriften sind generisch. Wenn Ihre Marke Inter, Roboto oder eine benutzerdefinierte Schriftart verwendet, können Sie sie auch für Karten-Labels nutzen.

MapAtlas liefert Glyphen von seinem eigenen Glyph-Endpunkt, der das Standard-Mapbox-Glyph-Format unterstützt. Um eine benutzerdefinierte Schriftart zu verwenden:

1. Generieren Sie .pbf-Glyph-Dateien aus Ihrer Schriftart mit einem Tool wie fontnik.
2. Hosten Sie die Glyph-Dateien auf einem CDN oder Ihrem eigenen Server.
3. Aktualisieren Sie das glyphs-Feld in Ihrem Stil-JSON:

{
  "glyphs": "https://your-cdn.com/fonts/{fontstack}/{range}.pbf"
}

4. Referenzieren Sie die Schriftart in der text-font-Eigenschaft einer beliebigen Symbol-Ebene:

"text-font": ["Inter Bold", "Noto Sans Regular"]

Geben Sie immer eine Fallback-Schriftart an (Noto Sans deckt Unicode-Zeichen ab, die Ihre primäre Schriftart möglicherweise nicht enthält). Der Renderer verwendet die erste Schriftart im Array, die ein Glyph für jedes Zeichen enthält.

Wasserzeichen und Attribution entfernen

MapAtlas ermöglicht vollständiges White-Label-Deployment. Sie können das MapAtlas-Logo vollständig von der Karte entfernen.

Im SDK wird Attribution durch ein Steuerelement behandelt, das Sie deaktivieren können:

const map = new mapmetricsgl.Map({
  container: 'map',
  style: 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY',
  center: [4.9041, 52.3676],
  zoom: 12,
  attributionControl: false,  // Standard-Attributionskontrolle entfernen
});

Wenn Sie Attribution behalten, aber an Ihre UI anpassen möchten, blenden Sie das Standardsteuerelement aus und fügen Sie Ihr eigenes hinzu:

map.addControl(
  new mapmetricsgl.AttributionControl({
    customAttribution: 'Map data © OpenStreetMap contributors',
    compact: true,
  }),
  'bottom-left'
);

Das ersetzt das Branding durch eine minimale, rechtlich konforme Attribution, die die OpenStreetMap-Lizenz respektiert, während sie zu Ihrer UI passt. Im Gegensatz zu Google Maps, das verlangt, dass sein Logo jederzeit sichtbar bleibt, unabhängig von Ihrem Plan, gibt Ihnen MapAtlas volle Kontrolle.

Hell/Dunkel-Theme-Toggle in React

Eine vollständige React-Komponente, die eine Karte mit einem Hell/Dunkel-Toggle verwaltet, mit CSS Custom Properties, um das Theme mit dem Rest Ihrer UI synchron zu halten:

import { useEffect, useRef, useState } from 'react';
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const STYLES = {
  light: 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY',
  dark:  'https://tiles.mapatlas.eu/styles/dark/style.json?key=YOUR_API_KEY',
};

export function BrandedMap({ center = [4.9041, 52.3676], zoom = 12 }) {
  const containerRef = useRef(null);
  const mapRef       = useRef(null);
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    const map = new mapmetricsgl.Map({
      container:        containerRef.current,
      style:            STYLES.light,
      center,
      zoom,
      attributionControl: false,
    });

    map.addControl(
      new mapmetricsgl.AttributionControl({ compact: true }),
      'bottom-left'
    );

    mapRef.current = map;
    return () => map.remove();
  }, []);

  useEffect(() => {
    if (mapRef.current) {
      mapRef.current.setStyle(STYLES[theme]);
    }
  }, [theme]);

  return (
    <div style={{ position: 'relative' }}>
      <div ref={containerRef} style={{ width: '100%', height: '500px' }} />
      <button
        onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}
        style={{
          position: 'absolute',
          top: 12,
          right: 12,
          padding: '8px 16px',
          background: theme === 'dark' ? '#ffffff' : '#1a1a2e',
          color:      theme === 'dark' ? '#1a1a2e' : '#ffffff',
          border: 'none',
          borderRadius: 6,
          cursor: 'pointer',
          zIndex: 1,
        }}
      >
        {theme === 'light' ? 'Dark Mode' : 'Hell-Modus'}
      </button>
    </div>
  );
}

Der setStyle-Aufruf rendert die Karte mit dem neuen Farbschema neu. Tile-Daten, die bereits im Cache sind, werden nicht neu abgerufen, nur die visuelle Interpretation ändert sich.

Ein benutzerdefiniertes Stil-JSON hosten

Für vollständige Kontrolle hosten Sie Ihr Stil-JSON als statische Datei auf Ihrem CDN oder S3-Bucket. Das ermöglicht Ihnen:

• Ihren Stil neben Ihrem Anwendungscode versionskontrollieren.
• Das visuelle Design aktualisieren, ohne die Anwendung neu zu deployen (einfach das gehostete JSON aktualisieren).
• Verschiedene Stile für verschiedene Umgebungen verwenden (Preview vs. Produktion).

Zur Laufzeit einen gehosteten Stil laden:

const map = new mapmetricsgl.Map({
  container: 'map',
  style: 'https://your-cdn.com/styles/brand-dark.json',
  center: [4.9041, 52.3676],
  zoom: 12,
});

Die einzige Einschränkung ist CORS: Das Stil-JSON muss mit Access-Control-Allow-Origin: * (oder Ihrer spezifischen Domain) bereitgestellt werden, damit der Browser es Cross-Origin abrufen kann.

Style-Entwicklungs-Workflow

Der schnellste Weg, einen benutzerdefinierten Stil zu erstellen, ist iterativ, Änderungen in Echtzeit sehen ohne Code umschreiben zu müssen.

1. Beginnen Sie mit einem MapAtlas-Basisstil-JSON als Grundlage. Laden Sie es herunter, indem Sie https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY abrufen.
2. Bearbeiten Sie das JSON in Ihrem Editor und beobachten Sie, welche Ebene welches visuelle Element beeinflusst.
3. Laden Sie die Karte mit Ihrem modifizierten Stil-JSON neu, um das Ergebnis zu sehen.
4. Wenn stabil, committen Sie das Stil-JSON in Ihr Repository und hosten Sie es auf Ihrem CDN.

Für tiefere Anpassung schauen Sie sich die Karten-Visualisierungs- und Styling-Dokumentation für die vollständige Ebenenreferenz, Paint-Property-Typen und Ausdrucks-Syntax an.

Zusammenfassung

Benutzerdefiniertes Karten-Styling ist kein Luxus, es ist der Unterschied zwischen einer Karte, die wie ein Widget eines Drittanbieters wirkt, und einer, die sich anfühlt, als wäre sie für Ihr Produkt gebaut worden. Mit MapAtlas:

• Die Style Specification ist Standard-JSON, kompatibel mit Mapbox GL JS-Tooling.
• Dark Mode ist ein Stil-JSON-Tausch, kein neuer Tile-Satz oder Server-Konfiguration.
• Markenfarben werden über Paint-Eigenschaften auf Straßen, Labels und POI-Icons angewendet.
• Benutzerdefinierte Schriftarten werden von jedem Glyph-Endpunkt geladen, den Sie kontrollieren.
• Wasserzeichen und Attribution sind vollständig konfigurierbar, White-Label wird auf allen bezahlten Plänen unterstützt.
• Der gesamte Stil kann zur Laufzeit ohne Seitenneuladen umgeschaltet werden.

Beginnen Sie noch heute, Ihre gebrandete Karte zu erstellen. Melden Sie sich für einen kostenlosen MapAtlas API-Schlüssel an und laden Sie das Basis-Stil-JSON als Ausgangspunkt. Der erste benutzerdefinierte Stil braucht etwa 30 Minuten, bis er richtig ist, nachfolgende Iterationen dauern Minuten.