Visualiser vos données avec BigQuery et l'API Dataset

Ce document fournit une architecture de référence et un exemple pour créer des visualisations de données cartographiques à l'aide de données de localisation dans BigQuery de Google Cloud Platform et l'API Datasets de Google Maps Platform. Il permet, par exemple, d'analyser des données municipales ouvertes, de créer une carte de couverture des télécommunications ou de visualiser les traces des déplacements de la flotte de véhicules mobiles.

Les visualisations de données cartographiques sont un outil puissant pour engager les utilisateurs et découvrir des informations spatiales sur les données de localisation. Les données de localisation incluent des éléments géographiques de type point, ligne ou polygone. Par exemple, les cartes météorologiques aident les consommateurs à comprendre et planifier leurs voyages, ainsi qu'à se préparer aux tempêtes. Les cartes d'informatique décisionnelle aident les utilisateurs à dégager des insights de leurs analyses de données, tandis que les cartes des télécommunications aident les utilisateurs à comprendre la couverture et la qualité de leurs fournisseurs dans une zone de service donnée.

Toutefois, il est difficile pour les développeurs d'applications de créer des visualisations de données cartographiques volumineuses qui sont performantes et offrent une excellente expérience utilisateur. Les données volumineuses doivent être chargées en mémoire côté client, ce qui ralentit le premier chargement de la carte. L'aspect visuel doit être performant sur tous les appareils, y compris les téléphones mobiles bas de gamme qui présentent des contraintes de mémoire et de GPU. Enfin, les développeurs doivent choisir une grande bibliothèque de rendu de données, portable, fiable et performante avec de grandes quantités de données.

Architecture de référence

Le développement d'applications avec des visualisations de données volumineuses nécessite deux composants principaux.

  1. Backend du client : ensemble des données et services de l'application backend (traitement et stockage, par exemple).
  2. Client client : interface utilisateur de votre application avec un composant de visualisation cartographique.

Vous trouverez ci-dessous un schéma système montrant comment ces deux composants interagissent avec l'utilisateur de l'application, Google Cloud et Google Maps Platform pour créer une application de visualisation de données volumineuse.

schéma de l'architecture

⭐ Remarque: L'API Maps Datasets est un produit pré-DG. Pour en savoir plus, consultez les Conditions d'utilisation.

Considérations de conception

Plusieurs considérations de conception sont à prendre en compte pour créer une visualisation des données performante à l'aide de Google Cloud et Google Maps Platform.

  1. Taille des données sources et fréquence de mise à jour
    1. Si les données sources au format GeoJSON sont inférieures à 5 Mo ou sont mises à jour très fréquemment, par exemple des prévisions de radars météorologiques en temps réel, envisagez de diffuser les données en tant qu'objet GeoJSON côté client dans votre application et d'effectuer le rendu avec un calque deck.gl.
    2. Si vos données font plus de 5 Mo et ne sont pas mises à jour plus d'une fois par heure, envisagez d'utiliser l'architecture de l'API Datasets dans ce document.
      1. Les ensembles de données acceptent les fichiers d'une taille maximale de 350 Mo.
      2. Si vos données dépassent 350 Mo, envisagez de les élaguer ou de les simplifier dans le fichier source avant de les transmettre aux ensembles de données (voir "Élagage des données" ci-dessous).
  2. Schéma et format
    1. Assurez-vous que vos données disposent d'une propriété d'ID unique pour chaque caractéristique. Un identifiant unique vous permet de sélectionner et de styliser un élément géographique spécifique, ou d'associer des données à un élément géographique pour les visualiser, par exemple en appliquant un style à un élément géographique sélectionné pour l'événement utilisateur "clic".
    2. Mettez en forme vos données au format CSV ou GeoJSON conformément aux spécifications de l'API Datasets avec des noms de colonne, des types de données et des types d'objets GeoJSON valides.
    3. Pour créer facilement des ensembles de données à partir de BigQuery, créez une colonne nommée wkt dans votre exportation SQL CSV. Les ensembles de données sont compatibles avec l'importation de géométrie à partir d'un fichier CSV au format Well-Known Text (WKT) à partir d'une colonne nommée wkt.
    4. Vérifiez que la géométrie et les types de données sont valides. Par exemple, GeoJSON doit être dans le système de coordonnées WGS84, dans l'ordre de tracé géométrique, etc.
    5. Utilisez un outil tel que geojson-validate pour vous assurer que toutes les géométries d'un fichier source sont valides, ou ogr2ogr pour transformer un fichier source en différents formats ou systèmes de coordonnées.
  3. Élagage de données
    1. Réduisez le nombre de propriétés des éléments géographiques. Vous pouvez associer d'autres propriétés à un élément géographique au moment de l'exécution sur une clé d'identifiant unique (exemple).
    2. Dans la mesure du possible, utilisez des types de données entiers pour les objets de propriété afin de réduire l'espace de stockage des cartes et de maintenir les performances des cartes pour qu'elles puissent se charger via HTTPS dans une application cliente.
    3. Simplifiez et/ou agrégez des géométries de caractéristiques très complexes. Pensez à utiliser des fonctions BigQuery telles que ST_Simplify sur des géométries de polygones complexes afin de réduire la taille du fichier source et d'améliorer les performances des cartes.
  4. Inclinaison
    1. L'API Google Maps Datasets crée des tuiles de carte à partir de votre fichier de données source pour les utiliser dans l'API Maps JS.
    2. Les tuiles de carte sont un système d'indexation basé sur le zoom qui permet de charger des données plus efficacement dans une application visuelle.
    3. Les tuiles de carte peuvent déposer des éléments géographiques denses ou complexes à des niveaux de zoom inférieurs. Un zoom arrière sur un État ou un pays (par exemple, z5-z12) peut être différent lorsque l'utilisateur effectue un zoom arrière sur une ville ou un quartier (par exemple, z13-z18).

