Ce document explique pourquoi et comment implémenter un style basé sur les données dynamique pour Google Boundaries à l'aide de l'API Maps JavaScript, qui est utile dans de nombreux cas d'utilisation, quel que soit le secteur ou le segment.
Nombre de taxis animé à New York en fonction des limites du code postal (similaire ou accéléré) :
Le style basé sur les données est une fonctionnalité de Google Maps Platform qui vous permet d'utiliser les polygones des 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 vous expliquent pourquoi et comment vous pouvez visualiser vos données avec le style basé sur les données sur une carte, en temps quasi réel, en intégrant des flux de données dynamiques.
Avec les styles basés sur les données, vous pouvez créer des cartes qui montrent la répartition géographique des données, personnaliser dynamiquement le style de polygone et interagir avec vos données par le biais d'événements de clic. Ces fonctionnalités peuvent servir à créer des cartes informatives et attrayantes pour divers cas d'utilisation et secteurs.
Voici quelques exemples d'utilisation qui peuvent s'appliquer à une carte affichant des mises à jour de données dynamiques avec un style basé sur les données:
- Partage de course:les mises à jour en temps réel peuvent être utilisées pour identifier les zones où la demande est élevée, auquel cas certains fournisseurs peuvent proposer des tarifs de surutilisation.
- Transports:les informations en temps réel peuvent être utilisées pour identifier les zones d'embouteillages et ainsi déterminer les meilleurs itinéraires alternatifs.
- Élections:les soirs d'élection, 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 mises à jour en temps réel peuvent servir à suivre les événements en temps réel, à identifier les zones à haut risque et à fournir des informations sur 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 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 afin de visualiser rapidement et facilement leurs données sur une carte. Ils bénéficient ainsi de la superpuissance 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 en utilisant un style basé sur les données pour visualiser des données dynamiques. Comme illustré précédemment, le cas d'utilisation correspond au nombre de taxis new-yorkais représentés par un code postal. Cela peut aider les utilisateurs à comprendre à quel point il sera facile de héler un taxi.
Voici un diagramme de l'architecture d'application de cette approche :
La solution de style dynamique basée sur les données
Examinons maintenant les étapes nécessaires à l'implémentation d'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é des 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 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 un style basé sur les données.
Étape 1: Choisir les données à visualiser et à associer à 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 correspondre aux limites définies par 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, contrairement aux autres niveaux administratifs. Veillez à sélectionner l'ID de lieu correct pour votre requête dans les cas où les résultats pourraient ê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 le 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 qui vous intéresse. Dans cet exemple, vous appliquerez 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 à des sources de données. La meilleure implémentation dépendra 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 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 toujours à jour. Pour ce faire, vous pouvez appeler la requête ci-dessus à l'aide d'un web worker et régler 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 collaborateur Web demande des valeurs "taxCount" 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, vous pouvez lui appliquer un style sous la forme d'une carte choroplèthe.
Dans cet exemple, vous allez styliser la carte en fonction du nombre de taxis pour chaque code postal. Vous donnerez ainsi à vos utilisateurs une idée de la densité et de la disponibilité des taxis dans leur région. Le style varie en fonction du nombre de taxis. Un style violet sera appliqué aux zones où il y a le moins de taxis. Le dégradé de couleurs passera en rouge et en orange, et se terminera en jaune pour les taxis new-yorkais pour les zones à forte densité. Pour ce jeu de couleurs, vous appliquerez ces valeurs de couleur à fillColor et strokeColor. Définir le fillOpacity sur 0.5 permet à vos utilisateurs de voir la carte sous-jacente, tandis que définir strokeOpacity sur 1.0 leur permet de 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
Le style basé sur les données pour les limites Google vous permet d'utiliser vos données afin d'appliquer un style à votre carte pour diverses implémentations, dans différents secteurs et différents secteurs. En vous connectant à des données en temps réel, vous pouvez communiquer ce qui se passe, où cela se produit et au moment où il se produit. Cette fonctionnalité peut libérer 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 Comment utiliser le style basé sur les données pour appliquer un style aux limites des cartes Google.
- Faites passer votre visualisation au niveau supérieur avec les événements de clic, qui vous permettront de créer des styles basés 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