Questo documento descrive perché e come implementare gli stili basati sui dati dinamici dei confini di Google utilizzando l'API Maps JavaScript, utile per una varietà di casi d'uso in settori e segmenti.
Conteggio dei taxi animati a New York in base al confine del codice postale (simulato, 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, applicarvi lo stile per la visualizzazione sulle tue mappe e combinare i tuoi dati per creare mappe dettagliate e personalizzate che possono essere utilizzate per un'analisi visiva e una migliore comprensione dei tuoi dati. Questo documento illustra alcuni casi d'uso che spiegano perché e come è possibile visualizzare i 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 in modo dinamico lo stile dei poligoni e interagire con i tuoi dati tramite gli eventi di clic. Queste funzionalità possono essere utilizzate per creare mappe informative e coinvolgenti per diversi casi d'uso e settori.
Di seguito sono riportati alcuni esempi di casi d'uso applicabili a una mappa che mostra aggiornamenti dei dati dinamici con gli 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 avere prezzi in aumento.
- Trasporti: è possibile utilizzare gli aggiornamenti in tempo reale per identificare le aree congestionate, in modo da stabilire i percorsi alternativi migliori.
- Elezioni: durante la notte delle elezioni, è possibile utilizzare i dati dei sondaggi in tempo reale per visualizzare i risultati nel momento in cui si verificano.
- Sicurezza dei lavoratori: è possibile utilizzare aggiornamenti in tempo reale per tenere traccia degli eventi in tempo reale, identificare le aree ad alto rischio e fornire consapevolezza situazionale a chi risponde 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 allerte.
- Ambiente: è possibile utilizzare aggiornamenti in tempo reale per monitorare il movimento di ceneri vulcaniche e altri inquinanti, identificare le aree in cui l'ambiente è degrado e monitorare l'impatto dell'attività umana.
In tutte queste situazioni, i clienti possono generare valore aggiuntivo combinando i loro feed di dati in tempo reale con i confini di Google per visualizzare rapidamente e facilmente i loro dati su una mappa, dando loro il superpotere di insight quasi istantanei per prendere decisioni più informate.
Approccio architetturale alla soluzione
Adesso 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. Ciò può essere utile agli utenti per capire quanto sarà facile chiamare un taxi.
Ecco un diagramma dell'architettura applicativa 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. Anche se non si tratta di dati del mondo reale, ha applicazioni reali e ti offre un'idea della potenza e delle capacità 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 che vuoi visualizzare e assicurarti che possano essere abbinati ai limiti 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, a differenza degli 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 darai lo stile al livello delle caratteristiche POSTAL_CODE.
Passaggio 2: connettiti ai dati in tempo reale
Esistono diversi modi per connettersi alle origini dati e la migliore implementazione dipende dalle 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'];
});
}
Dopodiché dovrai assicurarti di mantenere i dati aggiornati. Un modo per farlo è chiamare la query precedente utilizzando un lavoratore web e impostare un timer per aggiornare i dati usando la funzione setInterval. Puoi impostare l'intervallo su un valore appropriato, ad esempio aggiornando la mappa ogni 15 secondi. Ogni volta che passa il tempo dell'intervallo, il worker web richiederà valori taxiCount aggiornati per codice postale.
Ora che possiamo interrogare e aggiornare i dati, assicuriamoci che l'aspetto dei poligoni della mappa rifletta queste modifiche.
Passaggio 3: personalizza lo stile della mappa con gli stili basati sui dati
Ora che disponi dei valori dei dati dinamici necessari per creare e applicare uno stile visivo ai confini del codice postale nella tua istanza di Maps JavaScript come oggetto JSON, è il momento di assegnargli uno stile come mappa coropletica.
In questo esempio, applicherai uno stile alla mappa in base al numero di taxi in ogni 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 del numero di taxi. Alle aree con il minor numero di taxi verrà applicato uno stile viola e il gradiente di colore si sposterà in rosso e arancione e terminerà in giallo per taxi di New York per le aree con densità più alta. Per questa combinazione di colori, potrai applicare 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 structOpacity su 1.0 consente 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
Gli stili basati sui dati per i confini di Google consentono di utilizzare i dati per definire lo stile della mappa per una serie di implementazioni in diversi 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à è potenzialmente in grado di sfruttare il valore dei tuoi dati in tempo reale e di aiutare gli utenti a comprenderli meglio in tempo reale e nel mondo reale.
Azioni successive
- Guarda il webinar su come utilizzare gli stili basati sui dati per definire i confini della mappa di Google.
- Porta la tua visualizzazione a un livello superiore con gli eventi di clic per gli stili basati sui dati.
- Valuta la possibilità di aggiungere indicatori avanzati alla mappa.
Collaboratori
Autore principale:
Jim Leflar | Solutions Engineer di Google Maps Platform