Questo documento descrive perché e come implementare lo styling basato sui dati dinamico dei confini di Google utilizzando l'API JavaScript di Maps, che è utile per una serie di casi d'uso in vari settori e segmenti.
Conteggi animati dei taxi a New York per confine del codice postale (simulati, in time-lapse):
La definizione dello stile in base ai dati è una funzionalità di Google Maps Platform che ti consente di utilizzare i poligoni dei confini amministrativi di Google, applicare stili a questi poligoni per la visualizzazione sulle mappe e combinare i tuoi dati per creare mappe ricche 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 puoi visualizzare i tuoi dati con gli stili basati sui dati su una mappa quasi in tempo reale integrando i feed di dati dinamici.
Gli stili basati sui dati ti consentono di creare mappe che mostrano la distribuzione geografica dei dati, personalizzare dinamicamente lo stile del poligono e interagire con i dati tramite gli eventi di clic. Queste funzionalità possono essere utilizzate per creare mappe informative e coinvolgenti per una serie di casi d'uso e settori.
Di seguito sono riportati alcuni esempi di casi d'uso che potrebbero essere applicabili a una mappa che mostra gli aggiornamenti dei dati dinamici nello stile basato sui dati:
- Car sharing: gli aggiornamenti in tempo reale possono essere utilizzati per identificare le aree con una domanda elevata, in cui alcuni fornitori potrebbero applicare prezzi eccezionali.
- Trasporti: è possibile utilizzare gli aggiornamenti in tempo reale per identificare le aree congestionate, in modo da stabilire i percorsi alternativi migliori.
- Elezioni: la notte delle elezioni, i dati dei sondaggi 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, identificare le aree ad alto rischio e fornire una consapevolezza situazionale agli operatori sul campo.
- Meteo:gli aggiornamenti in tempo reale possono essere utilizzati per monitorare il movimento delle tempeste, identificare i pericoli attuali e fornire avvisi e allarmi.
- Ambiente: gli aggiornamenti in tempo reale possono essere utilizzati per monitorare il movimento delle ceneri vulcaniche e di altri inquinanti, identificare le aree di degrado ambientale e monitorare l'impatto dell'attività umana.
In tutte queste situazioni, i clienti possono ottenere un valore aggiunto combinando i propri feed di dati in tempo reale con i confini di Google per visualizzare i dati su una mappa in modo facile e veloce, ottenendo così la superpotenza di informazioni quasi istantanee per prendere decisioni più consapevoli.
Approccio architettonico alla soluzione
Ora vediamo come creare una mappa utilizzando gli stili basati sui dati per visualizzare i dati dinamici. Come illustrato in precedenza, il caso d'uso è un conteggio dei taxi di New York visualizzati per codice postale. In questo modo, gli utenti possono capire quanto sarà facile chiamare un taxi.
Ecco un diagramma dell'architettura dell'applicazione dell'approccio:
Soluzione dinamica per gli stili basati sui dati
Ora esaminiamo i passaggi necessari per implementare una mappa coropletica di stili basati sui dati dinamici per il tuo set di dati.
Questa soluzione consente di visualizzare un set di dati ipotetico della densità dei taxi in tempo reale nella città di New York per codice postale. Sebbene questi non siano dati reali, hanno applicazioni reali e ti forniscono un'idea della potenza e delle funzionalità di come i dati dinamici possono essere visualizzati sulla mappa con gli stili basati 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 da visualizzare e assicurarsi che possano essere abbinati ai confini di Google. Puoi eseguire questa corrispondenza lato client chiamando il metodo di callback findPlaceFromQuery per ogni codice postale. Tieni presente che i codici postali negli Stati Uniti hanno nomi distinti, ma non gli altri livelli amministrativi. Assicurati di selezionare l'ID luogo corretto per la query nei casi 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 dati hanno valori di latitudine e longitudine, puoi anche utilizzare l'API Geocoding con filtro dei componenti per risolvere questi valori di latitudine/longitudine in valori ID luogo per il livello degli elementi a cui vuoi applicare uno stile. In questo esempio, stilerai il livello di funzionalità POSTAL_CODE.
Passaggio 2: connettiti ai dati in tempo reale
Esistono diversi modi per connettersi alle origini dati e l'implementazione migliore dipenderà 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 eseguirai query mediante una funzione Cloud Functions di Firebase.
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'];
});
}
Successivamente, assicurati di mantenere aggiornati i dati. Un modo per farlo è chiamare la query precedente 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 il tempo dell'intervallo, il worker web richiede i valori aggiornati di taxiCount per ogni codice postale.
Ora che possiamo eseguire query e aggiornare i dati, assicuriamoci che l'aspetto dei poligoni della mappa rifletta queste modifiche.
Passaggio 3: applica uno stile alla mappa con gli stili basati sui dati
Ora che hai i valori dei dati dinamici necessari per creare e applicare uno stile visivo ai confini dei codici postali nell'istanza JavaScript di Maps come oggetto JSON, è il momento di applicare uno stile come mappa di tipo choropleth.
In questo esempio, stilerai la mappa in base al numero di taxi in ogni codice postale, dando agli utenti un'idea della densità e della disponibilità dei taxi nella loro zona. Lo stile varierà in base ai valori del conteggio dei taxi. Alle aree con il minor numero di taxi verrà applicato uno stile viola e il gradiente di colore passerà dal rosso all'arancione per terminare con il giallo dei taxi di New York nelle aree con la densità più elevata. Per questa combinazione di colori, verranno applicati questi valori a FillColor e structColor. L'impostazione di fillOpacity su 0,5 consente agli utenti di vedere la mappa sottostante, mentre l'impostazione di strokeOpacity su 1,0 consente loro di distinguere i confini dei 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
La definizione dello stile basata sui dati per i confini di Google ti consente di utilizzare i tuoi dati per dare uno stile alla mappa per una serie di implementazioni in vari settori e segmenti. La connessione ai dati in tempo reale ti consente di comunicare cosa sta succedendo, dove e nel momento in cui si verifica. Questa funzionalità ha il potenziale per liberare 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 la personalizzazione basata sui dati per stilizzare i confini delle mappe di Google.
- Fai un ulteriore passo avanti nella visualizzazione con gli eventi di clic per lo stile basato sui dati.
- Valuta la possibilità di aggiungere indicatori avanzati alla tua mappa.
Collaboratori
Autore principale:
Jim Leflar | Solutions Engineer di Google Maps Platform