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

210 lines
9.6 KiB
Markdown
Raw Normal View History

2024-05-01 15:25:17 -05:00
!!! abstract "Ce que nous allons apprendre"
- Utiliser un compte pour retrouver ses cartes
- Changer la forme, la couleur et le pictogramme dun marqueur
- Créer et modifier une ligne
- Contrôler laffichage 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 dassocier 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
daccé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 navez aucun compte sur ces outils, cest 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
dinfos](http://openstreetmap.fr/inscription-openstreetmap)).
2024-05-02 13:56:27 -05:00
![umap_header.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_header.png)
2024-05-01 15:25:17 -05:00
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 dutilisateur et le mot de passe. La page suivante vous
demande dautoriser lapplication uMap à utiliser ce compte : accordez
cet accès. Vous retrouvez alors la page daccueil de uMap, sur laquelle
le lien de connexion a laissé la place à un lien **Mes cartes** vous
permettant daccéder à lensemble des cartes créées avec ce compte.
2024-05-02 13:56:27 -05:00
![umap_connect.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_connect.png)
2024-05-01 15:25:17 -05:00
Notez lURL de la barre dadresse 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
lutiliser 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 à [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.
2024-05-02 13:56:27 -05:00
![umap_marqueur_props.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_marqueur_props.png)
2024-05-01 15:25:17 -05:00
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 :
2024-05-02 13:56:27 -05:00
![umap_camping.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_camping.png)
2024-05-01 15:25:17 -05:00
#### Modifier un marqueur
2024-05-02 13:56:27 -05:00
![umap_modifier_marqueur.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_modifier_marqueur.png)
2024-05-01 15:25:17 -05:00
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>
2024-05-01 15:25:17 -05:00
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
2024-05-01 15:25:17 -05:00
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`
2024-05-02 13:56:27 -05:00
![umap_ligne.jpg](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne.jpg)
2024-05-01 15:25:17 -05:00
#### Propriétés dune ligne
2024-05-02 13:56:27 -05:00
![umap_ligne_props.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_props.png)
2024-05-01 15:25:17 -05:00
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 :
2024-05-02 13:56:27 -05:00
![umap_ligne_tirets.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_ligne_tirets.png)
2024-05-01 15:25:17 -05:00
### 4. Ajouter des étiquettes
2024-05-02 13:56:27 -05:00
![etiquettes.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/etiquettes.png)
2024-05-01 15:25:17 -05:00
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
2024-05-02 13:38:15 -05:00
tutoriel [Le cas des polygones](8-polygons.md).
2024-05-01 15:25:17 -05:00
2024-05-02 13:56:27 -05:00
Pour le moment voyons comment nous pouvons davantage
[personnaliser notre carte](4-customize-map.md).
2024-05-01 15:25:17 -05:00
??? 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).