Exemple : Voies ferrées à Londres

Dans cet exemple, nous allons appliquer l'architecture de référence pour créer, avec GCP et Google Maps, une application Web permettant de visualiser tous les chemins de fer de Londres à partir de données Open Street Map (OSM).

Prérequis

  1. Un accès au bac à sable BigQuery et à la console Cloud
  2. Assurez-vous de disposer d'un projet GCP et d'un compte de facturation configurés.

Étape 1 : Interroger les données dans BigQuery

Accédez à Ensembles de données publics BigQuery. L'ensemble de données "bigquery-public-data" et la table geo_openstreetmap.planet_features contiennent l'intégralité des données Open Street Map (OSM), y compris toutes les caractéristiques possibles. Découvrez toutes les fonctionnalités pouvant être interrogées dans le wiki OSM, y compris amenity, road et landuse.

Interrogez la table à l'aide de SQL à l'aide de Cloud Shell ou de la console Cloud BigQuery(https://console.cloud.google.com). L'extrait de code ci-dessous utilise la commande bq query pour interroger toutes les voies ferrées filtrées sur Londres uniquement à l'aide d'un cadre de délimitation et de la fonction ST_Intersects().

Pour exécuter cette requête à partir de Cloud Shell, exécutez l'extrait de code suivant en mettant à jour l'ID de projet, l'ensemble de données et le nom de la table pour votre environnement.

bq query --use_legacy_sql=false \
--destination_table PROJECTID:DATASET.TABLENAME \
--replace \
'SELECT
osm_id, 
feature_type,
(SELECT value
         FROM   unnest(all_tags)
         WHERE  KEY = "name") AS name,
(SELECT value
         FROM   unnest(all_tags)
         WHERE  KEY = "railway") AS railway,
geometry as wkt
FROM   bigquery-public-data.geo_openstreetmap.planet_features
WHERE ("railway") IN (SELECT key FROM unnest(all_tags)) 
    AND ST_Intersects(
    geometry,
ST_MakePolygon(ST_MakeLine(
      [ST_GeogPoint(-0.549370, 51.725346),
      ST_GeogPoint(-0.549370, 51.2529407),
      ST_GeogPoint(0.3110581, 51.25294),
      ST_GeogPoint(0.3110581, 51.725346),
      ST_GeogPoint(-0.549370, 51.725346)]
    ))
   )'

La requête renvoie:

  1. un identifiant unique pour chaque caractéristique osm_id
  2. feature_type (points, lignes, etc.)
  3. Le name de la caractéristique (par exemple, Paddington Station)
  4. Type de railway, par exemple "principal", "tourisme", "armée", etc.
  5. Valeur wkt de l'élément géographique ( géométrie de type point, ligne ou polygone) au format WKT. WKT est le format de données standard que les colonnes de géographie BigQuery renvoient dans une requête.

Remarque : Pour valider visuellement les résultats de votre requête avant de créer un ensemble de données, vous pouvez rapidement visualiser vos données dans un tableau de bord BigQuery à l'aide de Looker Studio.

Pour exporter la table vers un fichier CSV dans un bucket Google Cloud Storage, utilisez la commande bq extract dans Cloud Shell:

bq extract \
--destination_format "CSV" \
--field_delimiter "," \
--print_header=true \
PROJECTID:DATASET.TABLENAME \
gs://BUCKET/FILENAME.csv

Remarque:Vous pouvez automatiser chaque étape à l'aide de Cloud Scheduler pour mettre à jour vos données régulièrement.

Étape 2 : Créez un ensemble de données à partir du fichier CSV

Créez ensuite un ensemble de données Google Maps Platform à partir du résultat de la requête sur Google Cloud Storage (GCS). L'API Datasets vous permet de créer un ensemble de données, puis d'importer des données dans votre ensemble de données à partir d'un fichier hébergé sur GCS.

Pour commencer, activez l'API Maps Datasets sur votre projet GCP et consultez la documentation de l'API. Il existe des bibliothèques clientes Python et Node.js permettant d'appeler l'API Datasets à partir de la logique du backend de votre application. De plus, il existe une IUG des ensembles de données permettant de créer des ensembles de données manuellement dans la console Cloud.

Une fois l'importation terminée, vous pouvez prévisualiser votre ensemble de données dans son interface graphique.

Aperçu de l'ensemble de données

Étape 4 : Associer votre ensemble de données à un ID de carte

Une fois votre ensemble de données créé, vous pouvez créer un ID de carte associé à un style de carte. Dans l'éditeur de style de carte, vous pouvez associer un mapId et un style à l'ensemble de données. C'est également là que vous pouvez appliquer les styles de carte basés dans le cloud pour personnaliser l'apparence de votre carte.

Étape 5 : Créez une visualisation cartographique de votre application cliente

Enfin, vous pouvez ajouter l'ensemble de données à une application de visualisation des données côté client à l'aide de l'API Maps JavaScript. Initialisez votre objet de carte à l'aide de l'ID de carte associé à l'ensemble de données de l'étape précédente. Définissez ensuite le style et l'interactivité du calque de votre ensemble de données. Pour en savoir plus, consultez le guide complet des styles basés sur les données avec les ensembles de données.

Avec l'API Maps JavaScript, vous pouvez personnaliser le style, ajouter des gestionnaires d'événements afin de le modifier de façon dynamique, et bien plus encore. Pour consulter des exemples, consultez la docs. Nous allons définir ci-dessous une fonction setStyle permettant de créer le style d'éléments géographiques de type point et ligne pour cet exemple en fonction de l'attribut "feature_type".

Remarque : Veillez à utiliser la version bêta pour votre implémentation de l'API Maps JavaScript.

function setStyle(params) {
  const map.getDatasetFeatureLayer("your-dataset-id");
  const datasetFeature = params.feature;
  const type = datasetFeature.datasetAttributes["feature_type"];
if (type == "lines") {
           return {
             fillColor: "blue",
             strokeColor: "blue",
             fillOpacity: 0.5,
             strokeWeight: 1,
           }
         } else if (type == "points") {
           return {
             fillColor: "black",
             strokeColor: "black",
             strokeOpacity: 0.5,
             pointRadius: 2,
             fillOpacity: 0.5,
             strokeWeight: 1,
           }
     }
}

Remarque : Veillez à toujours ajouter une attribution pour votre ensemble de données à votre application de carte. Pour ajouter une attribution OSM, suivez l'exemple de code d'attribution dans la documentation en respectant les consignes OSM.

Ce code ci-dessus, lorsqu'il est initialisé dans une application Web sur une seule page, génère le visuel de données cartographiques suivant:

plan du chemin de fer de londres

À partir de là, vous pouvez étendre votre visualisation de carte dans la fonction setStyle() en ajoutant une logique aux éléments géographiques de filtrage, en ajoutant un style basé sur l'interaction de l'utilisateur et en interagissant avec le reste de votre application.

Conclusion

Dans cet article, nous avons abordé une architecture de référence et un exemple d'implémentation d'une application de visualisation de données volumineuse à l'aide de Google Cloud et de Google Maps Platform. Grâce à cette architecture de référence, vous pouvez créer des applications de visualisation des données de localisation à partir de n'importe quelle donnée présente dans BigQuery dans GCP et performante sur n'importe quel appareil utilisant l'API Google Maps Datasets.

Actions suivantes

Autres références :

Contributeurs

Auteurs principaux:

  • Ryan Baumann, responsable de l'ingénierie des solutions pour Google Maps Platform