docs: improvements by @C-Sophie from #2153

This commit is contained in:
David Larlet 2024-09-20 15:12:26 -04:00
parent 58c6022aa7
commit 8b5cf27c77
No known key found for this signature in database
GPG key ID: 3E2953A359E7E7BD
6 changed files with 213 additions and 159 deletions

View file

@ -1,41 +1,44 @@
!!! abstract "Ce que nous allons apprendre" !!! abstract "Ce que nous allons apprendre"
- Utiliser un compte pour retrouver ses cartes - utiliser un compte pour retrouver ses cartes
- Changer la forme, la couleur et le pictogramme dun marqueur - créer une équipe
- Créer et modifier une ligne - partager une carte avec une équipe
- Contrôler laffichage des étiquettes
## Procédons par étapes ## Procédons par étapes
Nous avons appris dans Nous avons appris dans [le tutoriel précédent](2-first-map.md) comment créer une
[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.
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 Nota : il ny a pas de carte anonyme sur
Goulien](http://www.openstreetmap.org/way/119055693) sur la Presquîle [linstance uMap pour les agents publics](https://umap.incubateur.anct.gouv.fr/fr/).
de Crozon en Bretagne.
Au lieu de créer une carte anonyme, nous allons utiliser un compte pour Au lieu de créer une carte anonyme, nous allons utiliser un compte pour
créer cette carte. créer cette carte.
### 1. Utiliser un compte ### 1. Utiliser un compte
**uMap** permet dassocier ses cartes à un compte. Cela présente deux **uMap** permet dassocier ses cartes à un compte. Cela présente plusieurs
avantages importants par rapport à la création de cartes anonymes : avantages importants par rapport à la création de cartes anonymes :
- les cartes créées avec un compte constituent un catalogue permettant - les cartes créées avec un compte constituent un catalogue permettant
daccéder facilement à ses cartes daccéder facilement à ses cartes
- on peut modifier chaque carte du catalogue sans avoir besoin de - on peut modifier chaque carte du catalogue sans avoir besoin de
conserver un lien dédition 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 dautres outils en association avec uMap, comme Grist.
Le logiciel umap ne gère pas directement de comptes utilisateurs : la Le logiciel umap ne gère pas directement de comptes utilisateurs : la
gestion des comptes dépend de la configuration du logiciel. Sur gestion des comptes dépend de la configuration du logiciel.
<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, avez ouvert sur un site Web au choix : OpenStreetMap, Github,
ou Bitbucket. Si vous navez aucun compte sur ces outils, cest le ou Bitbucket. Si vous navez aucun compte sur ces outils, cest le
moment de vous inscrire sur le site www.openstreetmap.org : cliquez moment de vous inscrire sur le site www.openstreetmap.org : cliquez
**Créer un compte** dans le coin supérieur droit et suivez les **Créer un compte** dans le coin supérieur droit et suivez les
instructions - une adresse mail vous sera demandée ([plus instructions - une adresse mail vous sera demandée ([plus
dinfos](http://openstreetmap.fr/inscription-openstreetmap)). dinfos](https://openstreetmap.fr/inscription-openstreetmap)).
![umap_header.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_header.png) ![umap_header.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_header.png)
@ -52,158 +55,47 @@ permettant daccéder à lensemble des cartes créées avec ce compte.
Notez lURL de la barre dadresse quand vous consultez votre catalogue Notez lURL de la barre dadresse quand vous consultez votre catalogue
de cartes : celle-ci contient le nom de votre compte - par exemple 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
lutiliser pour accéder à votre catalogue de cartes, même sans être lutiliser pour accéder à votre catalogue de cartes, même sans être
connecté à votre compte : vous pouvez diffuser cette URL, les connecté à votre compte : vous pouvez diffuser cette URL, les
récipiendaires ne pourront pas modifier vos cartes. récipiendaires ne pourront pas modifier vos cartes.
Toutes les cartes que vous créez en étant connecté à votre compte sont #### Pour les agents publics
ajoutées à votre catalogue. 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. Lopération prend quelques minutes.
3. Sur [le site uMap pour les agents publics](https://umap.incubateur.anct.gouv.fr/fr/),
cliquez sur `Me Connecter`.
### 2. Créer un joli marqueur Le tableau de bord souvre, il affiche lensemble des cartes que
vous créez ainsi que les équipes auxquelles vous participez.
Commençons par créer une carte : donnons-lui un nom, définissons une
emprise et ajoutons un marqueur à [lemplacement 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 nest pas très explicite pour figurer un camping.
Remédions à cela. Dans le panneau latéral visible lorsquun marqueur est
sélectionné, le menu **Propriétés de la forme** permet de modifier
lapparence 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 licône** : le choix `Par défaut` correspond au marqueur
actuel, les autres choix sont Cercle, Goutte et Épingle.
- **Image de licône** : cliquer sur `définir` pour choisir parmi une
centaine de pictogrammes. Notez que le picto nest affiché que pour
les formes dicô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 soffrent à vous :
- un clic sur le marqueur vous permet soit dafficher 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 à louest de la plage de Goulien. Traçons litiné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 dune ligne."
data-width="46"
data-height="47"
data-selector=".leaflet-toolbar-icon.umap-draw-polyline"
data-padding="5"
>Bouton de dessin dune 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
loption `Scinder la ligne`
![umap_ligne.jpg](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne.jpg)
#### Propriétés dune ligne
![umap_ligne_props.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_props.png)
Les propriétés dune
ligne permettent de définir sa couleur et dautres 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
ladapter 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 lidentification des
différents éléments de notre carte, nous pouvons leur associer une
étiquette. Longlet **Options dinteraction** permet de contrôler
laffichage dune é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 dafficher linfobulle correspondante
si lutilisateur clique sur létiquette, et non seulement en cas de
clic sur la *géométrie* de lélément.
## Faisons le point ### 2. Créer une équipe
Notre deuxième carte est déjà plus intéressante que la première, et nous Une fois connecté sur linstance uMap,
savons la retrouver facilement. Nous avons vu comment créer, *styliser* cliquer sur « Mon espace », puis « Mes équipes » :
et modifier points et lignes. Nous navons 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).
Pour le moment voyons comment nous pouvons davantage ![Lien vers longlet des équipes](../../static/tutoriels/my-teams.png)
[personnaliser notre carte](4-customize-map.md).
??? info "Licence" Puis sur « Nouvelle équipe » et renseigner les informations
Travail initié par Antoine Riche sur [CartoCité](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). ![Formulaire dédition des équipes](../../static/tutoriels/my-teams-form.png)
Lorsquun nouvel utilisateur est associé à une équipe,
il voit léquipe safficher sur son tableau de bord,
il accède à toutes les cartes qui sont partagées et il peut les modifier.
!!! note
Tous les membres dune é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.
### 3. Partager une carte avec une équipe
Une fois léquipe créée, il reste encore à donner les droits de modification
dune 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)

View file

@ -0,0 +1,158 @@
!!! abstract "Ce que nous allons apprendre"
- Changer la forme, la couleur et le pictogramme dun marqueur
- Créer et modifier une ligne
- Contrôler laffichage des étiquettes
Voici comment réaliser une carte contenant de jolis marqueurs et des lignes
avec pour exemple la carte de nos vacances au
[Camping de la plage Goulien](https://www.openstreetmap.org/way/119055693)
sur la Presquîle de Crozon en Bretagne.
### 1. Créer un joli marqueur
Commençons par créer une carte : donnons-lui un nom, définissons une
emprise et ajoutons un marqueur à [lemplacement 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 nest pas très explicite pour figurer un camping.
Remédions à cela. Dans le panneau latéral visible lorsquun marqueur est
sélectionné, le menu **Propriétés de la forme** permet de modifier
lapparence 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 licône** : le choix `Par défaut` correspond au marqueur
actuel, les autres choix sont Cercle, Goutte et Épingle.
- **Image de licône** : cliquer sur `définir` pour choisir parmi une
centaine de pictogrammes. Notez que le picto nest affiché que pour
les formes dicô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 soffrent à vous :
- un clic sur le marqueur vous permet soit dafficher 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
### 2. Créer une ligne
Le premier jour de vacances nous allons en kayak de mer jusquà la
Pointe de Dinan à louest de la plage de Goulien. Traçons litiné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 dune ligne."
data-width="46"
data-height="47"
data-selector=".leaflet-toolbar-icon.umap-draw-polyline"
data-padding="5"
>Bouton de dessin dune 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
loption `Scinder la ligne`
![umap_ligne.jpg](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne.jpg)
#### Propriétés dune ligne
![umap_ligne_props.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_props.png)
Les propriétés dune
ligne permettent de définir sa couleur et dautres 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
ladapter 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)
### 3. Ajouter des étiquettes
![etiquettes.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/etiquettes.png)
Pour aider lidentification des
différents éléments de notre carte, nous pouvons leur associer une
étiquette. Longlet **Options dinteraction** permet de contrôler
laffichage dune é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 dafficher linfobulle correspondante
si lutilisateur 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 navons 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).
Pour le moment voyons comment nous pouvons davantage
[personnaliser notre carte](4-customize-map.md).
??? info "Licence"
Travail initié par Antoine Riche sur [CartoCité](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).

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

View file

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