docs: Display Grist data in uMap

Based on work from @C-Sophie and @ybon

Also, explicit admonition icons for French instance and OSM instance.

Closes #2173

docs-users/fr/tutorials/10-embed-remote-data.md

@@ -7,6 +7,7 @@
     - Utiliser un portail *open data*
     - Créditer la source des données pour respecter la licence
 
+
 ## Procédons par étapes
 
 Jusqu’ici toutes les cartes que nous avons créées montrent des données
@@ -156,8 +157,11 @@ calque*. Les différents types de calques sont :
     cercle.
 -   **Heatmap** : les données sont représentées sous forme de *carte de
     chaleur*.
--   **Cloroplèthe** : cet affichage est adapté aux polygones, et permet
+-   **Choroplèthe** : cet affichage est adapté aux polygones, et permet
     de graduer leur couleur.
+-   **Cercles proportionnels** : cette représentation est adaptée pour
+    des valeurs quantitatives absolues (qui peuvent s’ajouter).
+    La surface des cercles est proportionnelle à la quantité.
 
 Les types *Avec cluster* et *Heatmap* sont plutôt adaptés aux calques
 contenant uniquement des points. Lorsqu’on choisit un de ces modes, un

docs-users/fr/tutorials/12-display-grist-data.md

@@ -0,0 +1,141 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - Créer un gabarit Grist compatible uMap
+    - Géocoder des adresses (:fontawesome-solid-landmark-flag: pour les agents publics seulement)
+    - Rendre un document Grist public
+    - Lier le CSV de Grist avec un calque uMap
+
+
+Un [un film tutoriel](https://tube.numerique.gouv.fr/w/kya6m1aFtgDcy2LMkgUBya?start=12s)
+a été créé pour montrer le déroulé de ce tutoriel.
+
+
+## 1. Créer un gabarit Grist compatible uMap
+
+!!! osm-instance "Pour le grand public, les associations…"
+
+    Rendez-vous sur le [site officiel de Grist](https://www.getgrist.com/) ou votre propre instance.
+
+!!! french-instance "Pour les agents publics"
+
+    Rendez-vous sur le site Grist agents publics via
+    [La Suite Numérique](https://lasuite.numerique.gouv.fr/services/grist).
+
+Créer un nouveau document vide :
+
+![Interface pour créer un nouveau document Grist.](../../static/tutoriels/grist-new-document.png)
+
+Ajouter les colonnes nécessaires, plus au moins ces trois colonnes : `Adresse`, `Latitude`, `Longitude`.
+
+![Interface d’un nouveau document Grist vide.](../../static/tutoriels/grist-empty-document.png)
+
+
+!!! warning
+
+    Attention, il faut mettre les colonnes `Latitude` et `Longitude` en type `Texte` :
+
+    ![Interface pour renseigner le type des colonnes.](../../static/tutoriels/grist-column-type-text.png)
+
+
+## 2. Géocoder des adresses (:fontawesome-solid-landmark-flag: pour les agents publics seulement)
+
+!!! french-instance "Pour les agents publics"
+
+    Cette conversion n’est accessible qu’aux agents publics, elle consiste
+    à convertir automatiquement les adresses en coordonnées géographiques
+    (latitude, longitude). Si vous avez déjà ces informations dans votre
+    document, vous pouvez passer à l’étape 3 ci-dessous.
+
+
+Il faut maintenant ajouter l’outil de géocodage développé par l’ANCT.
+Pour ça, cliquer sur « Ajouter une vue à la page » :
+
+![Interface pour créer une vue Grist.](../../static/tutoriels/grist-empty-view.png)
+
+
+Puis choisir `Custom`, sélectionner le nom de la table dans la source des données
+(ici « Table1 »), et aussi sélectionner la table dans `Select by` :
+
+![Interface pour créer une vue custom Grist.](../../static/tutoriels/grist-custom-view.png)
+
+Dans la colonne de droite, si on est sur l’instance Grist de l’ANCT,
+choisir « Geocodeur » dans la liste déroulante,
+sinon choisir `Custom URL` et ajouter l’URL suivante:
+
+<https://betagouv.github.io/grist-custom-widgets-fr-admin/geocode>
+
+Dans le panneau de droite, sélectionner les colonnes permettant de connecter
+l’outil à notre tableau :
+
+![Interface pour associer les colonnes sur une vue Grist.](../../static/tutoriels/grist-columns-view.png)
+
+La colonne `Adresse` comme source, puis bien référence les colonnes `Latitude` et `Longitude`.
+
+On peut optionnellement ajouter une colonne `Adresse normalisée` (dans le tableur)
+et la référencer ici, dans ce cas le géocodeur affichera l’adresse qu’il a trouvé.
+Ça permet un contrôle de plus.
+
+Renseigner ensuite une ou plusieurs lignes de données,
+en essayant d’avoir une adresse aussi précise que possible :
+
+![Interface pour convertir via une vue Grist.](../../static/tutoriels/grist-conversion-view.png)
+
+Puis cliquer sur « Traitement spécifique » pour ne traiter
+que la ligne sélectionnée, ou bien sur « Traitement global »
+pour traiter toutes les lignes du document.
+
+![Interface pour convertir via une vue Grist (résultat).](../../static/tutoriels/grist-conversion-view-result.png)
+
+
+## 3. Rendre un document Grist public
+
+Il faut ensuite rendre le document Grist public pour pouvoir ensuite le référencer côté uMap.
+
+Pour ça, aller dans « Gérer les utilisateurs » :
+
+![Interface pour gérer les utilisateurs dans Grist.](../../static/tutoriels/grist-user-management.png)
+
+Puis activer l’accès public :
+
+![Interface pour ouvrir les permissions dans Grist.](../../static/tutoriels/grist-permissions-management.png)
+
+
+## 4. Lier le CSV de Grist avec un calque uMap
+
+Pour copier l’URL qu’on va indiquer côté uMap, c’est ici
+(clic droit « enregistrer le lien ») :
+
+![Interface pour copier le lien vers l’export CSV dans Grist.](../../static/tutoriels/grist-download-csv.png)
+
+Le lien devrait ressembler à quelque chose comme ça :
+
+https://grist.incubateur.net/o/docs/api/docs/4McELEs6kBpQAkmzupHy9F/download/csv?viewSection=1&tableId=Table1&activeSortSpec=%5B%5D&filters=%5B%5D&linkingFilter=%7B%22filters%22%3A%7B%7D%2C%22operations%22%3A%7B%7D%7D
+
+Maintenant, créer une carte sur uMap et ajouter un calque :
+
+![Interface pour ajouter un calque dans uMap.](../../static/tutoriels/grist-umap-newlayer.png)
+
+![Interface pour ajouter un calque dans uMap avec un nom.](../../static/tutoriels/grist-umap-newlayer-name.png)
+
+Dans « Données distantes », ajouter l’URL de Grist et choisir le format `CSV` :
+
+![Interface pour ajouter un calque dans uMap avec une URL.](../../static/tutoriels/grist-umap-newlayer-url.png)
+
+Pour une meilleure expérience utilisateurs, vous pouvez choisir
+l’option `Proxy` avec un cache de la bonne durée selon la fréquence
+de mise à jour des données dans Grist :
+
+![Interface pour ajouter un calque dans uMap avec un proxy.](../../static/tutoriels/grist-umap-newlayer-proxy.png)
+
+Pour améliorer l'intégration des données, allez dans les paramètres avancés
+de la carte, puis dans les propriétés par défaut et :
+
+- ajouter `Nom` comme clé pour le libellé, le filtre et la recherche
+- ajouter `Catégorie` pour générer des filtres automatiques
+
+![Interface pour ajouter un calque avec des filtres dans uMap.](../../static/tutoriels/grist-umap-newlayer-advanced.png)
+
+Et voilà !
+
+![Interface de la carte finale dans uMap.](../../static/tutoriels/grist-umap-result.png)
+

docs-users/fr/tutorials/2-first-map.md

@@ -11,14 +11,14 @@ lieux (domicile, vacances, travail, etc.). Procédons par étapes.
 
 ### 1. Le mode édition
 
-#### Pour le grand public, les associations…
+!!! osm-instance "Pour le grand public, les associations…"
 
-Rendez-vous sur l’instance uMap d’OSM <https://umap.openstreetmap.fr/>
+    Rendez-vous sur l’instance uMap d’OSM <https://umap.openstreetmap.fr/>
 
-#### Pour les agents publics
+!!! french-instance "Pour les agents publics"
 
-Rendez-vous sur le site uMap agents publics <https://umap.incubateur.anct.gouv.fr/>
-et connectez-vous en haut à gauche. La connexion utilise MonComptePro.
+    Rendez-vous sur le site uMap agents publics <https://umap.incubateur.anct.gouv.fr/>
+    et connectez-vous en haut à gauche. La connexion utilise MonComptePro.
 
 <shot-scraper
     data-output="static/tutoriels/create-map.png"

docs-users/fr/tutorials/3-create-account.md

@@ -60,8 +60,9 @@ l’utiliser pour accéder à votre catalogue de cartes, même sans être
 connecté à votre compte : vous pouvez diffuser cette URL, les
 récipiendaires ne pourront pas modifier vos cartes.
 
-#### Pour les agents publics
-1. Se connectez à MonComptePro : <https://moncomptepro.beta.gouv.fr/>
+#### :fontawesome-solid-landmark-flag: Pour les agents publics
+
+1. Se connectez à MonComptePro : <https://moncomptepro.beta.gouv.fr/> <br>
    Toute personne qui travaille pour un service public y a accès.
 2. Créez un compte sur MonComptePro. L’opération prend quelques minutes.
 3. Sur [le site uMap pour les agents publics](https://umap.incubateur.anct.gouv.fr/fr/),
@@ -70,7 +71,7 @@ récipiendaires ne pourront pas modifier vos cartes.
 Le tableau de bord s’ouvre, il affiche l’ensemble des cartes que
 vous créez ainsi que les équipes auxquelles vous participez.
 
-!!! note "Pour les agents publics"
+!!! french-instance "Pour les agents publics"
     Associer une carte à une équipe vous permet d’afficher le nom de cette équipe au lieu du vôtre sur une carte (noms de votre commune, de votre service,…). Une équipe peut se composer d’une seule personne.
 
 ### 2. Créer une équipe

docs-users/stylesheets/extra.css

@@ -3,4 +3,30 @@
 }
 .md-typeset a {
   color: #7990be !important;
-}
+}
+
+:root {
+  --md-admonition-icon--french-instance: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M272 0l80 0c8.8 0 16 7.2 16 16l0 64c0 8.8-7.2 16-16 16l-80 0 0 32 192 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L48 192c-17.7 0-32-14.3-32-32s14.3-32 32-32l192 0 0-112c0-8.8 7.2-16 16-16l16 0zM64 224l64 0 0 192 40 0 0-192 64 0 0 192 48 0 0-192 64 0 0 192 40 0 0-192 64 0 0 196.3c.6 .3 1.2 .7 1.8 1.1l48 32c11.7 7.8 17 22.4 12.9 35.9S494.1 512 480 512L32 512c-14.1 0-26.5-9.2-30.6-22.7s1.1-28.1 12.9-35.9l48-32c.6-.4 1.2-.7 1.8-1.1L64 224z"/></svg>');
+  --md-admonition-icon--osm-instance: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.672 23.969c-.352-.089-.534-.234-1.471-1.168C.085 21.688.014 21.579.018 20.999c0-.645-.196-.414 3.368-3.986c3.6-3.608 3.415-3.451 4.064-3.449c.302 0 .378.016.62.14l.277.14l1.744-1.744l-.218-.343c-.425-.662-.825-1.629-1.006-2.429a7.66 7.66 0 0 1 1.479-6.44c2.49-3.12 6.959-3.812 10.26-1.588c1.812 1.218 2.99 3.099 3.328 5.314c.07.467.07 1.579 0 2.074a7.55 7.55 0 0 1-2.205 4.402a6.7 6.7 0 0 1-1.943 1.401c-.959.483-1.775.71-2.881.803c-1.573.131-3.32-.305-4.656-1.163l-.343-.218l-1.744 1.744l.14.28c.125.241.14.316.14.617c.003.651.156.467-3.426 4.049c-2.761 2.756-3.186 3.164-3.398 3.261c-.271.125-.69.171-.945.106zM17.485 13.95a6.43 6.43 0 0 0 4.603-3.51c1.391-2.899.455-6.306-2.227-8.108c-.638-.43-1.529-.794-2.367-.962c-.581-.117-1.809-.104-2.414.025a6.6 6.6 0 0 0-2.452 1.064c-.444.315-1.177 1.048-1.487 1.487a6.384 6.384 0 0 0 .38 7.907a6.4 6.4 0 0 0 3.901 2.136c.509.078 1.542.058 2.065-.037zm-3.738 7.376a81 81 0 0 1-2.196-.651c-.025-.028 1.207-4.396 1.257-4.449c.023-.026 4.242 1.152 4.414 1.236c.062.026-.003.288-.525 2.102a399 399 0 0 0-.635 2.236c-.025.087-.069.156-.097.156c-.028-.003-1.028-.287-2.219-.631zm2.912.524c0-.053 1.227-4.333 1.246-4.347c.047-.034 4.324-1.23 4.341-1.211c.019.019-1.199 4.337-1.23 4.36c-.02.019-4.126 1.191-4.259 1.218c-.054.011-.098 0-.098-.019zm-7.105-1.911c.846-.852 1.599-1.627 1.674-1.728c.171-.218.405-.732.472-1.015c.026-.118.053-.352.058-.522l.011-.307l.182-.051c.103-.028.193-.044.202-.034c.023.025-1.207 4.321-1.246 4.36c-.02.016-.677.213-1.464.436l-1.425.405l1.537-1.542zm8.289-3.06a1.4 1.4 0 0 1-.059-.187l-.044-.156l.156-.028c1.339-.227 2.776-.856 3.908-1.713c.16-.125.252-.171.265-.134c.054.165.272.95.265.959c-.034.034-4.48 1.282-4.492 1.261zm-15.083-1.3c-.05-.039-1.179-3.866-1.264-4.29c-.016-.084.146-.044 2.174.536c2.121.604 2.192.629 2.222.74c.028.098.011.129-.125.223c-.084.059-.769.724-1.523 1.479a64 64 0 0 1-1.39 1.367c-.016 0-.056-.025-.093-.054zm.821-4.378c-1.188-.343-2.164-.623-2.167-.626c-.016-.012 1.261-4.433 1.285-4.46c.022-.022 4.422 1.211 4.469 1.252c.009.009-.269 1.017-.618 2.239c-.576 2.02-.643 2.224-.723 2.22c-.05-.003-1.059-.285-2.247-.626zm2.959.538c.012-.031.212-.723.444-1.534l.42-1.476l.056.321c.093.556.265 1.188.464 1.741c.106.296.187.539.181.545c-.008.006-.332.101-.719.212c-.389.109-.741.21-.786.224q-.085.025-.059-.034zM4.905 6.112c-1.187-.339-2.167-.635-2.18-.654c-.04-.062-1.246-4.321-1.23-4.338c.026-.025 4.31 1.204 4.351 1.246c.047.051 1.28 4.379 1.246 4.376L4.91 6.113zm2.148-1.713l-.519-1.806l-.078-.28l1.693-.483c.934-.265 1.724-.495 1.76-.508c.034-.016-.083.14-.26.336A8.7 8.7 0 0 0 7.69 5.23a4 4 0 0 0-.132.561c0 .293-.115-.025-.505-1.39z"/></svg>');
+}
+.md-typeset .admonition.french-instance,
+.md-typeset details.french-instance {
+  border-color: rgb(0, 0, 145);
+}
+.md-typeset .french-instance > .admonition-title::before,
+.md-typeset .french-instance > summary::before {
+  background-color: rgb(0, 0, 145);
+  -webkit-mask-image: var(--md-admonition-icon--french-instance);
+          mask-image: var(--md-admonition-icon--french-instance);
+}
+
+.md-typeset .admonition.osm-instance,
+.md-typeset details.osm-instance {
+  border-color: #77cc6d;
+}
+.md-typeset .osm-instance > .admonition-title::before,
+.md-typeset .osm-instance > summary::before {
+  background-color: #77cc6d;
+  -webkit-mask-image: var(--md-admonition-icon--osm-instance);
+          mask-image: var(--md-admonition-icon--osm-instance);
+}

docs-users/tutorials/12-display-grist-data.md

@@ -0,0 +1,4 @@
+!!! example "This is an ongoing work."
+
+    [Let us know](https://github.com/umap-project/umap/issues)
+    if you are interested [to translate it from French](/fr/tutorials/12-display-grist-data/).