diff --git a/docs-users/fr/index.md b/docs-users/fr/index.md index 246a539d..9dc47fa1 100644 --- a/docs-users/fr/index.md +++ b/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). diff --git a/docs-users/fr/tutorials/1-browsing-a-map.md b/docs-users/fr/tutorials/1-browsing-a-map.md new file mode 100644 index 00000000..73021df3 --- /dev/null +++ b/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). diff --git a/docs-users/fr/tutorials/2-first-map.md b/docs-users/fr/tutorials/2-first-map.md new file mode 100644 index 00000000..47205002 --- /dev/null +++ b/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 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). + diff --git a/docs-users/fr/tutorials/3-create-account.md b/docs-users/fr/tutorials/3-create-account.md new file mode 100644 index 00000000..dbade393 --- /dev/null +++ b/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 +, 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 +. 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). + diff --git a/docs-users/fr/tutorials/4-customize-map.md b/docs-users/fr/tutorials/4-customize-map.md new file mode 100644 index 00000000..f111ef11 --- /dev/null +++ b/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). + diff --git a/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/anatomie_carte_umap_2021.jpg b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/anatomie_carte_umap_2021.jpg new file mode 100644 index 00000000..c6401b3b Binary files /dev/null and b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/anatomie_carte_umap_2021.jpg differ diff --git a/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_calques.png b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_calques.png new file mode 100644 index 00000000..95213a1b Binary files /dev/null and b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_calques.png differ diff --git a/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_donnees.jpg b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_donnees.jpg new file mode 100644 index 00000000..1b793900 Binary files /dev/null and b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_donnees.jpg differ diff --git a/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_edit_osm.png b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_edit_osm.png new file mode 100644 index 00000000..4813499b Binary files /dev/null and b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_edit_osm.png differ diff --git a/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_full_screen.png b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_full_screen.png new file mode 100644 index 00000000..c8b1103a Binary files /dev/null and b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_full_screen.png differ diff --git a/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_geoloc.png b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_geoloc.png new file mode 100644 index 00000000..574630e1 Binary files /dev/null and b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_geoloc.png differ diff --git a/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_layers.png b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_layers.png new file mode 100644 index 00000000..398a60f4 Binary files /dev/null and b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_layers.png differ diff --git a/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_measure.png b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_measure.png new file mode 100644 index 00000000..23628d55 Binary files /dev/null and b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_measure.png differ diff --git a/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_plus.png b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_plus.png new file mode 100644 index 00000000..20d689c5 Binary files /dev/null and b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_plus.png differ diff --git a/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_search.png b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_search.png new file mode 100644 index 00000000..8f410b35 Binary files /dev/null and b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_search.png differ diff --git a/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_share.png b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_share.png new file mode 100644 index 00000000..855ead13 Binary files /dev/null and b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_share.png differ diff --git a/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_sélecteur_calques.png b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_sélecteur_calques.png new file mode 100644 index 00000000..329328b1 Binary files /dev/null and b/docs-users/static/tutoriels/1-je-consulte-une-carte-umap/umap_sélecteur_calques.png differ diff --git a/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_create_anonymous.png b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_create_anonymous.png new file mode 100644 index 00000000..71ffb51f Binary files /dev/null and b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_create_anonymous.png differ diff --git a/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edit_extent.png b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edit_extent.png new file mode 100644 index 00000000..0c55c821 Binary files /dev/null and b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edit_extent.png differ diff --git a/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edit_marker.png b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edit_marker.png new file mode 100644 index 00000000..516997dd Binary files /dev/null and b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edit_marker.png differ diff --git a/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edit_props.png b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edit_props.png new file mode 100644 index 00000000..9aab3128 Binary files /dev/null and b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edit_props.png differ diff --git a/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edition.jpg b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edition.jpg new file mode 100644 index 00000000..c08fea4e Binary files /dev/null and b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_edition.jpg differ diff --git a/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_marqueur.jpg b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_marqueur.jpg new file mode 100644 index 00000000..addafec2 Binary files /dev/null and b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_marqueur.jpg differ diff --git a/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_set_name.png b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_set_name.png new file mode 100644 index 00000000..e536870e Binary files /dev/null and b/docs-users/static/tutoriels/2-je-cree-ma-premiere-carte-umap/umap_set_name.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/etiquettes.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/etiquettes.png new file mode 100644 index 00000000..e31cb5dc Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/etiquettes.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_camping.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_camping.png new file mode 100644 index 00000000..22ba2f35 Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_camping.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_connect.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_connect.png new file mode 100644 index 00000000..39219644 Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_connect.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_edit_line.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_edit_line.png new file mode 100644 index 00000000..5713c919 Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_edit_line.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_header.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_header.png new file mode 100644 index 00000000..afc77129 Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_header.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne.jpg b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne.jpg new file mode 100644 index 00000000..0d61405d Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne.jpg differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_props.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_props.png new file mode 100644 index 00000000..301f54c7 Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_props.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_tirets.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_tirets.png new file mode 100644 index 00000000..aac7465b Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_tirets.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_marqueur_props.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_marqueur_props.png new file mode 100644 index 00000000..eaeefe1f Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_marqueur_props.png differ diff --git a/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_modifier_marqueur.png b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_modifier_marqueur.png new file mode 100644 index 00000000..11bfed1a Binary files /dev/null and b/docs-users/static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_modifier_marqueur.png differ diff --git a/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_edit.png b/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_edit.png new file mode 100644 index 00000000..8f70fade Binary files /dev/null and b/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_edit.png differ diff --git a/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_edit_background.png b/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_edit_background.png new file mode 100644 index 00000000..8a9cd841 Binary files /dev/null and b/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_edit_background.png differ diff --git a/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_edit_props.png b/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_edit_props.png new file mode 100644 index 00000000..9aab3128 Binary files /dev/null and b/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_edit_props.png differ diff --git a/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_plus.png b/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_plus.png new file mode 100644 index 00000000..20d689c5 Binary files /dev/null and b/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_plus.png differ diff --git a/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_properties_bottom.jpg b/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_properties_bottom.jpg new file mode 100644 index 00000000..3945299b Binary files /dev/null and b/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_properties_bottom.jpg differ diff --git a/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_share.png b/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_share.png new file mode 100644 index 00000000..855ead13 Binary files /dev/null and b/docs-users/static/tutoriels/4-je-modifie-et-personnalise-ma-carte/umap_share.png differ diff --git a/docs-users/tutorials/1-browsing-a-map.md b/docs-users/tutorials/1-browsing-a-map.md new file mode 100644 index 00000000..49b9c5d2 --- /dev/null +++ b/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. diff --git a/docs-users/tutorials/2-first-map.md b/docs-users/tutorials/2-first-map.md new file mode 100644 index 00000000..49b9c5d2 --- /dev/null +++ b/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. diff --git a/docs-users/tutorials/3-create-account.md b/docs-users/tutorials/3-create-account.md new file mode 100644 index 00000000..49b9c5d2 --- /dev/null +++ b/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. diff --git a/docs-users/tutorials/4-customize-map.md b/docs-users/tutorials/4-customize-map.md new file mode 100644 index 00000000..49b9c5d2 --- /dev/null +++ b/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.