In diesem Dokument wird beschrieben, warum und wie Sie mithilfe der Maps JavaScript API einen dynamischen datengestützten Stil für Google-Grenzen implementieren. Das ist für eine Vielzahl von Anwendungsfällen in verschiedenen Branchen und Segmenten nützlich.
Animierte Taxifahrten in New York City nach Postleitzahlgrenze (simuliert, Zeitraffer):
Datengestützte Stile sind eine Funktion der Google Maps Platform, mit der Sie Polygone für administrative Grenzen von Google verwenden, Stile auf diese Polygone anwenden und sie auf Ihren Karten darstellen sowie eigene Daten einbinden können, um aussagekräftige, benutzerdefinierte Karten zu erstellen, die für visuelle Analysen und ein besseres Verständnis Ihrer Daten verwendet werden können. In diesem Dokument werden einige Anwendungsfälle erläutert, die zeigen, warum und wie Sie Ihre Daten mit datengestütztem Design auf einer Karte nahezu in 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 können Sie 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 bei datengestütztem Stil relevant sein könnten:
- Fahrdienste:Mithilfe von Echtzeit-Updates können Bereiche mit hoher Nachfrage identifiziert werden. Einige Anbieter erhöhen dann möglicherweise die Preise.
- Transport: Mithilfe von Echtzeit-Updates können Bereiche mit hohem Verkehrsaufkommen identifiziert werden, um die besten alternativen Routen zu ermitteln.
- Wahlen:Am Wahlabend können Echtzeitdaten aus Umfragen verwendet werden, um die Ergebnisse im Verlauf des Abends zu visualisieren.
- Sicherheit von Mitarbeitern:Mit Echtzeit-Updates können Ereignisse in Echtzeit verfolgt, Risikogebiete identifiziert und Einsatzkräfte vor Ort über die Lage informiert werden.
- Wetter:Mit Echtzeit-Updates können Sie die Bewegung von Stürmen verfolgen, aktuelle Gefahren erkennen und Warnungen ausgeben.
- Umwelt: Mit Echtzeit-Updates können die Bewegungen von Vulkanasche und anderen Schadstoffen verfolgt, Bereiche mit Umweltzerstörung identifiziert und die Auswirkungen menschlicher Aktivitäten überwacht werden.
In all diesen Situationen können Kunden zusätzlichen Mehrwert schaffen, indem sie ihre Echtzeit-Datenfeeds mit den Grenzen von Google kombinieren, um ihre Daten schnell und einfach auf einer Karte zu visualisieren. So erhalten sie nahezu sofortige Einblicke für fundiertere Entscheidungen.
Architekturansatz für die Lösung
Sehen wir uns nun an, wie Sie eine Karte mit datengestützten Stilen erstellen, um dynamische Daten zu visualisieren. Wie bereits gezeigt, ist der Anwendungsfall eine Anzahl von NYC-Taxis, die nach Postleitzahl visualisiert wird. Das kann für Nutzer hilfreich sein, um zu sehen, wie einfach es ist, ein Taxi zu rufen.
Hier ist ein Architekturdiagramm der Anwendung für diesen Ansatz:
Die Lösung für dynamische datengestützte Stile
Sehen wir uns nun die Schritte an, die erforderlich sind, um eine dynamische Choroplethenkarte mit datengestütztem Stil für Ihr Dataset zu implementieren.
Mit dieser Lösung können Sie ein hypothetisches Dataset der Echtzeit-Taxidichte in New York City nach Postleitzahl visualisieren. Auch wenn es sich hierbei nicht um reale Daten handelt, gibt es reale Anwendungen und Sie erhalten einen Eindruck davon, wie dynamische Daten mit datengestütztem Design auf der Karte visualisiert werden können.
Schritt 1: Daten zum Visualisieren und Verknüpfen mit einer Orts-ID für Grenzen auswählen
Zuerst müssen Sie die Daten identifizieren, die Sie anzeigen möchten, und sicherstellen, dass sie mit den Grenzen von Google abgeglichen werden können. Sie können diesen Abgleich clientseitig durchführen, indem Sie für jede Postleitzahl die Callback-Methode findPlaceFromQuery aufrufen. Beachten Sie, dass Postleitzahlen in den USA eindeutige Namen haben, andere Verwaltungsebenen jedoch nicht. Achten Sie darauf, die richtige Orts-ID für Ihre Abfrage auszuwählen, wenn die Ergebnisse mehrdeutig sein könnten.
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 den Breiten- und Längengrad enthalten, können Sie auch die Geocoding API mit Komponentenfilterung verwenden, um diese Werte in Orts-IDs für die Element-Ebene aufzulösen, die Sie gestalten möchten. In diesem Beispiel gestalten Sie die Element-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. In diesem Fall gehen wir davon aus, dass sich Ihre Daten in einer BigQuery-Tabelle mit zwei Spalten befinden: „zip_code“ und „taxi_count“. Sie fragen sie über eine Firebase Cloud Functions-Funktion ab.
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 auf dem neuesten Stand bleiben. Eine Möglichkeit besteht darin, die obige Abfrage mit einem Web-Worker aufzurufen und einen Timer festzulegen, um die Daten mit der Funktion setInterval zu aktualisieren. Sie können das Intervall auf einen geeigneten Wert festlegen, z. B. die Karte alle 15 Sekunden aktualisieren. Jedes Mal, wenn das Intervall abläuft, fordert der Web-Worker aktualisierte taxiCount-Werte pro postalCode an.
Nachdem wir die Daten nun abfragen und aktualisieren können, müssen wir dafür sorgen, dass die Darstellung der Kartenpolygone diese Änderungen widerspiegelt.
Schritt 3: Karte mit datengestützten Stilen gestalten
Sie haben jetzt die dynamischen Datenwerte, die Sie benötigen, um einen visuellen Stil für die Postleitzahlengrenzen in Ihrer Maps JavaScript-Instanz als JSON-Objekt zu erstellen und anzuwenden. Nun können Sie die Daten als Choroplethenkarte darstellen.
In diesem Beispiel gestalten Sie die Karte anhand der Anzahl der Taxis in jeder Postleitzahl, um den Nutzern einen Eindruck von der Taxidichte und -verfügbarkeit in ihrer Gegend zu vermitteln. Der Stil variiert je nach Anzahl der Taxis. Die Bereiche mit den wenigsten Taxis werden lila dargestellt. Der Farbverlauf geht dann über Rot und Orange bis hin zu Gelb für die Bereiche 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 Nutzer die darunter liegende Karte sehen. Wenn Sie „strokeOpacity“ auf 1,0 festlegen, können sie die Grenzen gleichfarbiger Polygone 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 datengestützten Stilen für Google-Grenzen können Sie Ihre Daten verwenden, um Ihre Karte für eine Vielzahl von Implementierungen in verschiedenen Branchen und Segmenten zu gestalten. Durch die Verbindung mit Echtzeitdaten können Sie kommunizieren, was wo passiert, und zwar während es passiert. Diese Funktion hat das Potenzial, den Wert Ihrer Echtzeitdaten freizusetzen und Ihren Nutzern zu helfen, sie in Echtzeit und in der realen Welt besser zu verstehen.
Nächste Aktionen
- Sehen Sie sich das Webinar How to use Data-driven styling to style Google map boundaries an.
- Mit Click-Events für datengestützte Stile 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