Ce document explique pourquoi et comment implémenter un style basé sur les données dynamique des limites Google à l'aide de l'API Maps JavaScript, qui est utile pour divers cas d'utilisation, dans différents secteurs et secteurs.
Nombre animé de taxis à New York par code postal (simulé, en 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 limite administrative 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 enrichies et personnalisées qui peuvent être utilisées pour effectuer une analyse visuelle et améliorer la compréhension de vos données. Ce document présente quelques cas d'utilisation expliquant pourquoi et comment visualiser vos données sur une carte en temps quasi réel grâce au style basé sur les données en intégrant des flux de données dynamiques.
Le style basé sur les données vous permet de créer des cartes qui montrent la répartition géographique des données, de personnaliser dynamiquement le style de polygone et d'interagir avec vos données par le biais des événements de clic. Ces fonctionnalités peuvent être utilisées pour créer des cartes informatives et attrayantes pour une variété de cas d'utilisation et de secteurs d'activité.
Voici quelques exemples d'utilisation qui peuvent être applicables à une carte affichant des mises à jour dynamiques des données avec un style basé sur les données:
- Partage de course:les mises à jour en temps réel permettent d'identifier les zones où la demande est élevée. Dans ce cas, certains fournisseurs peuvent appliquer des tarifs de surutilisation.
- Transports:les mises à jour en temps réel peuvent être utilisées pour identifier les zones embouteillées, ce qui vous aidera à déterminer les meilleurs itinéraires bis.
- Élections:lors d'une soirée électorale, les données de sondage en temps réel peuvent être utilisées pour visualiser les résultats en temps réel.
- Sécurité des travailleurs:les informations en temps réel permettent de suivre les événements en temps réel, d'identifier les zones à haut risque et d'informer les équipes d'intervention sur le terrain.
- Météo:les mises à jour en temps réel permettent de suivre le mouvement des tempêtes, d'identifier les dangers actuels, et de générer des avertissements et des alertes.
- Environnement:les mises à jour en temps réel permettent de suivre le mouvement des cendres volcaniques et d'autres polluants, d'identifier les zones de dégradation de l'environnement et de surveiller l'impact de l'activité humaine.
Dans toutes ces situations, les clients peuvent générer de la valeur supplémentaire 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 bénéficient ainsi du superpouvoir d'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 est le nombre de taxis new-yorkais représentés par un code postal. Cela peut aider les utilisateurs à comprendre à quel point il est facile de héler un taxi.
Voici un schéma de l'architecture d'une application de l'approche :
La solution de styles basés sur les données dynamiques
Voyons maintenant les étapes nécessaires à l'implémentation d'une carte choroplèthe dynamique avec styles basés sur les données pour votre ensemble de données.
Cette solution vous permet de visualiser un ensemble de données fictif concernant la densité des taxis en temps réel dans la ville de New York en fonction d'un code postal. Bien qu'il ne s'agisse pas de données du monde réel, elles ont des applications réelles et vous donnent une idée de la puissance et des capacités de visualisation des données dynamiques sur la carte avec le style basé sur les données.
Étape 1: Sélectionnez les données à visualiser et associez-les à un ID de lieu de limite
La première étape consiste à identifier les données que vous souhaitez afficher et à vous assurer qu'elles correspondent aux limites de Google. Vous pouvez effectuer cette correspondance côté client en appelant la méthode de rappel findPlaceFromQuery pour chaque code postal. Aux États-Unis, les codes postaux ont des noms distincts, mais ce n'est pas le cas des autres niveaux administratifs. Assurez-vous de sélectionner l'ID de lieu approprié 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 comportent des valeurs de latitude et de longitude, vous pouvez également utiliser l'API Geocoding avec filtrage par composants pour résoudre ces valeurs de latitude et de longitude en valeurs d'ID de lieu pour le calque d'éléments géographiques que vous souhaitez styliser. Dans cet exemple, vous allez appliquer un style au calque d'éléments géographiques POSTAL_CODE.
Étape 2: Connectez-vous aux données en temps réel
Il existe plusieurs façons de se connecter aux sources de données. La meilleure implémentation dépend de vos besoins spécifiques et de votre infrastructure technique. Supposons que vos données se trouvent dans une table BigQuery comportant deux colonnes : "zip_code" et "taxi_count". Vous allez les interroger à l'aide d'une fonction Firebase Cloud.
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'];
});
}
Ensuite, vous devez veiller à ce que les données restent à jour. Pour ce faire, vous pouvez appeler la requête ci-dessus à l'aide d'un nœud de calcul Web 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 de temps s'écoule, le nœud de calcul Web demande des valeurs taxiCount mises à jour par code postal.
Maintenant que nous pouvons interroger et actualiser les données, vérifions que l'apparence des polygones de la carte reflète ces modifications.
Étape 3: Appliquer un style basé sur les données à votre carte
Maintenant que vous disposez des valeurs de données dynamiques nécessaires pour créer et appliquer un style visuel aux limites de code postal dans votre instance Maps JavaScript en tant qu'objet JSON, il est temps de lui appliquer un style en tant que carte choroplèthe.
Dans cet exemple, vous allez appliquer un style à la carte en fonction du nombre de taxis pour chaque code postal. Les utilisateurs auront ainsi une idée de la densité et de la disponibilité des taxis dans leur zone géographique. Le style varie en fonction du nombre de taxis. Un style violet s'appliquera aux zones comptant le moins de taxis, et le dégradé de couleurs passera en rouge, en orange et se terminera au jaune taxi de New York pour les zones à la densité la plus élevée. Pour ce jeu de couleurs, vous appliquerez ces valeurs de couleur à fillColor et plotColor. Si la valeur fillOpacity est définie sur 0.5, les utilisateurs peuvent voir la carte sous-jacente. Si la propriété plotOpacity est définie sur 1.0, les utilisateurs peuvent différencier les limites de 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
Avec le style basé sur les données pour les limites Google, vous pouvez utiliser vos données pour styliser votre carte dans divers secteurs et segments. En vous connectant aux données en temps réel, vous pouvez communiquer ce qui se passe, où cela se produit et en temps réel. Cette fonctionnalité peut vous permettre d'exploiter tout le potentiel de vos données en temps réel et aider vos utilisateurs à mieux les comprendre en temps réel, dans le monde réel.
Actions suivantes
- Regardez le webinaire Utiliser le style basé sur les données pour appliquer un style aux limites de la carte Google.
- Allez encore plus loin dans votre visualisation grâce aux é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 en solutions Google Maps Platform