Visualiser des données avec Google Maps Platform et deck.gl

1. Avant de commencer

Cet atelier de programmation vous explique comment créer une visualisation pour un large volume de données géospatiales à l'aide de l'API Maps JavaScript et deck.gl, un framework de visualisation de données accéléré par WebGL et disponible en Open Source.

d01802e265548be1.png

Conditions préalables

Objectifs de l'atelier

  • Intégrer Google Maps Platform à deck.gl.
  • Importer un ensemble de données dans une carte depuis BigQuery.
  • Définir les points de données sur la carte.

Éléments nécessaires

  • Compte Google
  • Éditeur de texte ou IDE de votre choix
  • Connaissances de base sur JavaScript, HTML et CSS

2. Configurer votre environnement

Premiers pas avec Google Maps Platform

Si vous n'avez jamais utilisé Google Maps Platform, procédez comme suit :

  1. Créez un compte de facturation.
  2. Créez un projet.
  3. Activez les API et les SDK Google Maps Platform.
  4. Générez une clé API.

Télécharger Node.js

Si vous ne l'avez pas encore fait, accédez à https://nodejs.org/, puis téléchargez et installez l'environnement d'exécution Node.js sur votre ordinateur.

Node.js inclut npm, un gestionnaire de packages dont vous avez besoin pour installer les dépendances pour cet atelier de programmation.

Configurer le projet initial

Pour vous faire gagner du temps, le projet initial de cet atelier de programmation inclut tout le code récurrent nécessaire pour instancier une carte.

Voici la procédure à suivre :

  1. Clonez ou téléchargez ce dépôt.
  2. Depuis la ligne de commande, accédez au répertoire /starter qui contient la structure de base de fichier dont vous avez besoin pour cet atelier de programmation.
  3. Installez les dépendances à partir de npm en exécutant la commande suivante :
npm install
  1. Exécutez le projet initial dans votre navigateur avec le serveur de développement Webpack à l'aide de la commande suivante :
npm start
    The starter app opens in your browser and displays a map.
  1. Ouvrez le projet dans votre IDE et accédez au répertoire /starter/src.
  2. Ouvrez le fichier app.js.

C'est dans cette section du fichier que vous allez coder :

const googleMapsAPIKey = 'YOUR API KEY';
loadJSAPI();
function runApp() {
  // Your code goes here
}

Vous ne devez pas modifier le reste du code, qui charge la carte et l'API Maps JavaScript :

/* API and map loader helpers */
function loadJSAPI() {
  const googleMapsAPIURI = `https://maps.googleapis.com/maps/api/js?key=${googleMapsAPIKey}&callback=runApp`;
  const script = document.createElement('script');

  script.src = googleMapsAPIURI;
  script.defer = true;
  script.async = true;

  window.runApp = runApp;
  document.head.appendChild(script);
}

