In diesem Dokument wird beschrieben, warum und wie Sie dynamisches datengetriebenes Styling von Google-Grenzen mithilfe der Maps JavaScript API implementieren. Das ist für eine Vielzahl von Anwendungsfällen in verschiedenen Branchen und Segmenten nützlich.
Animierte Taxi-Anzahl in New York City nach Postleitzahl (simuliert, Zeitraffer):
Mit der datengetriebenen Stilisierung können Sie die Verwaltungsgrenzen von Google verwenden, diesen Polygonen ein Styling für die Darstellung auf Ihren Karten zuweisen und Ihre eigenen Daten kombinieren, um umfangreiche, benutzerdefinierte Karten zu erstellen, die für die visuelle Analyse und ein besseres Verständnis Ihrer Daten verwendet werden können. In diesem Dokument werden einige Anwendungsfälle erläutert, in denen erklärt wird, warum und wie Sie Ihre Daten mithilfe von datengestütztem Styling auf einer Karte in nahezu Echtzeit visualisieren können, indem Sie dynamische Datenfeeds einbinden.
Mit datengestützten Stilen können Sie Karten erstellen, die die geografische Verteilung von Daten zeigen, den Polygonstil dynamisch anpassen und über Click-Events mit Ihren Daten interagieren. Mit diesen Funktionen lassen sich informative und ansprechende Karten für eine Vielzahl von Anwendungsfällen und Branchen erstellen.
Hier sind einige Beispiele für Anwendungsfälle, die für eine Karte mit dynamischen Datenaktualisierungen für das datengestützte Styling gelten könnten:
- Fahrgemeinschaft:Mithilfe von Echtzeitaktualisierungen können Sie Gebiete mit hoher Nachfrage ermitteln. In diesem Fall können einige Anbieter einen Aufschlag auf den Fahrpreis erheben.
- Verkehr:Anhand von Echtzeitdaten können Sie Staus erkennen und so die besten alternativen Routen ermitteln.
- Wahlen:Am Wahlabend können Echtzeitdaten von Umfragen verwendet werden, um die Ergebnisse in Echtzeit zu visualisieren.
- Sicherheit der Mitarbeiter: Mit Echtzeitaktualisierungen können Ereignisse in Echtzeit verfolgt, Gebiete mit hohem Risiko identifiziert und Einsatzkräfte vor Ort über die aktuelle Situation informiert werden.
- Wetter:Mit Echtzeitaktualisierungen können Sie die Bewegung von Stürmen verfolgen, aktuelle Gefahren erkennen und Warnungen und Benachrichtigungen erhalten.
- Umwelt:Mit Echtzeitaktualisierungen können Sie die Bewegung von Vulkanasche und anderen Schadstoffen verfolgen, Gebiete mit Umweltverschmutzung identifizieren und die Auswirkungen menschlicher Aktivitäten beobachten.
In all diesen Fällen können Kunden zusätzliche Vorteile erzielen, indem sie ihre Echtzeitdatenfeeds mit den Grenzen von Google kombinieren, um ihre Daten schnell und einfach auf einer Karte zu visualisieren. So erhalten sie nahezu sofortige Informationen, die ihnen bei fundierten Entscheidungen helfen.
Architekturansatz für die Lösung
Sehen wir uns nun an, wie Sie eine Karte mithilfe von datengestütztem Styling erstellen, um dynamische Daten zu visualisieren. Wie bereits erwähnt, geht es bei diesem Anwendungsfall um die Anzahl der Taxis in New York, die nach Postleitzahl visualisiert wird. So können Nutzer besser nachvollziehen, wie einfach es ist, ein Taxi zu rufen.
Hier ist ein Diagramm der Anwendungsarchitektur des Ansatzes:
Die Lösung für dynamische, datengestützte Stile
Sehen wir uns nun an, wie Sie eine dynamische Choropleth-Karte mit datengetriebenem Styling für Ihren Datensatz implementieren.
Mit dieser Lösung können Sie einen hypothetischen Datensatz zur Echtzeitdichte von Taxis in New York City nach Postleitzahl visualisieren. Auch wenn es sich hierbei nicht um reale Daten handelt, haben sie praktische Anwendungen und vermitteln einen Eindruck davon, wie leistungsfähig und vielfältig dynamische Daten mithilfe des datengestützten Stylings auf der Karte visualisiert werden können.
Schritt 1: Daten für die Visualisierung auswählen und mit einer Orts-ID für Begrenzungen zusammenführen
Im ersten Schritt müssen Sie die Daten identifizieren, die Sie anzeigen möchten, und dafür sorgen, dass sie den Grenzen von Google zugeordnet werden können. Sie können diese Abgleiche clientseitig ausführen, indem Sie für jede Postleitzahl die Rückrufmethode findPlaceFromQuery aufrufen. Postleitzahlen in den USA haben eindeutige Namen, andere Verwaltungsebenen jedoch nicht. Achten Sie darauf, die richtige Orts-ID für Ihre Suchanfrage auszuwählen, wenn es zu mehrdeutigen Ergebnissen kommen kann.
const request = {
query: postalCode,
fields: ['place_id'],
};
function findPlaceId() {
placesService.findPlaceFromQuery(request, function (results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log(results[0]);
}
});
}
Wenn Ihre Daten Werte für Breiten- und Längengrade enthalten, können Sie auch die Geocoding API mit Komponentenfilterung verwenden, um diese Werte in Place ID-Werte für die zu stilisierende Feature-Ebene umzuwandeln. In diesem Beispiel gestalten Sie die Feature-Ebene „POSTAL_CODE“.
Schritt 2: Verbindung zu Echtzeitdaten herstellen
Es gibt verschiedene Möglichkeiten, eine Verbindung zu Datenquellen herzustellen. Die beste Implementierung hängt von Ihren spezifischen Anforderungen und Ihrer technischen Infrastruktur ab. Angenommen, Ihre Daten befinden sich in einer BigQuery-Tabelle mit zwei Spalten: „zip_code“ und „taxi_count“. Sie möchten sie über eine Firebase Cloud Function abfragen.
async function queryNycTaxis() {
// Queries the NYC Taxis dataset.
// Create a client
const bigqueryClient = new BigQuery();
// The SQL query to run
const sqlQuery = 'SELECT zip_code, taxi_count
FROM \'YOUR_DATASET_ID.TABLE\' LIMIT 100';
const options = {
query: sqlQuery,
// Location must match that of the dataset(s)
// referenced in the query.
location: 'US',
};
// Run the query
const [rows] = await bigqueryClient.query(options);
rows.forEach(row => {
const postalCode = row['zip_code'];
const taxiCount = row['taxi_count'];
});
}
Als Nächstes sollten Sie dafür sorgen, dass die Daten aktuell bleiben. Eine Möglichkeit dazu besteht darin, die obige Abfrage mit einem Webworker aufzurufen und mit der Funktion setInterval einen Timer zum Aktualisieren der Daten festzulegen. Sie können das Intervall auf einen geeigneten Wert festlegen, z. B. alle 15 Sekunden. Jedes Mal, wenn das Intervall abgelaufen ist, fordert der Webworker aktualisierte taxiCount-Werte pro Postleitzahl an.
Da wir die Daten jetzt abfragen und aktualisieren können, prüfen wir, ob die Kartenpolygone diese Änderungen widerspiegeln.
Schritt 3: Karte mit datengestütztem Styling gestalten
Sie haben jetzt die dynamischen Datenwerte, die Sie benötigen, um den Postleitzahlengrenzen in Ihrer Maps JavaScript-Instanz einen visuellen Stil als JSON-Objekt zuzuweisen. Jetzt ist es an der Zeit, ihnen einen Stil als Choropleth-Karte zu verleihen.
In diesem Beispiel gestalten Sie die Karte basierend auf der Anzahl der Taxis in jeder Postleitzahl, damit Nutzer einen Eindruck von der Taxidichte und -verfügbarkeit in ihrer Region erhalten. Der Stil variiert je nach Wert der Taxianzahl. Die Bereiche mit den wenigsten Taxis werden lila dargestellt. Die Farbabstufung geht über Rot und Orange bis hin zu Gelb, der Farbe der Taxis in New York, in den Bereichen mit der höchsten Dichte. Für dieses Farbschema wenden Sie diese Farbwerte auf „fillColor“ und „strokeColor“ an. Wenn Sie „fillOpacity“ auf 0,5 festlegen, können Ihre Nutzer die zugrunde liegende Karte sehen. Wenn Sie „strokeOpacity“ auf 1,0 festlegen, können sie die Grenzen von Polygonen mit derselben Farbe unterscheiden:
const featureLayer = map.getFeatureLayer(
google.maps.FeatureType.POSTAL_CODE
);
featureLayer.style = (featureStyleFunctionOptions) => {
const placeFeature = featureStyleFunctionOptions.feature;
// taxiCount per (postal_code) PlaceID
const taxiCount = zips[placeFeature.placeId];
let fillColor;
let strokeColor;
// Apply colors to features based on taxiCount values
if (taxiCount < 8) {
fillColor = "#571845";
strokeColor = "#571845";
} else if (taxiCount < 13) {
fillColor = "#900c3e";
strokeColor = "#900c3e";
} else if (taxiCount < 21) {
fillColor = "#c60039";
strokeColor = "#c60039";
} else if (taxiCount < 34) {
fillColor = "#fe5733";
strokeColor = "#fe5733";
// keep else if or the whole map gets this style with else
} else if (taxiCount >= 34) {
fillColor = "#fec30f";
strokeColor = "#fec30f";
}
return {
fillColor,
strokeColor,
fillOpacity: 0.5,
strokeOpacity: 1.0,
};
Fazit
Mit dem datengestützten Styling für Google-Grenzen können Sie Ihre Karte mithilfe Ihrer Daten für eine Vielzahl von Implementierungen in verschiedenen Branchen und Segmenten gestalten. Wenn Sie eine Verbindung zu Echtzeitdaten herstellen, können Sie mitteilen, was passiert, wo es passiert und wann es passiert. Mit dieser Funktion können Sie den Wert Ihrer Echtzeitdaten besser nutzen und Ihren Nutzern helfen, sie in Echtzeit besser zu verstehen.
Nächste Aktionen
- Sehen Sie sich das Webinar Mit datengestützten Stilen Google-Kartengrenzen gestalten an.
- Mit Klickereignissen für das datengestützte Styling können Sie Ihre Visualisierung noch weiter optimieren.
- Sie können Ihrer Karte erweiterte Markierungen hinzufügen.
Beitragende
Hauptautor:
Jim Leflar | Google Maps Platform Solutions Engineer