Questo documento descrive come e perché implementare lo stile basato sui dati dinamico dei confini di Google utilizzando l'API Maps JavaScript, utile per una vasta gamma di casi d'uso di vari settori e segmenti.
Numero di taxi animati a New York in base al confine del codice postale (simulato, con time-lapse):
Gli stili basati sui dati sono una funzionalità di Google Maps Platform che ti consente di utilizzare i poligoni dei confini amministrativi di Google, applicarne uno stile per mostrarli sulle tue mappe e combinare i tuoi dati per creare mappe avanzate e personalizzate che possono essere utilizzate per l'analisi visiva e una migliore comprensione dei dati. Questo documento illustra alcuni casi d'uso che spiegano perché e come visualizzare i dati con l'applicazione di stili basati sui dati su una mappa quasi in tempo reale integrando feed di dati dinamici.
Gli stili basati sui dati consentono di creare mappe che mostrano la distribuzione geografica dei dati, personalizzare in modo dinamico lo stile poligonale e interagire con i dati tramite gli eventi di clic. Queste funzionalità possono essere utilizzate per creare mappe informative e coinvolgenti per una varietà di casi d'uso e settori.
Ecco alcuni esempi di casi d'uso che potrebbero essere applicabili a una mappa che mostra aggiornamenti dinamici di dati sugli stili basati sui dati:
- Ride sharing: gli aggiornamenti in tempo reale possono essere utilizzati per identificare le aree con domanda elevata, nel qual caso alcuni fornitori potrebbero richiedere prezzi elevati.
- Trasporti: puoi utilizzare aggiornamenti in tempo reale per identificare le aree di traffico intenso, in modo da individuare i percorsi alternativi migliori.
- Elezioni: la notte delle elezioni, i dati dei sondaggi dati in tempo reale possono essere utilizzati per visualizzare i risultati man mano che si verificano.
- Sicurezza dei lavoratori:gli aggiornamenti in tempo reale possono essere utilizzati per monitorare gli eventi man mano che si verificano in tempo reale, identificare le aree ad alto rischio e fornire consapevolezza della situazione agli operatori sul campo.
- Meteo:gli aggiornamenti in tempo reale possono essere utilizzati per monitorare lo spostamento delle tempeste, identificare i pericoli attuali e fornire avvisi e allerte.
- Ambiente: gli aggiornamenti in tempo reale possono essere utilizzati per monitorare il movimento di ceneri vulcaniche e altri inquinanti, identificare le aree di degrado ambientale e monitorare l'impatto delle attività umane.
In tutte queste situazioni, i clienti possono usufruire di un valore aggiunto combinando i loro feed di dati in tempo reale con i confini di Google per visualizzare in modo rapido e semplice i loro dati su una mappa, offrendo loro la potenza di approfondimenti quasi istantanei per un processo decisionale più consapevole.
Approccio architetturale alla soluzione
Adesso vediamo come creare una mappa utilizzando gli stili basati sui dati per visualizzare dati dinamici. Come illustrato in precedenza, il caso d'uso è il conteggio dei taxi di New York visualizzati per codice postale. Può essere utile per far capire agli utenti quanto sia facile chiamare un taxi.
Ecco un diagramma dell'architettura delle applicazioni dell'approccio:
La soluzione per lo stile dinamico basato sui dati
Ora vediamo i passaggi necessari per implementare una mappatura dinamica degli stili basati sui dati per il tuo set di dati.
Questa soluzione consente di visualizzare un set di dati ipotetico sulla densità di taxi in tempo reale nei dintorni di New York City in base al codice postale. Anche se questi potrebbero non essere dati reali, sono presenti applicazioni reali e ti offrono un'idea della potenza e delle capacità di come i dati dinamici possono essere visualizzati sulla mappa con lo stile basato sui dati.
Passaggio 1: scegli i dati da visualizzare e unire a un ID luogo di confine
Il primo passaggio consiste nell'identificare i dati che vuoi visualizzare e assicurarti che possano essere abbinati ai confini di Google. Puoi eseguire questa corrispondenza sul lato client chiamando il metodo di callback findPlaceFromQuery per ogni zipCode. Tieni presente che i codici postali degli Stati Uniti hanno nomi distinti, a differenza di altri livelli amministrativi. Assicurati di selezionare l'ID luogo corretto per la tua query nel caso in cui i risultati possano essere ambigui.
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]);
}
});
}
Se i tuoi dati hanno valori di latitudine e longitudine, puoi utilizzare anche l'API Geocoding con i filtri dei componenti per risolvere questi valori di latitudine/longitudine in valori ID luogo per il livello elemento che ti interessa applicare uno stile. In questo esempio applicherai lo stile del livello di elementi POSTAL_CODE.
Passaggio 2: connettiti ai dati in tempo reale
Esistono vari modi per connettersi alle origini dati e la migliore implementazione dipende dalle tue esigenze specifiche e dall'infrastruttura tecnica. In questo caso, supponiamo che i tuoi dati si trovino in una tabella BigQuery con due colonne: "zip_code" e "taxi_count" e che effettuerai la query tramite una funzione di Firebase Cloud Functions.
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'];
});
}
Assicurati di mantenere i dati aggiornati. A questo scopo, puoi chiamare la query riportata sopra utilizzando un web worker e impostare un timer per aggiornare i dati utilizzando la funzione setInterval. Puoi impostare l'intervallo su un valore appropriato, ad esempio aggiornare la mappa ogni 15 secondi. Ogni volta che passa l'intervallo, il web worker richiederà valori taxiCount aggiornati per GPTCode.
Ora che possiamo eseguire query e aggiornare i dati, assicurati che l'aspetto dei poligoni della mappa rifletta queste modifiche.
Passaggio 3: applica uno stile alla mappa utilizzando uno stile basato sui dati
Ora che disponi dei valori dei dati dinamici necessari per creare e applicare uno stile visivo ai confini del codice postale nell'istanza Maps JavaScript come oggetto JSON, è il momento di attribuirgli uno stile come mappa coropletica.
In questo esempio, apporterai uno stile alla mappa in base al numero di taxi di ciascun codice postale, in modo da dare agli utenti un'idea della densità e della disponibilità dei taxi nella loro zona. Lo stile varia a seconda dei valori di conteggio dei taxi. Alle aree con il numero più basso di taxi sarà applicato uno stile viola e il gradiente di colore si sposterà in rosso e arancione e terminerà con il giallo taxi di New York per le aree con la più alta densità. Per questa combinazione di colori, applicherai questi valori di colore a FillColor e trattoColor. L'impostazione del valore di FillOpacity su 0,5 consente agli utenti di visualizzare la mappa sottostante, mentre l'impostazione del trattoOpacity su 1,0 consente di distinguere tra i confini di poligoni dello stesso colore:
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,
};
Conclusione
Gli stili basati sui dati per i confini di Google sbloccano la possibilità di utilizzare i dati per definire lo stile della mappa per una varietà di implementazioni in settori e segmenti. La connessione ai dati in tempo reale consente di comunicare cosa sta succedendo, dove si verifica e mentre succede. Questa funzionalità ha il potenziale per sbloccare il valore dei tuoi dati in tempo reale e aiutare gli utenti a comprenderli meglio in tempo reale, nel mondo reale.
Azioni successive
- Guarda il webinar Come utilizzare gli stili basati sui dati per definire i confini delle mappe di Google.
- Approfondisci ulteriormente la tua visualizzazione con gli eventi di clic per gli stili basati sui dati.
- Valuta la possibilità di aggiungere indicatori avanzati alla tua mappa.
Collaboratori
Autore principale:
Jim Leflar | Solutions Engineer di Google Maps Platform