Skip to content

Commit

Permalink
Merge pull request #2156 from umap-project/docs-users
Browse files Browse the repository at this point in the history
docs: improvements by @C-Sophie
  • Loading branch information
davidbgk authored Sep 20, 2024
2 parents e252058 + 3148bb4 commit 86a8bba
Show file tree
Hide file tree
Showing 11 changed files with 242 additions and 176 deletions.
30 changes: 26 additions & 4 deletions docs-users/fr/tutorials/2-first-map.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,14 @@ 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** suivant :
#### Pour le grand public, les associations…

Rendez-vous sur l’instance uMap d’OSM <https://umap.openstreetmap.fr/>

#### 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.

<shot-scraper
data-output="static/tutoriels/create-map.png"
Expand Down Expand Up @@ -83,6 +89,8 @@ reviendrons.
Maintenant, sauvegardez la carte avec le bouton **Enregistrer** : un
texte est affiché en haut de la carte, comme celui ci-dessous :

#### Pour le grand public sur l'instance OSM

<shot-scraper
data-output="static/tutoriels/create-map-alert.png"
data-url="https://umap.openstreetmap.fr/fr/map/new/"
Expand All @@ -103,6 +111,14 @@ 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.

#### Pour les agents publics sur l’instance qui leur est dédiée

S’ils ne se sont pas connectés avant de créer leur carte, le message est différent :

![Le lien vers la connexion MonComptePro](../../static/tutoriels/moncomptepro-connexion.png)

Il n’est pas possible d’enregistrer les modifications apportées à une carte anonyme sur cette instance.

### 3. Ajouter un marqueur

Commencez par déplacer et zoomer la carte pour visualiser l’endroit
Expand All @@ -125,7 +141,7 @@ Le curseur prend la forme d’un signe
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)
![Un marqueur uMap.](../../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 :
Expand Down Expand Up @@ -180,13 +196,19 @@ actuels**.

### 5. Enregistrer la carte

Toute modification de la carte doit être sauvegardée sur le serveur uMap
Toute modification de la carte doit être sauvegardée
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.

!!! note
L’enregistrement se fait sur les serveurs d’OpenStreetMap dans le cas
d’une utilisation d’uMap OSM ou ceux de l’ANCT si uMap pour
les agents publics est utilisé.


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
Expand Down
202 changes: 47 additions & 155 deletions docs-users/fr/tutorials/3-create-account.md
Original file line number Diff line number Diff line change
@@ -1,41 +1,44 @@
!!! 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
- utiliser un compte pour retrouver ses cartes
- créer une équipe
- partager une carte avec une équipe

## 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.
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 un compte et une équipe.

Nota : il n’y a pas de carte anonyme sur
[l’instance uMap pour les agents publics](https://umap.incubateur.anct.gouv.fr/fr/).

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 :
**uMap** permet d’associer ses cartes à un compte. Cela présente plusieurs
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
- on peut gérer ses cartes en équipe et afficher le nom de l’équipe comme auteur
- pour les agents publics sur uMap ANCT : une fois connecté avec MonComptePro, on peut utiliser d’autres outils en association avec uMap, comme Grist.

Le logiciel umap ne gère pas directement de comptes utilisateurs : la
gestion des comptes dépend de la configuration du logiciel.

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
#### Pour le grand public, les associations…

Sur <https://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)).
d’infos](https://openstreetmap.fr/inscription-openstreetmap)).

![umap_header.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_header.png)

Expand All @@ -52,158 +55,47 @@ permettant d’accéder à l’ensemble des cartes créées avec ce compte.

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
<https://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.

<shot-scraper
data-output="static/tutoriels/draw-polyline.png"
data-url="https://umap.openstreetmap.fr/fr/map/new/"
data-alt="Bouton de dessin d’une ligne."
data-width="46"
data-height="47"
data-selector=".leaflet-toolbar-icon.umap-draw-polyline"
data-padding="5"
>Bouton de dessin d’une ligne.</shot-scraper>

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 :
#### Pour les agents publics
1. Se connectez à MonComptePro : <https://moncomptepro.beta.gouv.fr/>
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/),
cliquez sur `Me Connecter`.

![umap_ligne_tirets.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_tirets.png)
Le tableau de bord s’ouvre, il affiche l’ensemble des cartes que
vous créez ainsi que les équipes auxquelles vous participez.

### 4. Ajouter des étiquettes

![etiquettes.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/etiquettes.png)
### 2. Créer une équipe

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 :
Une fois connecté sur l’instance uMap,
cliquer sur « Mon espace », puis « Mes équipes » :

- **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.
![Lien vers l’onglet des équipes](../../static/tutoriels/my-teams.png)

Puis sur « Nouvelle équipe » et renseigner les informations

## Faisons le point
![Formulaire d’édition des équipes](../../static/tutoriels/my-teams-form.png)

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](8-polygons.md).
Lorsqu’un nouvel utilisateur est associé à une équipe,
il voit l’équipe s’afficher sur son tableau de bord,
il accède à toutes les cartes qui sont partagées et il peut les modifier.

Pour le moment voyons comment nous pouvons davantage
[personnaliser notre carte](4-customize-map.md).
!!! note
Tous les membres d’une équipe partagent les mêmes droits d’édition sur une carte
qui est associée à une équipe. Une équipe peut être supprimée,
ou son nom modifié en un simple clic.

??? info "Licence"
### 3. Partager une carte avec une équipe

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).
Une fois l’équipe créée, il reste encore à donner les droits de modification
d’une carte à ses membres. Pour ce faire : ouvrez la carte,
puis sur cliquez sur « Editer » et cliquez en haut de page
à droite du titre sur « Visibilité : Définir qui peut voir et modifier la carte ».

![Panneau de permissions pour la sélection des équipes](../../static/tutoriels/my-teams-permissions.png)
12 changes: 7 additions & 5 deletions docs-users/fr/tutorials/4-customize-map.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,8 @@ carte peut vous aider à en choisir un plutôt qu’un autre, par exemple :

!!! 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
Tous les fonds de carte utilisés par uMap, à
l’exception des images aériennes de l’IGN, sont réalisés à partir des
données OpenStreetMap. Ils sont produits par des associations, des
entreprises ou des bénévoles qui les mettent gracieusement à
disposition.
Expand Down Expand Up @@ -170,9 +170,11 @@ 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.
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.
Vous allez découvrir comment importer des données en « un clic »
issues de l’open data et gagner du temps par rapport au dessin de toutes les formes.

Une fois ces opérations maîtrisées, les tutoriels de niveau
intermédiaire vous apprendront à structurer vos cartes avec des calques
Expand Down
Loading

0 comments on commit 86a8bba

Please sign in to comment.