function initMap() {
  const mapOptions = {
    center: { lat: 40.75097, lng: -73.98765 },
    zoom: 14,
    styles: mapStyle
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}
  1. Remplacez YOUR API KEY par la clé API que vous avez générée lors de la configuration de votre environnement :
const googleMapsAPIKey = 'YOUR API KEY';

3. Exporter des données depuis BigQuery

BigQuery offre de nombreux ensembles de données publics que vous pouvez utiliser pour faire des tests ou analyser des données.

Utilisez BigQuery pour exporter un ensemble de données public contenant des données de localisation pour Citi Bike à New York, un programme de vélos en libre-service comptant 14 500 vélos et 900 emplacements, en procédant comme suit :

  1. Accédez à Cloud Console.
  2. Cliquez sur le menu de navigation 41e8e87b85b0f93.png > BigQuery.
  3. Dans l'éditeur de requête, saisissez la requête suivante, puis cliquez sur Exécuter :
SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`
  1. Une fois la requête exécutée, cliquez sur Enregistrer les résultats, puis sélectionnez JSON (fichier local) pour exporter l'ensemble de résultats. Nommez le fichier stations.json et enregistrez-le dans le répertoire /src.

2f4932829f7e1f78.png

Maintenant que vous avez obtenu vos données, vous pouvez créer votre première visualisation avec deck.gl.

4. Définir la visualisation

Il s'agit d'un framework de visualisation de données en Open Source qui utilise WebGL afin de générer des rendus 2D et 3D en haute résolution pour des ensembles de données extrêmement volumineux. Il peut traiter des centaines de milliers de points de données et, lorsqu'il est optimisé, il peut même en gérer plusieurs millions.

Pour créer une visualisation, vous avez besoin de deux classes GoogleMapsOverlay et de l'un des nombreux calques de visualisation de deck.gl.

Pour commencer, créez une instance de ScatterplotLayer, qui affiche des points de données sous forme de cercles sur la carte :

  1. Importez la classe ScatterplotLayer de deck.gl en ajoutant le code suivant devant app.js :
import { ScatterplotLayer } from '@deck.gl/layers';
  1. Définissez les propriétés du calque en choisissant l'un des deux types de propriétés disponibles pour le calque de nuage de points de deck.gl.

Les propriétés setter fournissent à la visualisation les informations nécessaires à son affichage telles que la position et le rayon des points de données. Les propriétés styler permettent de personnaliser le style de la visualisation.

Voici le détail des propriétés utilisées dans l'extrait de code suivant :

  • id permet au moteur de rendu d'identifier des calques pour différentes raisons (changements de couleur et autres modifications de la visualisation). Tous les calques deck.gl nécessitent un identifiant unique, que vous attribuez.
  • data spécifie la source de données de la visualisation. Définissez-le sur ‘./stations.json' pour utiliser l'ensemble de données que vous avez exporté depuis BigQuery.
  • getPosition récupère la position de chaque objet dans la source de données. Notez que la valeur de la propriété est une fonction et que deck.gl utilise celle-ci pour effectuer une itération sur chaque ligne de l'ensemble de données. La fonction indique au moteur de rendu comment accéder à la latitude et à la longitude du point de données de chaque ligne. Dans cet ensemble, les données de chaque ligne sont un objet JSON dont la position est définie dans les propriétés de latitude et de longitude. La fonction que vous fournissez à getPosition est donc d => [parseFloat(d.longitude), parseFloat(d.latitude)].
  • getRadius définit le rayon de chaque objet en mètres. Dans ce cas, le rayon est défini sur d => parseInt(d.capacity), qui détermine la taille des points de données en fonction de la capacité de chaque station.
  • stroked définit si les points de données affichés présentent un trait sur leurs bords extérieurs.
  • getFillColor définit la couleur de remplissage de chaque point de données sous la forme d'un code couleur RVB.
  • getLineColor définit la couleur de trait de chaque point de données sous la forme d'un code couleur RVB.
  • radiusMinPixels définit la largeur minimale en pixels de chaque point de données. Lorsqu'un utilisateur fait un zoom avant ou arrière, deck.gl adapte automatiquement l'échelle des points de données afin que la visualisation reste clairement visible sur la carte. Cette propriété vous permet de déterminer dans quelle mesure ce redimensionnement se produit.
  • radiusMaxPixels définit la largeur maximale en pixels de chaque point de données.
const layerOptions = {
  id: 'scatter-plot',
  data: './stations.json',
  getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
  getRadius: d => parseInt(d.capacity),
  stroked: true,
  getFillColor: [255, 133, 27],
  getLineColor: [255, 38, 27],
  radiusMinPixels: 5,
  radiusMaxPixels: 50
};
  1. Créez une instance de la classe ScatterplotLayer de deck.gl :
const scatterplotLayer = new ScatterplotLayer(layerOptions);

Une fois cette section terminée, votre code doit se présenter comme suit :

import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatterplot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };

  const scatterplotLayer = new ScatterplotLayer(layerOptions);
}

5. Appliquer la visualisation à la carte

Vous pouvez maintenant appliquer votre instance ScatterplotLayer à la carte à l'aide de la classe GoogleMapsOverlay, qui utilise l'API Maps JavaScript OverlayView pour injecter un contexte WebGL sur la carte.

Une fois que tout est en place, vous pouvez transmettre n'importe quel calque de visualisation de deck.gl à GoogleMapsOverlay. Le calque s'affiche alors et est synchronisé avec la carte.

Pour appliquer ScatterplotLayer à la carte, procédez comme suit :

  1. Importez la classe GoogleMapsOverlay de deck.gl :
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
  1. Créez une instance de la classe GoogleMapsOverlay et transmettez-lui l'instance scatterplotLayer que vous avez créée précédemment dans la propriété layers d'un objet :
const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  1. Appliquez la superposition à la carte :
 googleMapsOverlay.setMap(map);

Une fois cette section terminée, votre code doit se présenter comme suit :

import { GoogleMapsOverlay } from '@deck.gl/google-maps';
import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatter-plot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };
  const scatterplotLayer = new ScatterplotLayer(layerOptions);
  const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  googleMapsOverlay.setMap(map);
}

Revenez dans votre navigateur. Vous devriez y voir une superbe visualisation des données de toutes les stations Citi Bike de New York.

d01802e265548be1.png

6. Félicitations

Félicitations ! Vous avez produit une visualisation pour un large volume de données de Citi Bike à New York via Google Maps Platform et deck.gl.

En savoir plus

L'API Maps JavaScript vous donne accès à toutes les fonctionnalités de Google Maps Platform pour le Web. Pour en savoir plus sur l'utilisation de Google Maps Platform sur le Web, consultez les pages suivantes :

deck.gl propose de nombreux calques de visualisation des données que vous pouvez utiliser pour présenter des données à vos utilisateurs. Pour savoir comment utiliser deck.gl avec l'API Maps JavaScript, consultez les pages suivantes :