Ce document explique pourquoi et comment implémenter un style basé sur les données dynamique pour les limites Google à l'aide de l'API Maps JavaScript. Cette fonctionnalité est utile pour différents cas d'utilisation dans différents secteurs et segments.
Nombre de taxis animés à New York par limite de code postal (simulation, accéléré) :
Le style basé sur les données est une fonctionnalité de Google Maps Platform qui vous permet d'utiliser les polygones de limites administratives de Google, d'appliquer un style à ces polygones pour les afficher sur vos cartes et de combiner vos propres données pour créer des cartes riches et personnalisées qui peuvent être utilisées pour l'analyse visuelle et une meilleure compréhension de vos données. Ce document présente quelques cas d'utilisation qui expliquent pourquoi et comment vous pouvez visualiser vos données avec le style basé sur les données sur une carte en quasi-temps réel en intégrant des flux de données dynamiques.
Le style basé sur les données vous permet de créer des cartes qui affichent la répartition géographique des données, de personnaliser dynamiquement le style des polygones et d'interagir avec vos données via les événements de clic. Ces fonctionnalités permettent de créer des cartes informatives et attrayantes pour divers cas d'utilisation et secteurs d'activité.
Voici quelques exemples de cas d'utilisation pouvant s'appliquer à une carte affichant des mises à jour de données dynamiques sur un style basé sur les données:
- Covoiturage:les mises à jour en temps réel peuvent être utilisées pour identifier les zones à forte demande, auquel cas certains fournisseurs peuvent appliquer des prix majorés.
- Transports:les informations en temps réel permettent d'identifier les zones de congestion, ce qui aide à déterminer les meilleurs itinéraires de substitution.
- Élections:le soir d'une élection, les données des sondages en temps réel peuvent être utilisées pour visualiser les résultats au fur et à mesure.
- Sécurité des travailleurs:les mises à jour en temps réel peuvent être utilisées pour suivre les événements au fur et à mesure qu'ils se déroulent, identifier les zones à haut risque et fournir une connaissance de la situation aux intervenants sur le terrain.
- Météo:les mises à jour en temps réel peuvent être utilisées pour suivre le mouvement des tempêtes, identifier les dangers actuels et envoyer des avertissements et des alertes.
- Environnement:les mises à jour en temps réel peuvent être utilisées pour suivre le mouvement des cendres volcaniques et d'autres polluants, identifier les zones de dégradation de l'environnement et surveiller l'impact de l'activité humaine.
Dans toutes ces situations, les clients peuvent tirer davantage de valeur en combinant leurs flux de données en temps réel avec les limites de Google pour visualiser rapidement et facilement leurs données sur une carte. Ils peuvent ainsi obtenir des insights quasi instantanés pour prendre des décisions plus éclairées.
Approche architecturale de la solution
Voyons maintenant comment créer une carte à l'aide du style basé sur les données pour visualiser des données dynamiques. Comme illustré précédemment, le cas d'utilisation consiste à compter les taxis de New York et à les visualiser par code postal. Cela peut aider les utilisateurs à comprendre à quel point il sera facile de héler un taxi.
Voici un schéma de l'architecture de l'application de l'approche :
Solution de style dynamique basée sur les données
Passons maintenant en revue les étapes nécessaires pour implémenter une carte choroplèthe de style basé sur les données dynamique pour votre ensemble de données.
Cette solution vous permet de visualiser un ensemble de données hypothétique de la densité de taxis en temps réel autour de New York par code postal. Bien qu'il ne s'agisse pas de données réelles, elles ont des applications concrètes et vous donnent une idée de la puissance et des fonctionnalités de la visualisation des données dynamiques sur la carte avec le style basé sur les données.
Étape 1: Choisissez les données à visualiser et à joindre à un ID de lieu de limite
La première étape consiste à identifier les données que vous souhaitez afficher et à vous assurer qu'elles peuvent être mises en correspondance avec les limites de Google. Vous pouvez effectuer cette mise en correspondance côté client en appelant la méthode de rappel findPlaceFromQuery pour chaque code postal. Notez que les codes postaux aux États-Unis ont des noms distincts, mais que ce n'est pas le cas des autres niveaux administratifs. Assurez-vous de sélectionner le bon ID d'emplacement pour votre requête si les résultats peuvent être ambigus.
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]);
}
});
}
Si vos données contiennent des valeurs de latitude et de longitude, vous pouvez également utiliser l'API Geocoding avec le filtrage des composants pour résoudre ces valeurs de latitude/longitude en valeurs d'ID de lieu pour le calque d'éléments géographiques que vous souhaitez styliser. Dans cet exemple, vous allez styliser la couche d'éléments géographiques POSTAL_CODE.
Étape 2: Se connecter aux données en temps réel
Il existe plusieurs façons de se connecter à des sources de données. La meilleure implémentation dépend de vos besoins spécifiques et de votre infrastructure technique. Dans ce cas, supposons que vos données se trouvent dans une table BigQuery avec deux colonnes : "zip_code" et "taxi_count", et que vous les interrogerez via une fonction Cloud 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'];
});
}
Vous devez ensuite vous assurer que les données sont à jour. Pour ce faire, vous pouvez appeler la requête ci-dessus à l'aide d'un web worker et définir un minuteur pour actualiser vos données à l'aide de la fonction setInterval. Vous pouvez définir l'intervalle sur une valeur appropriée, par exemple actualiser la carte toutes les 15 secondes. À chaque fois que l'intervalle expire, le nœud de travail Web demande des valeurs taxiCount mises à jour par code postal.
Maintenant que nous pouvons interroger et actualiser les données, assurons-nous que l'apparence des polygones de la carte reflète ces modifications.
Étape 3: Mettre en forme votre carte avec des styles basés sur les données
Maintenant que vous disposez des valeurs de données dynamiques nécessaires pour créer et appliquer un style visuel aux limites des codes postaux dans votre instance JavaScript Maps en tant qu'objet JSON, il est temps de lui donner du style en tant que carte choroplèthe.
Dans cet exemple, vous allez styliser la carte en fonction du nombre de taxis dans chaque code postal, afin de donner à vos utilisateurs une idée de la densité et de la disponibilité des taxis dans leur région. Le style varie en fonction des valeurs du nombre de taxis. Les zones où les taxis sont les moins nombreux sont stylisées en violet. Le dégradé de couleurs passe ensuite au rouge, à l'orange et se termine par le jaune des taxis new-yorkais pour les zones les plus denses. Pour ce jeu de couleurs, vous appliquerez ces valeurs de couleur à fillColor et strokeColor. Définir la valeur fillOpacity sur 0,5 permet à vos utilisateurs de voir la carte sous-jacente, et définir la valeur strokeOpacity sur 1,0 leur permet de différencier les limites des polygones de même couleur:
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,
};
Conclusion
Le style basé sur les données pour les limites Google vous permet d'utiliser vos données pour styliser votre carte pour diverses implémentations dans différents secteurs et segments. La connexion aux données en temps réel vous permet de communiquer ce qui se passe, où cela se passe et au moment même où cela se passe. Cette fonctionnalité peut vous permettre de tirer parti de la valeur de vos données en temps réel et d'aider vos utilisateurs à mieux les comprendre en temps réel, dans le monde réel.
Étapes suivantes
- Regardez le webinaire Utiliser le style basé sur les données pour styliser les limites de Google Maps.
- Approfondissez votre visualisation avec les événements de clic pour le style basé sur les données.
- Envisagez d'ajouter des repères avancés à votre carte.
Contributeurs
Auteur principal:
Jim Leflar | Ingénieur solutions Google Maps Platform