diff --git a/docs-users/fr/tutorials/2-first-map.md b/docs-users/fr/tutorials/2-first-map.md index 4e6480ad..a7207789 100644 --- a/docs-users/fr/tutorials/2-first-map.md +++ b/docs-users/fr/tutorials/2-first-map.md @@ -11,8 +11,14 @@ 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** suivant : +#### Pour le grand public, les associations… + +Rendez-vous sur l’instance uMap d’OSM + +#### Pour les agents publics + +Rendez-vous sur le site uMap agents publics +et connectez-vous en haut à gauche. La connexion utilise MonComptePro. , vous pouvez utiliser un compte que vous +Le logiciel umap ne gère pas directement de comptes utilisateurs : la +gestion des comptes dépend de la configuration du logiciel. + +#### Pour le grand public, les associations… + +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)). +d’infos](https://openstreetmap.fr/inscription-openstreetmap)). ![umap_header.png](../../static/tutoriels/3-jutilise-un-compte-et-cree-une-belle-carte/umap_header.png) @@ -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 -. Vous pouvez +. 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. +#### Pour les agents publics +1. Se connectez à MonComptePro : + 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`. -### 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. - -Bouton de dessin d’une ligne. - -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. +Le tableau de bord s’ouvre, il affiche l’ensemble des cartes que +vous créez ainsi que les équipes auxquelles vous participez. -## Faisons le point +### 2. Créer une équipe -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). +Une fois connecté sur l’instance uMap, +cliquer sur « Mon espace », puis « Mes équipes » : -Pour le moment voyons comment nous pouvons davantage -[personnaliser notre carte](4-customize-map.md). +![Lien vers l’onglet des équipes](../../static/tutoriels/my-teams.png) -??? info "Licence" +Puis sur « Nouvelle équipe » et renseigner les informations - 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). +![Formulaire d’édition des équipes](../../static/tutoriels/my-teams-form.png) +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. + +!!! 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. + +### 3. Partager une carte avec une équipe + +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) diff --git a/docs-users/fr/tutorials/4-customize-map.md b/docs-users/fr/tutorials/4-customize-map.md index 21124401..6c476f4d 100644 --- a/docs-users/fr/tutorials/4-customize-map.md +++ b/docs-users/fr/tutorials/4-customize-map.md @@ -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. @@ -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 diff --git a/docs-users/fr/tutorials/4-draw-items.md b/docs-users/fr/tutorials/4-draw-items.md new file mode 100644 index 00000000..64386244 --- /dev/null +++ b/docs-users/fr/tutorials/4-draw-items.md @@ -0,0 +1,158 @@ +!!! abstract "Ce que nous allons apprendre" + + - Changer la forme, la couleur et le pictogramme d’un marqueur + - Créer et modifier une ligne + - Contrôler l’affichage 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 à [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 + +### 2. 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. + +Bouton de dessin d’une ligne. + +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) + +### 3. 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](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 [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/5-multimedia-tooltips.md b/docs-users/fr/tutorials/5-multimedia-tooltips.md index 2278d4da..73f2b784 100644 --- a/docs-users/fr/tutorials/5-multimedia-tooltips.md +++ b/docs-users/fr/tutorials/5-multimedia-tooltips.md @@ -132,18 +132,6 @@ cette photo. Pour cela nous devons : #### Afficher vos photos Si vous disposez d’un serveur vous pouvez l’utiliser stocker vos photos. -Si ce n’est pas le cas vous pouvez utiliser un service comme -**[Framapic](https://framapic.org/)**, un service de stockage libre que -l’association **[Framasoft](https://framasoft.org/)** met à la -disposition de tous sans contre-partie. L’opération est très simple : - -1. stockez votre photo sur Framapic par un glisser-déposer depuis votre - explorateur de fichier vers le navigateur -2. copiez le lien d’affichage de la photo -3. collez ce lien entre **double accolades** dans la description de - l’infobulle : `{{https://framapic.org/xxx/yyy.jpg}}` - -![lienframapic.png](../../static/tutoriels/5-je-cree-des-infobulles-multimedia/lienframapic.png) #### Modifier la taille d’une image diff --git a/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/lienframapic.png b/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/lienframapic.png deleted file mode 100644 index a7b75394..00000000 Binary files a/docs-users/static/tutoriels/5-je-cree-des-infobulles-multimedia/lienframapic.png and /dev/null differ diff --git a/docs-users/static/tutoriels/moncomptepro-connexion.png b/docs-users/static/tutoriels/moncomptepro-connexion.png new file mode 100644 index 00000000..ed99d9d7 Binary files /dev/null and b/docs-users/static/tutoriels/moncomptepro-connexion.png differ diff --git a/docs-users/static/tutoriels/my-teams-form.png b/docs-users/static/tutoriels/my-teams-form.png new file mode 100644 index 00000000..1aa22c0a Binary files /dev/null and b/docs-users/static/tutoriels/my-teams-form.png differ diff --git a/docs-users/static/tutoriels/my-teams-permissions.png b/docs-users/static/tutoriels/my-teams-permissions.png new file mode 100644 index 00000000..9d104a95 Binary files /dev/null and b/docs-users/static/tutoriels/my-teams-permissions.png differ diff --git a/docs-users/static/tutoriels/my-teams.png b/docs-users/static/tutoriels/my-teams.png new file mode 100644 index 00000000..51d072d2 Binary files /dev/null and b/docs-users/static/tutoriels/my-teams.png differ diff --git a/docs-users/tutorials/4-draw-items.md b/docs-users/tutorials/4-draw-items.md new file mode 100644 index 00000000..3f762895 --- /dev/null +++ b/docs-users/tutorials/4-draw-items.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](/fr/tutorials/4-draw-items/).