Improving documentation

docs-users/fr/index.md

@@ -2,6 +2,21 @@
 
 uMap vous offre la possibilité de concevoir rapidement des cartes personnalisées avec des fonds OpenStreetMap (OSM) et de les intégrer facilement à votre site.
 
-- 🤓 Consulter les [tutoriels en français sur le site de umap-project.org](https://umap-project.org/tutoriels/).
+- 🤓 Consulter les tutoriels sur la gauche (l’ordre est significatif).
 - 🤔 Explorer les [les questions/réponses de la FAQ](support/faq.md).
 - 🤕 Parcourir [la liste des erreurs possibles](support/errors.md).
+
+---
+
+!!! info "Si vous êtes un·e développeur·euse"
+
+    Vous allez probablement davantage trouver votre [bonheur par ici](https://docs.umap-project.org).
+
+
+??? bug "Si vous rencontrez un problème non documenté"
+
+    Vous pouvez :
+
+    - consulter le [forum dédié sur OSM France](https://forum.openstreetmap.fr/c/utiliser/umap/29) ;
+    - vérifier si le souci n’a pas déjà été remonté dans les [issues en cours](https://github.com/umap-project/umap/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) ;
+    - déclarer [une nouvelle issue](https://github.com/umap-project/umap/issues/new/choose) (en anglais).

docs-users/fr/tutorials/1-browsing-a-map.md

@@ -0,0 +1,151 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    -   Manipuler une carte uMap
+    -   Partager une carte uMap
+    -   Connaître les principales fonctionnalités de uMap
+
+
+## Procédons par étapes
+
+### 1. Manipuler la carte
+
+Vous avez reçu par mail un lien vers une carte uMap. Voici les
+principaux éléments de la carte, et les opérations disponibles pour la
+manipuler. La carte uMap représentée ci-dessous est disponible
+[ici](http://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381).
+
+![anatomie_carte_umap_2021.jpg](../../static/tutoriels/1-je-consulte-une-carte-umap/anatomie_carte_umap_2021.jpg)
+
+------------------------------------------------------------------------
+
+À droite de la carte et selon le choix de son auteur peut être affiché
+un des deux panneaux suivants :
+
+-   **À propos** : le titre de la carte, une description éventuelle, et
+    la liste des calques
+-   **Visualiser les données** : l’ensemble des éléments de la carte,
+    répartis par calques (voir plus bas)
+
+Le panneau À propos peut être affiché en cliquant sur le mot "À propos",
+toujours visible en bas à droite de la carte.
+
+Comme pour la plupart des cartes interactives vous pouvez :
+
+-   déplacer la carte par un glisser-déposer
+-   effectuer zooms avant et arrière avec les boutons + et -, ou avec la
+    molette de la souris
+-   sélectionner un élément de la carte par un clic de la souris :
+    apparaît alors une fenêtre *popup* affichant une description de
+    l’élément. Celle-ci peut inclure du texte, une image, un lien vers
+    un site Web. Dans notre exemple la description de chaque cinéma
+    contient une image qui est un lien sur le site Web du cinéma.
+
+**Remarque** : les boutons en haut à gauche de la carte, ainsi que la
+barre de légende, peuvent ne pas être disponibles si l’auteur de la
+carte a choisi de les cacher.
+
+Voyons maintenant quelques fonctionnalités propres à uMap.
+
+### 2. Le sélecteur de calques
+
+Les éléments d’une carte umap peuvent être répartis dans plusieurs
+calques, ou couches. Cela permet de structurer une carte, pour qu’elle
+soit plus claire et plus facile à maintenir. L’utilisateur peut choisir
+d’afficher ou cacher chaque calque individuellement.
+
+![umap_calques.png](../../static/tutoriels/1-je-consulte-une-carte-umap/umap_calques.png)
+
+Le sélecteur de calques est
+l’icône visible en haut à gauche de la carte sous les boutons de zoom.
+Lorsque vous positionnez la souris sur ce bouton, la liste des calques
+apparaît, vous pouvez alors afficher ou cacher chaque calque, ou encore
+centrer la carte sur le contenu d’un calque.
+
+![umap_sélecteur_calques.png](../../static/tutoriels/1-je-consulte-une-carte-umap/umap_sélecteur_calques.png)
+
+Dans cet exemple le calque "Stations Bicloo" est caché : cliquer sur
+l’oeil de ce calque permet de l’afficher.
+La liste des calques, avec éventuellement un descriptif de chaque
+calque, est aussi visible dans la légende de la carte.
+
+### 3. Le bouton Plus
+
+![umap_plus.png](../../static/tutoriels/1-je-consulte-une-carte-umap/umap_plus.png)
+
+Sous le sélecteur de carte est
+visible un bouton portant le texte "Plus". Un clic sur ce bouton fait
+apparaître une série de boutons.
+
+-   ![umap_search.png](../../static/tutoriels/1-je-consulte-une-carte-umap/umap_search.png) permet de chercher une
+    localité et de centrer la carte dessus : saisissez le nom d’une
+    commune et tapez sur `Entrée`.
+-   ![umap_full_screen.png](../../static/tutoriels/1-je-consulte-une-carte-umap/umap_full_screen.png) place le
+    navigateur en mode plein écran, que l’on peut quitter avec le même
+    bouton ou avec la touche `Échap` du clavier.
+-   ![umap_share.png](../../static/tutoriels/1-je-consulte-une-carte-umap/umap_share.png) permet de partager la carte
+    ou d’en exporter les données. Un panneau à droite de la carte est
+    affiché, il est expliqué ci-dessous.
+-   ![umap_geoloc.png](../../static/tutoriels/1-je-consulte-une-carte-umap/umap_geoloc.png) permet de vous géolocaliser
+    (1), c’est-à-dire centrer la carte sur votre position
+    actuelle.
+    { .annotate }
+
+    1.  La géolocalisation exige de demander l’autorisation de l’utilisateur, votre navigateur Web peut donc vous demander d’accepter ou activer la géolocalisation
+
+-   ![umap_layers.png](../../static/tutoriels/1-je-consulte-une-carte-umap/umap_layers.png) affiche à droite plusieurs
+    fonds de carte : cliquer sur l’un d’eux change le fond de la carte.
+-   ![umap_edit_osm.png](../../static/tutoriels/1-je-consulte-une-carte-umap/umap_edit_osm.png) est utile pour
+    améliorer la carte OpenStreetMap - ce qui sort de l’objet de ce
+    tutoriel.
+-   ![umap_measure.png](../../static/tutoriels/1-je-consulte-une-carte-umap/umap_measure.png) est un outil de mesure.
+    Activer cet outil a deux effets : d’une part il affiche la longueur
+    des éléments linéaires de la carte et l’aire des éléments
+    surfaciques ; d’autre part il vous permet de tracer sur la carte une
+    ligne dont la longueur est affichée. Cliquez à nouveau sur le bouton
+    pour désactiver cet outil.
+
+
+#### Partager la carte
+
+Le panneau de partage de la carte offre trois possibilités. Votre choix
+dépend de la manière dont vous souhaitez partager la carte :
+
+-   **URL courte** permet de copier une URL abrégée - équivalente à
+    l’URL de la carte - que vous pouvez par exemple envoyer dans un
+    mail.
+-   **Embarquer la carte en iframe** permet d’inclure la carte dans une
+    page Web : il suffit de copier le code HTML et de l’insérer dans
+    celui de votre page Web. Cette possibilité est explorée en détails
+    dans le tutoriel
+    [Je publie ma carte et en contrôle l’accès](/tutoriels/7-je-publie-ma-carte-et-en-controle-lacces/).
+-   **Télécharger les données** permet d’obtenir les données visibles
+    sur la carte, dans différents formats. Cela peut vous permettre
+    d’utiliser ces données avec un autre outil.
+
+
+### 4. Visualiser les données
+
+![umap_donnees.jpg](../../static/tutoriels/1-je-consulte-une-carte-umap/umap_donnees.jpg)
+
+La liste des éléments de la carte peut être affichée avec un clic sur
+**Visualiser les données**, accessible depuis le sélecteur de calques,
+la barre de légende, ou encore en haut du panneau Légende.
+
+Le panneau alors visible à droite montre l’ensemble des éléments de la
+carte, organisés par calques. La loupe à gauche de chaque élément permet
+d’afficher sur la carte la popup décrivant cet élément. Le texte de
+saisie au-dessus de la liste permet de rechercher un élément, en ne
+montrant que ceux dont le nom contient le texte saisi.
+
+------------------------------------------------------------------------
+
+## Faisons le point
+
+Ce premier tutoriel nous a permis de découvrir les principales
+fonctionnalités d’une carte uMap. Nous allons maintenant
+[apprendre à créer une telle carte](2-first-map.md).
+
+
+??? info "Licence"
+
+    Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:1_-_je_consulte_une_carte_umap) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).

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

@@ -0,0 +1,157 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    -   distinguer le mode édition du mode consultation
+    -   identifier les étapes nécessaires pour créer une carte
+    -   produire une première carte et la diffuser !
+
+## Procédons par étapes
+
+L’objet de notre première carte est simple : positionner un ou plusieurs
+lieux (domicile, vacances, travail, etc.). Procédons par étapes.
+
+### 1. Le mode édition
+
+Rendez-vous sur le site <http://umap.openstreetmap.fr/> et cliquez sur
+le bouton **Créer une carte**. Apparaît alors sur votre navigateur une
+carte qui se présente ainsi :
+
+![umap_edition.jpg](../static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edition.jpg)
+
+Nous retrouvons à gauche les boutons disponibles lors de la
+[consultation d’une carte](1-browsing-a-map.md).
+Plusieurs éléments visibles au-dessus et à droite de la carte sont
+visibles uniquement lorsque l’on crée ou modifie une carte, c’est-à-dire
+dans le *mode édition* :
+
+-   le **nom de la carte** en haut à gauche
+-   les boutons **Annuler** et **Enregistrer** en haut à droite
+-   à droite une série de 3 boutons permettant d’ajouter des éléments à
+    la carte : marqueurs, lignes et polygones
+-   en-dessous une série de 6 boutons permettant de configurer la carte
+
+### 2. Nommer la carte
+
+![umap_set_name.png](../static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_set_name.png)
+
+![umap_edit_props.png](../static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edit_props.png)
+
+Une carte doit porter
+un nom qui renseigne sur ce que représente la carte. Pour définir le nom
+de la carte, cliquez sur le bouton **Éditer les paramètres**.
+
+Un panneau apparaît sur la droite de la carte, il contient en haut un
+champ de saisie pour le **nom** de la carte, qui contient le texte
+`Carte sans nom` : placez le curseur dans ce champ, supprimez le texte
+existant et saisissez le nom de votre carte, par exemple `Mon domicile`.
+
+Notez que le nom en haut à gauche de la carte est immédiatement modifié.
+Vous pouvez également saisir un texte plus long dans le champ
+**description**, qui apparaîtra dans le panneau de légende - nous y
+reviendrons.
+
+Maintenant sauvegardez la carte avec le bouton **Enregistrer** : un
+texte en anglais est affiché en haut de la carte, comme celui
+ci-dessous.
+
+![umap_create_anonymous.png](../static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_create_anonymous.png)
+
+Ce texte explique que vous venez de créer une carte **anonyme** et vous
+donne un lien (une URL) pour pouvoir modifier la carte. En effet la
+carte que vous avez créée n’est associée à aucun compte, et **uMap**
+considère que seules les personnes ayant ce *lien secret* peuvent la
+modifier. Vous devez donc conserver ce lien si vous souhaitez pouvoir
+modifier la carte. Nous verrons dans [le prochain tutoriel](3-create-account.md) comment
+créer son catalogue de cartes en utilisant un compte, il n’est alors pas
+nécessaire de conserver de lien secret.
+
+### 3. Ajouter un marqueur
+
+Commencez par déplacer et zoomer la carte pour visualiser l’endroit
+précis de votre domicile, lieu de vacances ou de travail.
+
+![umap_edit_marker.png](../static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edit_marker.png)
+
+Cliquez ensuite sur
+le bouton **Ajouter un marqueur**. Le curseur prend la forme d’un signe
+`+` : déplacez le sur le lieu que vous voulez *marquer* et cliquez avec
+le bouton gauche de la souris : un *marqueur bleu* et carré est créé à
+cet endroit et un panneau apparaît à droite.
+
+![umap_marqueur.jpg](../static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_marqueur.jpg)
+
+Ce panneau vous permet
+d’associer un nom et une description au marqueur :
+
+-   le nom sera affiché au survol du marqueur par la souris
+-   le nom et la description seront visibles dans une fenêtre dite
+    *popup* qui apparaîtra lors d’un clic sur le marqueur.
+
+Nous verrons plus loin l’utilité des calques, et comment modifier les
+propriétés du marqueur : forme, couleur, pictogramme, etc.
+
+Répétez l’opération pour ajouter les marqueurs que vous jugez utiles à
+votre carte.
+
+### 4. Définir l’emprise de la carte
+
+Il est important de définir l’emprise initiale de la carte, c’est-à-dire
+la partie du planisphère qui sera affichée lors de la consultation de la
+carte.
+
+Cette emprise doit inclure votre marqueur et permettre de situer la
+carte. Il convient de trouver un compromis entre un zoom trop éloigné et
+un zoom trop rapproché. Le bon compromis dépend essentiellement du
+contenu de la carte : la majorité des marqueurs, lignes et polygones
+doivent être visibles et utiliser au mieux l’étendue de la carte.
+
+Vous pouvez aussi considérer le public de la carte : une carte expédiée
+à votre voisin peut être très zoomée, une carte envoyée un correspondant
+étranger doit permettre de reconnaître le pays où se trouve votre carte.
+
+
+Pour définir
+l’emprise, déplacez et zoomez la carte afin d’afficher l’emprise
+souhaitée puis cliquez sur le bouton **Enregistrer le zoom et le centre
+actuels**.
+
+![umap_edit_extent.png](../static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edit_extent.png)
+
+!!! note
+    uMap enregistre en réalité le centre et le niveau de
+    zoom. Selon la taille de la fenêtre où est affichée la carte, la partie
+    visible pourra varier. Il est utile de prévoir une marge autour du
+    contenu de la carte.
+
+### 5. Enregistrer la carte
+
+Toute modification de la carte doit être sauvegardée sur le serveur uMap
+en cliquant sur le bouton **Enregistrer** en haut à droite. Cette
+opération enregistre toutes les modifications depuis la dernière
+sauvegarde : vous pouvez donc réaliser plusieurs modifications à la
+suite puis les enregistrer. A l’inverse le bouton **Annuler** permet de
+supprimer toutes les modifications depuis la dernière sauvegarde.
+
+Après avoir enregistré les modifications, le bouton Annuler est remplacé
+par **Désactiver l’édition**. Cela vous permet de quitter le mode
+édition pour voir la carte en mode consultation. Vous pouvez alors
+*tester* votre carte : cliquez sur le marqueur pour afficher la popup et
+vérifier son nom et sa description.
+
+**Félicitations !** Vous avez créé votre première carte uMap. Vous
+pouvez la diffuser à votre entourage en copiant son URL dans la barre
+d’adresse du navigateur, ou en copiant son **URL courte** disponible
+dans le menu **Partager** vu dans le tutoriel [Je consulte une carte
+uMap](1-browsing-a-map.md).
+
+## Faisons le point
+
+Votre première carte est créée, en quelques étapes. L’opération est
+assez simple, mais le résultat est somme toute assez sommaire. Le
+[prochain tutoriel](3-create-account.md) va nous
+permettre de créer une jolie carte.
+
+
+??? info "Licence"
+
+    Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:2_-_je_cree_ma_premiere_carte_umap) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
+

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

@@ -0,0 +1,202 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - Utiliser un compte pour retrouver ses cartes
+    - Changer la forme, la couleur et le pictogramme d’un marqueur
+    - Créer et modifier une ligne
+    - Contrôler l’affichage des étiquettes
+
+## Procédons par étapes
+
+Nous avons appris dans
+[le tutoriel précédent](2-first-map.md) comment créer une
+carte anonyme contenant un marqueur. Nous allons à présent créer une
+carte plus complète : la carte de nos vacances au [Camping de la plage
+Goulien](http://www.openstreetmap.org/way/119055693) sur la Presqu’île
+de Crozon en Bretagne.
+
+Au lieu de créer une carte anonyme, nous allons utiliser un compte pour
+créer cette carte.
+
+### 1. Utiliser un compte
+
+**uMap** permet d’associer ses cartes à un compte. Cela présente deux
+avantages importants par rapport à la création de cartes anonymes :
+
+-   les cartes créées avec un compte constituent un catalogue permettant
+    d’accéder facilement à ses cartes
+-   on peut modifier chaque carte du catalogue sans avoir besoin de
+    conserver un lien d’édition
+
+Le logiciel umap ne gère pas directement de comptes utilisateurs : la
+gestion des comptes dépend de la configuration du logiciel. Sur
+<http://umap.openstreetmap.fr>, vous pouvez utiliser un compte que vous
+avez ouvert sur un site Web au choix : OpenStreetMap, Github,
+ou Bitbucket. Si vous n’avez aucun compte sur ces outils, c’est le
+moment de vous inscrire sur le site www.openstreetmap.org : cliquez
+**Créer un compte** dans le coin supérieur droit et suivez les
+instructions - une adresse mail vous sera demandée ([plus
+d’infos](http://openstreetmap.fr/inscription-openstreetmap)).
+
+![umap_header.png](../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_header.png)
+
+Cliquez sur **Connexion /
+Créer un compte** puis sur le pictogramme correspondant au compte que
+vous souhaitez utiliser. Apparaît alors la page de connexion du site :
+saisissez le nom d’utilisateur et le mot de passe. La page suivante vous
+demande d’autoriser l’application uMap à utiliser ce compte : accordez
+cet accès. Vous retrouvez alors la page d’accueil de uMap, sur laquelle
+le lien de connexion a laissé la place à un lien **Mes cartes** vous
+permettant d’accéder à l’ensemble des cartes créées avec ce compte.
+
+![umap_connect.png](../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_connect.png)
+
+Notez l’URL de la barre d’adresse quand vous consultez votre catalogue
+de cartes : celle-ci contient le nom de votre compte - par exemple
+<http://umap.openstreetmap.fr/fr/user/cartocite/>. Vous pouvez
+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.
+
+Toutes les cartes que vous créez en étant connecté à votre compte sont
+ajoutées à votre catalogue.
+
+### 2. Créer un joli marqueur
+
+Commençons par créer une carte : donnons-lui un nom, définissons une
+emprise et ajoutons un marqueur à [l’emplacement du
+camping](http://www.openstreetmap.org/?mlat=48.2387&mlon=-4.5434#map=16/48.2387/-4.5434).
+Nous avons vu dans [le tutoriel précédent](2-first-map.md) comment effectuer ces opérations.
+
+![umap_marqueur_props.png](../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_marqueur_props.png)
+
+Ce gros marqueur bleu n’est pas très explicite pour figurer un camping.
+Remédions à cela. Dans le panneau latéral visible lorsqu’un marqueur est
+sélectionné, le menu **Propriétés de la forme** permet de modifier
+l’apparence du marqueur :
+
+-   **Couleur** : cliquer sur `définir` permet de choisir une couleur.
+    Notez que vous pouvez définir une couleur par [son nom
+    CSS](http://www.w3schools.com/cssref/css_colors.asp) ou par son code
+    héxadécimal, que vous pouvez choisir par exemple avec ce [sélecteur
+    de couleurs](http://htmlcolorcodes.com/fr/selecteur-de-couleur/).
+-   **Forme de l’icône** : le choix `Par défaut` correspond au marqueur
+    actuel, les autres choix sont Cercle, Goutte et Épingle.
+-   **Image de l’icône** : cliquer sur `définir` pour choisir parmi une
+    centaine de pictogrammes. Notez que le picto n’est affiché que pour
+    les formes d’icônes `Par défaut` et `Goutte`.
+
+Voici le marqueur obtenu avec les propriétés ci-contre :
+
+![umap_camping.png](../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_camping.png)
+
+#### Modifier un marqueur
+
+![umap_modifier_marqueur.png](../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_modifier_marqueur.png)
+
+Pour modifier un marqueur de la carte, plusieurs possibilités s’offrent à vous :
+
+-   un clic sur le marqueur vous permet soit d’afficher le panneau
+    d’édition (stylo), soit de supprimer le marqueur (corbeille)
+-   **shift-clic** est un raccourci qui affiche directement le panneau
+    d’édition
+-   un glisser-déposer vous permet de déplacer le marqueur sur la carte
+
+### 3. Créer une ligne
+
+Le premier jour de vacances nous allons en kayak de mer jusqu’à la
+Pointe de Dinan à l’ouest de la plage de Goulien. Traçons l’itinéraire
+suivi.
+
+![umap_edit_line.png](../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_edit_line.png)
+
+Le bouton **Dessiner une ligne** permet de tracer, point par point,
+une ligne constiutée de
+plusieurs segments. Cliquez à nouveau sur le dernier point tracé pour
+terminer la ligne : apparaît alors à droite un panneau permettant de
+donner un nom et une description à la ligne, comme pour les marqueurs.
+
+#### Modifier une ligne
+
+A tout moment vous pouvez sélectionner une ligne en double-cliquant
+dessus. Vous pouvez alors éditer ses propriétés dans le panneau latéral,
+ou modifier son tracé sur la carte :
+
+-   **supprimer un point** de la ligne, matérialisé par un carré blanc,
+    en cliquant dessus
+-   **déplacer un point** par un glisser-déposer
+-   **insérer un point** en cliquant sur un carré gris se trouvant au
+    milieu de chaque segment
+-   **allonger la ligne** avec un Ctrl-Clic lorsque le curseur est placé
+    sur le premier ou dernier point
+-   **couper la ligne** en deux : Clic droit sur un point puis choisir
+    l’option `Scinder la ligne`
+
+![umap_ligne.jpg](../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne.jpg)
+
+#### Propriétés d’une ligne
+
+![umap_ligne_props.png](../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_props.png)
+
+Les propriétés d’une
+ligne permettent de définir sa couleur et d’autres paramètres
+définissant son *style* :
+
+-   l’**opacité** va de transparent à gauche à totalement opaque à
+    droite. Plus le trait est épais plus il peut être transparent.
+-   l’**épaisseur** est définie en pixels, sa valeur par défaut est 3 :
+    glisser le curseur vers la droite pour un trait plus épais (qui sera
+    plus facile à sélectionner).
+
+Les **propriétés avancées** permettent de :
+
+-   **simplifier** le tracé permet de réduire le nombre de points pour
+    l’adapter au niveau de zoom. Il est en général inutile de simplifier
+    un tracé réalisé *à la main*.
+-   définir un **traitillé**, par une série de chiffres séparés par des
+    virgules : longueur (en pixels) visible, longueur invisible,
+    longueur visible, etc. L’épaisseur du trait doit être prise en
+    compte : plus les traits sont épais plus les intervalles doivent
+    être grands.
+
+Voici le style de trait obtenu avec les propriétés ci-contre :
+
+![umap_ligne_tirets.png](../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_tirets.png)
+
+### 4. Ajouter des étiquettes
+
+![etiquettes.png](../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/etiquettes.png)
+
+Pour aider l’identification des
+différents éléments de notre carte, nous pouvons leur associer une
+étiquette. L’onglet **Options d’interaction** permet de contrôler
+l’affichage d’une étiquette associée à chaque élément :
+
+-   **Afficher une étiquette** active son affichage, elle est alors
+    placée automatiquement
+-   **Direction de l’étiquette** vous permet de fixer la position, à
+    droite ou à gauche de l’élément, ou encore au-dessus ou en-dessous
+-   **Afficher seulement au survol** de la souris est une option
+    intéressante si la carte est dense : afficher toutes les étiquettes
+    surchagerait la carte
+-   **Étiquette cliquable** permet d’afficher l’infobulle correspondante
+    si l’utilisateur clique sur l’étiquette, et non seulement en cas de
+    clic sur la *géométrie* de l’élément.
+
+------------------------------------------------------------------------
+
+## Faisons le point
+
+Notre deuxième carte est déjà plus intéressante que la première, et nous
+savons la retrouver facilement. Nous avons vu comment créer, *styliser*
+et modifier points et lignes. Nous n’avons pas traité ici des polygones,
+qui représentent des surfaces. Certaines fonctionnalités propres aux
+polygones méritent d’être détaillées, ce que nous ferons dans le
+tutoriel [Le cas des polygones](/tutoriels/8-le-cas-des-polygones/).
+
+Pour le moment voyons comment nous pouvons davantage [personnaliser
+notre carte](4-customize-map.md).
+
+??? info "Licence"
+
+    Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:3_-_j_utilise_un_compte_et_cree_une_belle_carte) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
+

docs-users/fr/tutorials/4-customize-map.md

@@ -0,0 +1,161 @@
+!!! abstract "Ce que nous allons apprendre"
+
+    - Gérer son catalogue de cartes
+    - Choisir un fond de carte
+    - Sélectionner les options d’interface
+
+## Procédons par étapes
+
+### 1. Retrouver une carte
+
+Vous souhaitez modifier une carte pour l’améliorer ou la mettre à jour.
+Si vous avez redémarré votre navigateur et à fortiori votre ordinateur,
+la première chose à faire est de retrouver la carte ! Si vous avez créé
+cette carte avec votre compte comme nous l’avons vu dans le tutoriel
+[J’utilise un compte et crée une belle carte](3-create-account.md)), afficher
+une de vos cartes se fait en trois opérations simples :
+
+1.  connectez-vous à votre compte umap
+2.  affichez votre catalogue de cartes
+3.  cliquez sur le nom de la carte, affiché **sous l’aperçu** de la
+    carte
+
+![umap_edit.png](../static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_edit.png)
+
+La carte s’affiche alors en mode
+consultation. Cliquez sur le crayon en haut à droite de la carte pour
+passer en mode édition : vous pouvez dès lors modifier la carte.
+N’oubliez pas de sauvegarder la carte une fois les modifications
+terminées.
+
+!!! note
+
+    Il peut être fastidieux de passer du mode édition au
+    mode consultation et vice-versa de façon répétée. Une astuce consiste à
+    utiliser pour la même carte deux onglets ou deux navigateurs, l’un en
+    mode édition l’autre en mode consultation. Vous devez tout de même
+    **enregistrer** la carte dans l’onglet en mode édition avant de
+    l’**actualiser** (par exemple avec la touche F5) dans l’onglet en mode
+    consultation.
+
+Vous pouvez retourner à votre catalogue de cartes à tout moment en
+cliquant sur **Accueil** tout en bas à droite de la carte.
+
+### 2. Changer le fond de carte
+
+Nous avons vu dans le tutoriel [Je consulte une carte uMap](1-browsing-a-map.md)
+que plusieurs fonds de carte
+sont disponibles dans uMap. Lorsque vous éditez une carte vous pouvez
+choisir le fond de carte qui sera utilisé à l’affichage de la carte.
+
+![umap_edit_background.png](../static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_edit_background.png)Cliquez sur
+le pictogramme `Changer le fond de carte` : un panneau à droite montre
+une vingtaine de fonds de cartes. Il vous suffit de cliquer sur l’un
+d’eux : faites votre choix et n’oubliez pas d’enregistrer la
+modification.
+
+Le choix du fond de carte est une affaire de goût. Le contexte de la
+carte peut vous aider à en choisir un plutôt qu’un autre, par exemple :
+
+-   les fonds **Outdoors**, **Landscape** ou **OpenTopoMap** montrent le
+    relief : judicieux pour une carte de randonnée
+-   **OpenCycleMap** montre les grands itinéraires cyclistes, comme les
+    EuroVélo (Côte Atlantique, Loire à Vélo...)
+-   **Positron**, **Toner** et **OSM-Monochrome** sont en noir et blanc
+    : vos marqueurs, lignes et polygones seront plus visibles
+-   le style **HOTOSM**, créé par le [groupe
+    humanitaire](http://wiki.openstreetmap.org/wiki/FR:Humanitarian_OSM_Team)
+    d’OpenStreetMap, permet d’aller jusqu’à un niveau de zoom élevé
+    (niveau 20) : intéressant si l’étendue de votre carte couvre un
+    quartier ou votre jardin
+
+!!! note
+
+    Tous les fonds de carte utilisés par umap, à
+    l’exception des images aériennes de l’IGN, sont réalisées à partir des
+    données OpenStreetMap. Ils sont produits par des associations, des
+    entreprises ou des bénévoles qui les mettent gracieusement à
+    disposition.
+
+    Remarquez le texte affiché en bas à droite de la carte : il crédite les
+    auteurs du fond de carte, par exemple
+    `Map tiles by Stamen Design - Map Data © OpenStreetMap contributors`.
+
+
+### 3. Choisir les options d’interface
+
+Vous pouvez configurer les éléments de la carte mis à disposition des
+utilisateurs qui consulteront votre carte. Vous pouvez par exemple
+ajouter une mini-carte de situation ou une barre de légende, ou encore
+décider quels boutons seront affichés.
+
+![umap_edit_props.png](../static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_edit_props.png)
+
+Pour cela, ouvrez dans
+le menu **Éditer les paramètres** l’onglet **Options d’interfaces**.
+Vous pouvez activer ou désactiver une dizaine d’options dont voici la
+signification.
+
+Apparaît alors un long tableau de bord qui vous permet, pour chacun des
+boutons sur la gauche de la carte, de contrôler leur visibilité :
+
+-   **toujours** indique que le bouton est toujours visible pour
+    l’utilisateur
+-   **jamais** signifie que le bouton ne sera pas disponible
+-   **caché** signifie que le bouton n’est accessible qu’après un clic
+    sur le bouton ![umap_plus.png](../static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_plus.png). Les boutons
+    cachés ne seront bien sûr accessibles que si l’option
+    `Voulez-vous afficher le bouton "Plus" ?` (plus bas sur le tableau
+    de bord) est activée.
+
+La partie basse du tableau de bord ne concerne pas ces boutons mais
+d’autres éléments venant *habiller* la carte :
+
+![umap_properties_bottom.jpg](../static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_properties_bottom.jpg)
+
+Quelques remarques :
+
+-   si vous cachez les boutons de zoom **et** désactivez le zoom avec la
+    molette de la souris, les utilisateurs ne pourront ni zoomer ni
+    dézoomer … sauf à découvrir le menu accessible avec un clic droit
+    sur la carte.
+-   les boutons de navigation en bas des popups permettent de faire
+    défiler les éléments de la carte
+
+![umap_share.png](../static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_share.png)
+
+Notez que ces
+options - et quelques autres - sont également disponibles en **Options
+d’export de l’iframe** du menu **Exporter et partager carte**, où elles
+permettent de contrôler les mêmes options d’interface lorsque la carte
+est intégrée dans une page Web.
+
+### 4. Copier ou supprimer une carte
+
+Tout en bas des **Propriétés de la cartes**, l’onglet **Options
+avancées** propose deux opérations peu utilisées mais qu’il est bon de
+connaître :
+
+-   **Supprimer** supprime la carte du serveur umap, ainsi que les
+    données qui y sont associées !
+-   **Cloner cette carte** effectue une copie de la carte et de ses
+    données. La nouvelle carte est ajoutée à votre catalogue.
+
+Dans les deux cas un message vous demande de confirmer l’opération.
+
+## Faisons le point
+
+Ce tutoriel nous mène à la fin du niveau débutant. Vous savez créer,
+modifier et personnaliser une carte. Vous savez styliser vos marqueurs,
+lignes et polygones. Enfin vous savez gérer votre catalogue de cartes.
+
+Une fois ces opérations maîtrisées, les tutoriels de niveau
+intermédiaire vous apprendront à structurer vos cartes avec des calques
+et enrichir le contenu de vos popups. Vous découvrirez également comment
+publier une carte sur un site Web, et définir qui peut la voir et la
+modifier.
+
+??? info "Licence"
+
+    Travail initié par Antoine Riche sur [Carto’Cité](https://wiki.cartocite.fr/doku.php?id=umap:4_-_je_modifie_et_personnalise_ma_carte) sous licence [CC-BY-SA 4](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
+

docs-users/tutorials/1-browsing-a-map.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.

docs-users/tutorials/2-first-map.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.

docs-users/tutorials/3-create-account.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.

docs-users/tutorials/4-customize-map.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.