Bonjour à toustes,
Celles et ceux d’entre vous qui ont assisté au club utilisateurs Grist du 25 novembre se rappellent peut-être de la présentation qu’ont fait mes collègues d’Open Source Politics d’une carte interactive que nous avons réalisée pour l’association A+ c’est mieux !. Cette carte s’appuie notamment sur Grist, et nous allons détailler ici comment construire votre propre carte sur le même principe.
L’outil qui servira ici à afficher la carte s’appelle GoGoCarto. Il récupérera les données de votre tableau Grist qui doit contenir au moins une latitude et une longitude pour chaque lieu à cartographier (le géocodage et l’obtention de ces coordonnées ne font pas l’objet de ce tutoriel).
Méthode 1 : connecter directement GoGoCarto à Grist (données ouvertes)
Cette méthode est la plus simple à mettre en place, mais nécessite d’ouvrir un l’accès public en lecture seule à votre document Grist. Elle est donc adaptée à un jeu de données ouvertes, mais pour les autres cas, faites preuve de prudence et envisagez la seconde méthode décrite ci-dessous.
- Une fois l’accès public accordé, copiez l’URL de base pour ce document (page « Paramètres » > « API » > « ID du Document »)
- Dans la page d’administration de GoGoCarto, ouvrez « Données / Import » > « Import Dynamique »
- Cliquez sur « Ajouter », et collez l’URL de base précédemment copiée dans le champ « Ou URL vers une API JSON »
- Vous devez ensuite suffixer cette URL avec
/tables/IdentifiantDeTable/records, « IdentifiantDeTable » correspondant au tableau qui contient vos latitudes et longitudes (vous trouverez cet identifiant dans la page « Données source » de Grist) - Ouvrez l’onglet « Modifiez les données en exécutant du code » et collez la ligne suivante dans le bloc PHP :
$data = $data['elements']; - Cliquez sur « Sauvegarder » et n’oubliez pas de remplir la table de correspondance des champs dans l’onglet « Transformer les données à importer »
Merci à @Wunderbarcarole de m’avoir suggéré cette méthode !
Méthode 2 : connecter GoGoCarto à Grist via n8n (accès sécurisé)
Si votre document Grist n’a pas vocation à être accessible au public, il vaut mieux que GoGoCarto s’y connecte par un accès sécurisé ; or, cela n’est pas possible directement. Il faudra donc utiliser n8n pour fournir cet accès sécurisé et faire le lien entre Grist et GoGoCarto :
Créer le workflow n8n
Téléchargez ce fichier JSON pour ensuite l’importer dans n8n et initialiser le workflow.
Voici à quoi il doit ressembler :
Tout d’abord, un webhook fait office de point d’entrée de la donnée. C’est là que se trouve l’URL que vous devrez renseigner dans GoGoCarto pour faire dialoguer ces outils entre eux (cf. étapes suivantes) :
- HTTP Method = GET
- Authentication = None
- Respond = When Last Node Finishes (le webhook renverra automatiquement la donnée produite par le dernier nœud exécuté)
- Response Data = First Entry JSON
- Cliquez sur « Add Option » et ajoutez Response Content-Type = application/json
L’étape suivante du workflow est un nœud Action in a app > Grist dans lequel vous allez préciser le tableau qui contient les données à cartographier :
- Pour créer les identifiants (credentials) nécessaires à la connexion, renseignez la clé API disponible dans les paramètres de votre compte Grist
- Operation = Get Many rows
- vous devez renseigner le docID du document Grist contenant le tableau (disponible via Grist dans la page « Paramètres », section « API ») et le Table ID du tableau (page « Données source »)
- Activez l’interrupteur « Return All »
- Vous pouvez ajouter un filtre sur une colonne pour ne récupérer qu’une partie des données du tableau, comme vous le feriez dans Grist. Vous pourrez ainsi filtrer les données sur une colonne de validation (à créer au préalable dans le tableau Grist) et vous assurer que les données non validées ne transitent pas vers GoGoCarto.
Le nœud suivant est de type Data Transformation > Edit Fields : c’est la couche de normalisation. Grâce à lui, chaque colonne provenant de Grist sera renommée, typée, et éventuellement convertie (texte, booléen, liste, coordonnées, etc.) pour correspondre exactement à la structure attendue par GoGoCarto. Paramétrez ce nœud en fonction du modèle de données que vous voulez définir.
Le nœud final est Data Transformation > Aggregate, qui regroupe toutes les lignes transformées en un seul tableau, lequel est envoyé à GoGoCarto par le webhook :
- Aggregate = All Item Data (Into a Single List)
- Put Output in Field = Data
- Include = All Fields
Connecter GoGoCarto au n8n
- Dans la page d’administration de GoGoCarto, ouvrez « Données / Import » > « Import Dynamique »
- Dans l’onglet « Général », précisez bien " Type de la source = API JSON" ainsi que l’adresse du webhook (cf. étapes précédentes) dans « URL de l’API JSON »
- Sur ce même onglet, vérifiez la fréquence de mise à jour des données
Une fois ces réglages sauvegardés, vous n’avez plus rien à faire : GoGoCarto enverra automatiquement la requête GET via n8n pour remplir votre carte avec les données de votre Grist.
!
donc avec les moyens du bord