umap/docs-users/fr/tutorials/3-create-account.md
2024-05-08 22:31:17 -04:00

209 lines
9.6 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

!!! 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)).
![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 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.
![umap_connect.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_connect.png)
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.
![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
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).