Tutorial: Eigene Geodaten visualisieren mit Data-Driven Styling for Datasets

1. GCP-Projekt erstellen

Melde dich in der Google Cloud Platform an oder logge dich ein. Wähle anschließend ein bestehendes Projekt aus oder erstelle ein neues.

Google Cloud Console

2. APIs aktivieren

Aktiviere nun die Maps Dataset API sowie die Maps JavaScript API, um die Dienste der Google Maps Platform nutzen zu können. Das kannst du entweder auf der Übersichtsseite machen oder indem du zu “APIs & Services” navigierst und dort die APIs aus der Liste auswählst.

3. API Key erstellen

Erstelle einen Google Maps API Key via “Keys & Credentials” → “Create credentials” → “API key”. Der API Key ist eine eindeutige ID, die die Nutzung deiner Map authentifiziert. Prüfe anschließend die Best Practices zu API- und Anwendungseinschränkungen für maximale Sicherheit.

Video: How to generate and restrict API keys for Google Maps Platform Best Practices für die API-Sicherheit

4. Datensatz anlegen

Jetzt kannst du den Datensatz anlegen. Für unser Tutorial stellen wir dir hier zwei Datensätze zum ÖPNV in Hamburg bereit – einen zu den ÖPNV-Linien, einen zu den Haltestellen.*

Hast du die Datensätze lokal gespeichert, navigiere zu “Google Maps Platform” → “Datasets” und klicke auf “Create dataset”, um die Datensätze einzeln hochzuladen. Gib den Datensätzen zum Hochladen einen Namen. Unsere Beispiel-Datensätze nennen wir “Public Transport Lines” und “Public Transport Stops” 

Wichtige Informationen zu den Datensätzen, die du mit Data-Driven Styling visualisieren kannst:

• Die Daten müssen im Format KML, GeoJSON, JSON oder CSV vorliegen.
• Der Datensatz darf maximal 350 MB groß sein, solange sich Data-Driven Styling noch in der Preview-Phase befindet.
• Der Name, den du dem Datensatz gibst, muss einzigartig sein.

Ist der Upload eines Datensatzes abgeschlossen, kannst du seinen Status direkt überprüfen. Sollte es Fehlermeldungen geben, werden diese hier automatisch angezeigt.

Wenn du auf die Daten klickst, kannst du außerdem in einer Preview sehen, wie sie in etwa auf der Karte aussehen werden. Der Screenshot zeigt eine Preview unseres Datensatzes “Public Transport Lines”.

Dokumentation: Dataset erstellen

5. Map Style kreieren

Im nächsten Schritt kannst du deinen Map Style kreieren. Gehe dafür auf “Google Maps Platform” → “Map Styles” → ” Create Map Style” und wähle einen Default Map Style oder gestalte deinen eigenen Style im Style Editor. In unserem Beispiel nutzen wir den Style “Grey”.

Dokumentation: Kartenstile verwalten Dokumentation: Schritt-für-Schritt-Anleitung für den Map Style Editor

6. Map ID erstellen

Erstelle nun eine Map ID via “Google Maps Platform” → “Map Management” → “Create Map ID”. Die Map ID benötigst du, um deine Karte mit deinem Map Style und deinem Datensatz verbinden zu können. Gib dafür folgende Informationen zu deiner Karte an: einen Namen (in unserem Beispiel nutzen wir “Public Transport”), eine optionale Beschreibung sowie den Map Type (dieser muss JavaScript sein). Wähle anschließend die Option “Vector” aus, da nur Vector Map IDs mit Data-Driven Styling funktionieren. 

Ist die Map ID angelegt, musst du sie noch mit deinem Map Style verbinden.

Dokumentation: Map IDs verwenden

7. Map Style verbinden

Verbinde nun deine Map ID und deinen Map Style mit deinen Datensätzen, damit deine Daten mit der richtigen Karte verknüpft werden. Gehe dafür zu einem Datensatz, klicke auf die Preview, scrolle etwas nach unten und wähle via “Add Map Style” deinen Map Style aus. Klicke auf Sichern, um deinen Datensatz zu verbinden.

8. Google Map erstellen

Jetzt kannst du deine Daten zu deiner Anwendung hinzufügen. 

Erstelle dafür eine Google Map und füge deinen API Key zum Script Tag hinzu. Achtung: Da Data-Driven Styling aktuell noch in der Betaversion ist, muss dein Script Tag das auch ausweisen. Außerdem muss eine Callback-Funktion festgelegt sein, die die Karte erstellt, wenn die API geladen wird. Füge dafür die initMap-Funktion hinzu:

<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap&v=beta"></script>

Füge nun ein div-Element in deinen HTML-Code ein, in dem deine Karte dargestellt werden soll. Setze die Kartenhöhe immer explizit fest, um die Größe des div-Elements, das die Karte enthält, zu definieren.

<style>
  #map { height: 800px; }
</style>

<body>
  <div id="map"></div>
</body>

Ergänze deinen Code jetzt um die initMap-Funktion und erstelle eine Google Map. Füge dafür die mapID zu den Kartenoptionen hinzu.

function initMap() {
  // The location of Hamburg
  const position = { lat: 53.566, lng: 9.991 };

  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: position,
    mapId: '<YOUR-MAPID>',
  });
};

Dokumentation: Einfache Google Map erstellen

9. Daten verknüpfen

Erstelle nun die Dataset Feature Layers, um deine Datensätze auf der Karte anzuzeigen. In unserem Beispiel fügen wir die Dataset IDs unserer beiden Datensätze zu den ÖPNV-Linien und -Haltestellen in Hamburg hinzu.

const transportLinesId = <YOUR-LINES-DATASET-ID>;
const transportStopsId = <YOUR-STOPS-DATASET-ID>;

const linesLayer = map.getDatasetFeatureLayer(transportLinesId);
const stopsLayer = map.getDatasetFeatureLayer(transportStopsId);

10. Daten stylen

Benutze die Style Option, um deine Datensätze zu stylen. Du kannst die Daten auch mithilfe der FeatureStyleFunction basierend auf den Attributen der Features gestalten. In unserem Beispiel haben wir die Farbe, Größe und Deckkraft der ÖPNV-Linien und -Haltestellen definiert.

linesLayer.style = {
  strokeColor: '#FF6E78',
  strokeWeight: 2,
  strokeOpacity: 1,
};

stopsLayer.style = {
  fillColor: '#5A78FA',
  fillOpacity: 1,
  pointRadius: 2,
};

Dokumentation: Datenfeatures gestalten

Das Ergebnis: Hamburgs ÖPNV-Netz auf der interaktiven Karte

Voila! Das Ergebnis ist eine interaktive Karte deiner Daten, gestylt nach deinen Vorstellungen. Unser Beispiel zeigt die ÖPNV-Linien in Hamburg in einem Rotton und die Haltestellen in einem Blauton auf einer grauen Google Map – in nur 10 Schritten und mit ein paar wenigen Zeilen Code.