Commit ac6bceee authored by JosephK's avatar JosephK
Browse files

[umap] tutos carto cite 1 à 6

parent 0350dabd
......@@ -9,6 +9,13 @@
<p><b>Kanboard</b></p>
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="umap/" class="btn btn-lg btn-block btn-default">
<p><i class="fa fa-2x fa-map"></p>
<p><b class="violet">Frama</b><b class="vert">carte</b></p>
<p><b>uMap</b></p>
</a>
</div>
<div class="col-md-3 col-sm-6">
<a href="framadate/" class="btn btn-lg btn-block btn-default">
<p><i class="fa fa-2x fa-calendar-check-o"></p>
......
......@@ -62,6 +62,27 @@
* [Paramètres du lien](kanboard/link-labels.md)
* [Taux de change](kanboard/currency-rate.md)
* [Framacarte / uMap](umap/README.md)
### Niveau débutant
- [1 - Je consulte une carte umap](umap/1-consulter.md)
- [2 - Je crée ma première carte umap](umap/2-premiere-carte.md)
- [3 - J'utilise un compte et crée une belle carte](umap/3-utiliser-un-compte.md)
- [4 - Je modifie et personnalise ma carte](umap/4-personnaliser.md)
### Niveau intermédiaire
- [5 - Je crée des infobulles multimédia](umap/5-infobulles-multimedia.md)
- [6 - Je structure ma carte avec des calques](umap/6-calques.md)
- [7 - Je publie ma carte et en contrôle l'accès](umap/7-publication-et-droit-d-acces.md)
- [8 - Le cas des polygones](umap/8-polygones.md)
### Niveau avancé
- [9 - Je crée une carte à partir d'un tableur](umap/9-a-partir-d-un-tableur.md)
- [11 - Je valorise les données OpenStreetMap avec uMap](umap/11-valoriser-OpenStreetMap.md)
* [Framadate](framadate/README.md)
* [Prise en main](framadate/prise-en-main.md)
......
# Je consulte une carte uMap
## Ce que nous allons apprendre
* Manipuler une carte uMap
* Partager une carte uMap
* Connaître les principales fonctionnalités de uMap
## Procédons par étapes
### 1. Manipuler la carte
Vous avez reçu par mail un lien vers une carte umap. Voici les principaux éléments de la carte, et les opérations disponibles pour la manipuler. La carte umap représentée ci-dessous est disponible [ici](http://umap.openstreetmap.fr/fr/map/festival-des-3-continents_26381).
![Composants d'une carte umap](images/anatomie_carte_umap.jpg)
----
À droite de la carte et selon le choix de son auteur peut être affiché un des deux panneaux suivants :
* **Légende** : le titre de la carte, une description éventuelle, et la liste des calques
* **Visualiser les données** : l'ensemble des éléments de la carte, répartis par calques (voir plus bas)
Le panneau Légende peut être affiché en cliquant sur le mot "Légende", toujours visible en bas à droite de la carte.
Comme pour la plupart des cartes interactives vous pouvez :
* déplacer la carte par un glisser-déposer
* effectuer zooms avant et arrière avec les boutons + et -, ou avec la molette de la souris
* sélectionner un élément de la carte par un clic de la souris : apparaît alors une fenêtre *popup* affichant une description de l'élément. Celle-ci peut inclure du texte, une image, un lien vers un site Web. Dans notre exemple la description de chaque cinéma contient une image qui est un lien sur le site Web du cinéma.
**Remarque** : les boutons en haut à gauche de la carte, ainsi que la barre de légende, peuvent ne pas être disponibles si l'auteur de la carte a choisi de les cacher.
Voyons maintenant quelques fonctionnalités propres à umap.
### 2. Le sélecteur de calques
Les éléments d'une carte umap peuvent être répartis dans plusieurs calques, ou couches. Cela permet de structurer une carte, pour qu'elle soit plus claire et plus facile à maintenir. L'utilisateur peut choisir d'afficher ou cacher chaque calque individuellement.
![Le sélecteur de calques](images/umap_calques.png) Le sélecteur de calques est l'icône visible en haut à gauche de la carte sous les boutons de zoom. Lorsque vous positionnez la souris sur ce bouton, la liste des calques apparaît, vous pouvez alors afficher ou cacher chaque calque, ou encore centrer la carte sur le contenu d'un calque.
![](images/umap_sélecteur_calques.png)
Dans cet exemple le calque "Stations Bicloo" est caché : cliquer sur l'oeil de ce calque permet de l'afficher.
La liste des calques, avec éventuellement un descriptif de chaque calque, est aussi visible dans la légende de la carte.
### 3. Le bouton Plus
![Plus d'outils](images/umap_plus.png)Sous le sélecteur de carte est visible un bouton portant le texte "Plus". Un clic sur ce bouton fait apparaître une série de boutons.
* ![Zoom sur une localité](images/umap_search.png) permet de chercher une localité et de centrer la carte dessus : saisissez le nom d'une commune et tapez sur ''Entrée''.
* ![Voir en plein écran](images/umap_full_screen.png) place le navigateur en mode plein écran, que l'on peut quitter avec le même bouton ou avec la touche ''Échap'' du clavier.
* ![Exporter et partager la carte](images/umap_share.png) permet de partager la carte ou d'en exporter les données. Un panneau à droite de la carte est affiché, il est expliqué ci-dessous.
* ![Centrer la carte sur votre position](images/umap_geoloc.png) permet de vous géolocaliser((La géolocalisation exige de demander l'autorisation de l'utilisateur, votre navigateur Web peut donc vous demander d'accepter ou activer la géolocalisation)), c'est-à-dire centrer la carte sur votre position actuelle.
* ![Changer le fond de carte](images/umap_layers.png) affiche à droite plusieurs fonds de carte : cliquer sur l'un d'eux change le fond de la carte.
* ![Ouvrir cette carte dans un éditeur OpenStreetMap pour améliorer les données](images/umap_edit_osm.png) est utile pour améliorer la carte OpenStreetMap - ce qui sort de l'objet de ce tutoriel.
* ![Mesurer les distances](images/umap_measure.png) est un outil de mesure. Activer cet outil a deux effets : d'une part il affiche la longueur des éléments linéaires de la carte et l'aire des éléments surfaciques ; d'autre part il vous permet de tracer sur la carte une ligne dont la longueur est affichée. Cliquez à nouveau sur le bouton pour désactiver cet outil.
#### Partager la carte
Le panneau de partage de la carte offre trois possibilités. Votre choix dépend de la manière dont vous souhaitez partager la carte :
* **URL courte** permet de copier une URL abrégée - équivalente à l'URL de la carte - que vous pouvez par exemple envoyer dans un mail.
* **Embarquer la carte en iframe** permet d'inclure la carte dans une page Web : il suffit de copier le code HTML et de l'insérer dans celui de votre page Web. Cette possibilité est explorée en détails dans le tutoriel [Je publie ma carte et en contrôle l'accès](7-publication-et-droits-d-acces.html).
* **Télécharger les données** permet d'obtenir les données visibles sur la carte, dans différents formats. Cela peut vous permettre d'utiliser ces données avec un autre outil.
![](images/umap_donnees.jpg)
### 4. Visualiser les données
La liste des éléments de la carte peut être affichée avec un clic sur **Visualiser les données**, accessible depuis le sélecteur de calques, la barre de légende, ou encore en haut du panneau Légende.
Le panneau alors visible à droite montre l'ensemble des éléments de la carte, organisés par calques. La loupe à gauche de chaque élément permet d'afficher sur la carte la popup décrivant cet élément. Le texte de saisie au-dessus de la liste permet de rechercher un élément, en ne montrant que ceux dont le nom contient le texte saisi.
----
## Faisons le point
Ce premier tutoriel nous a permis de découvrir les principales fonctionnalités d'une carte uMap. Nous allons maintenant [apprendre à créer une telle carte](2-premiere-carte.html).
# Je crée ma première carte uMap
## Ce que nous allons apprendre
* distinguer le mode édition du mode consultation
* identifier les étapes nécessaires pour créer une carte
* produire une première carte et la diffuser !
## Procédons par étapes
L'objet de notre première carte est simple : positionner un ou plusieurs 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**. Apparaît alors sur votre navigateur une carte qui se présente ainsi :
![](images/umap_edition.jpg)
Nous retrouvons à gauche les boutons disponibles lors de la [consultation d'une carte](1-consulter.html).
Plusieurs éléments visibles au-dessus et à droite de la carte sont visibles uniquement lorsque l'on crée ou modifie une carte, c'est-à-dire dans le *mode édition* :
* le **nom de la carte** en haut à gauche
* les boutons **Annuler** et **Enregistrer** en haut à droite
* à droite une série de 3 boutons permettant d'ajouter des éléments à la carte : marqueurs, lignes et polygones
* en-dessous une série de 6 boutons permettant de configurer la carte
### 2. Nommer la carte
![](images/umap_set_name.png)
![](images/umap_edit_props.png) Une carte doit porter un nom qui renseigne sur ce que représente la carte. Pour définir le nom de la carte, cliquez sur le bouton **Éditer les paramètres**.
Un panneau apparaît sur la droite de la carte, il contient en haut un champ de saisie pour le **nom** de la carte, qui contient le texte ''Carte sans nom'' : placez le curseur dans ce champ, supprimez le texte existant et saisissez le nom de votre carte, par exemple ''Mon domicile''.
Notez que le nom en haut à gauche de la carte est immédiatement modifié. Vous pouvez également saisir un texte plus long dans le champ **description**, qui apparaîtra dans le panneau de légende - nous y reviendrons.
Maintenant sauvegardez la carte avec le bouton **Enregistrer** : un texte en anglais est affiché en haut de la carte, comme celui ci-dessous.
![](images/umap_create_anonymous.png)
Ce texte explique que vous venez de créer une carte **anonyme** et vous donne un lien (une URL) pour pouvoir modifier la carte. En effet la carte que vous avez créée n'est associée à aucun compte, et **uMap** considère que seules les personnes ayant ce *lien secret* peuvent la modifier. Vous devez donc conserver ce lien si vous souhaitez pouvoir modifier la carte. Nous verrons dans [le prochain tutoriel](3-utiliser-un-compte.html) comment créer son catalogue de cartes en utilisant un compte, il n'est alors pas nécessaire de conserver de lien secret.
### 3. Ajouter un marqueur
Commencez par déplacer et zoomer la carte pour visualiser l'endroit précis de votre domicile, lieu de vacances ou de travail.
![](images/umap_edit_marker.png) Cliquez ensuite sur le bouton **Ajouter un marqueur**. Le curseur prend la forme d'un signe ''+'' : déplacez le sur le lieu que vous voulez *marquer* et cliquez avec le bouton gauche de la souris : un *marqueur bleu* et carré est créé à cet endroit et un panneau apparaît à droite.
![](images/umap_marqueur.jpg)
Ce panneau vous permet d'associer un nom et une description au marqueur :
* le nom sera affiché au survol du marqueur par la souris
* le nom et la description seront visibles dans une fenêtre dite *popup* qui apparaîtra lors d'un clic sur le marqueur.
Nous verrons plus loin l'utilité des calques, et comment modifier les propriétés du marqueur : forme, couleur, pictogramme, etc.
Répétez l'opération pour ajouter les marqueurs que vous jugez utiles à votre carte.
### 4. Définir l'emprise de la carte
Il est important de définir l'emprise initiale de la carte, c'est-à-dire la partie du planisphère qui sera affichée lors de la consultation de la carte.
Cette emprise doit inclure votre marqueur et permettre de situer la carte. Il convient de trouver un compromis entre un zoom trop éloigné et un zoom trop rapproché. Le bon compromis dépend essentiellement du contenu de la carte : la majorité des marqueurs, lignes et polygones doivent être visibles et utiliser au mieux l'étendue de la carte.
Vous pouvez aussi considérer le public de la carte : une carte expédiée à votre voisin peut être très zoomée, une carte envoyée un correspondant étranger doit permettre de reconnaître le pays où se trouve votre carte.
![](images/umap_edit_extent.png)Pour définir l'emprise, déplacez et zoomez la carte afin d'afficher l'emprise souhaitée puis cliquez sur le bouton **Enregistrer le zoom et le centre actuels**.
<p class="alert alert-info">
uMap enregistre en réalité le centre et le niveau de zoom. Selon la taille de la fenêtre où est affichée la carte, la partie visible pourra varier. Il est utile de prévoir une marge autour du contenu de la carte.
</p>
### 5. Enregistrer la carte
Toute modification de la carte doit être sauvegardée sur le serveur uMap 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.
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 *tester* votre carte : cliquez sur le marqueur pour afficher la popup et vérifier son nom et sa description.
**Félicitations !** Vous avez créé votre première carte uMap. Vous pouvez la diffuser à votre entourage en copiant son URL dans la barre d'adresse du navigateur, ou en copiant son **URL courte** disponible dans le menu **Partager** vu dans le tutoriel [Je consulte une carte uMap](1-consulter.html).
## Faisons le point
Votre première carte est créée, en quelques étapes. L'opération est assez simple, mais le résultat est somme toute assez sommaire. Le [prochain tutoriel](3-utilise-un-compte.html) va nous permettre de créer une jolie carte.
# J'utilise un compte et crée une belle carte
## 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
## Procédons par étapes
Nous avons appris dans [le tutoriel précédent](2-premiere-carte.html) 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 d'associer 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 d'accé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, Twitter, 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)).
![](images/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 d'utilisateur et le mot de passe. La page suivante vous demande d'autoriser l'application uMap à utiliser ce compte : accordez cet accès. Vous retrouvez alors la page d'accueil de uMap, sur laquelle le lien de connexion a laissé la place à un lien **Mes cartes** vous permettant d'accéder à l'ensemble des cartes créées avec ce compte.
![](images/umap_connect.png)
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 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-premiere-carte.html) comment effectuer ces opérations.
![](images/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 :
![](images/umap_camping.png)
#### Modifier un marqueur
![](images/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.
![](images/umap_edit_line.png)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''
![](images/umap_ligne.jpg)
#### Propriétés d'une ligne
![](images/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 :
![](images/umap_ligne_tirets.png)
### 4. Ajouter des étiquettes
![](images/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-polygones).
Pour le moment voyons comment nous pouvons davantage [personnaliser notre carte](4-personnaliser.html).
# Je modifie et personnalise ma carte
## Ce que nous allons apprendre
* Gérer son catalogue de cartes
* Choisir un fond de carte
* Sélectionner les options d'interface
## Procédons par étapes
### 1. Retrouver une carte
Vous souhaitez modifier une carte pour l'améliorer ou la mettre à jour. Si vous avez redémarré votre navigateur et à fortiori votre ordinateur, la première chose à faire est de retrouver la carte ! Si vous avez créé cette carte avec votre compte comme nous l'avons vu dans le tutoriel [J'utilise un compte et crée une belle carte](3-utiliser-un-compte.html), afficher une de vos cartes se fait en trois opérations simples :
1. connectez-vous à votre compte umap
2. affichez votre catalogue de cartes
3. cliquez sur le nom de la carte, affiché **sous l'aperçu** de la carte
![](images/umap_edit.png)La carte s'affiche alors en mode consultation. Cliquez sur le crayon en haut à droite de la carte pour passer en mode édition : vous pouvez dès lors modifier la carte. N'oubliez pas de sauvegarder la carte une fois les modifications terminées.
<p class="alert alert-info">
Il peut être fastidieux de passer du mode édition au mode consultation et vice-versa de façon répétée. Une astuce consiste à utiliser pour la même carte deux onglets ou deux navigateurs, l'un en mode édition l'autre en mode consultation. Vous devez tout de même **enregistrer** la carte dans l'onglet en mode édition avant de l'**actualiser** (par exemple avec la touche F5) dans l'onglet en mode consultation.
</p>
Vous pouvez retourner à votre catalogue de cartes à tout moment en cliquant sur **Accueil** tout en bas à droite de la carte.
### 2. Changer le fond de carte
Nous avons vu dans le tutoriel [Je consulte une carte uMap](1-consulter.html) que plusieurs fonds de carte sont disponibles dans uMap. Lorsque vous éditez une carte vous pouvez choisir le fond de carte qui sera utilisé à l'affichage de la carte.
![](images/umap_edit_background.png) Cliquez sur le pictogramme ''Changer le fond de carte'' : un panneau à droite montre une vingtaine de fonds de cartes. Il vous suffit de cliquer sur l'un d'eux : faites votre choix et n'oubliez pas d'enregistrer la modification.
Le choix du fond de carte est une affaire de goût. Le contexte de la carte peut vous aider à en choisir un plutôt qu'un autre, par exemple :
* les fonds **Outdoors**, **Landscape** ou **OpenTopoMap** montrent le relief : judicieux pour une carte de randonnée
* **OpenCycleMap** montre les grands itinéraires cyclistes, comme les EuroVélo (Côte Atlantique, Loire à Vélo...)
* **Positron**, **Toner** et **OSM-Monochrome** sont en noir et blanc : vos marqueurs, lignes et polygones seront plus visibles
* le style **HOTOSM**, créé par le [groupe humanitaire](http://wiki.openstreetmap.org/wiki/FR:Humanitarian_OSM_Team) d'OpenStreetMap, permet d'aller jusqu'à un niveau de zoom élevé (niveau 20) : intéressant si l'étendue de votre carte couvre un quartier ou votre jardin
<div class="alert alert-info">
<p>Tous les fonds de carte utilisés par umap, à l'exception des images aériennes de l'IGN, sont réalisées à partir des données OpenStreetMap. Ils sont produits par des associations, des entreprises ou des bénévoles qui les mettent gracieusement à disposition.</p>
<p>Remarquez le texte affiché en bas à droite de la carte : il crédite les auteurs du fond de carte, par exemple ''Map tiles by Stamen Design - Map Data © OpenStreetMap contributors''.</p>
</div>
### 3. Choisir les options d'interface
Vous pouvez configurer les éléments de la carte mis à disposition des utilisateurs qui consulteront votre carte. Vous pouvez par exemple ajouter une mini-carte de situation ou une barre de légende, ou encore décider quels boutons seront affichés.
![](images/umap_edit_props.png)Pour cela, ouvrez dans le menu **Éditer les paramètres** l'onglet **Options d'interfaces**. Vous pouvez activer ou désactiver une dizaine d'options dont voici la signification.
Apparaît alors un long tableau de bord qui vous permet, pour chacun des boutons sur la gauche de la carte, de contrôler leur visibilité :
* **toujours** indique que le bouton est toujours visible pour l'utilisateur
* **jamais** signifie que le bouton ne sera pas disponible
* **caché** signifie que le bouton n'est accessible qu'après un clic sur le bouton ![Plus d'outils](images/umap_plus.png). Les boutons cachés ne seront bien sûr accessibles que si l'option ''Voulez-vous afficher le bouton "Plus" ?'' (plus bas sur le tableau de bord) est activée.
La partie basse du tableau de bord ne concerne pas ces boutons mais d'autres éléments venant *habiller* la carte :
![](images/umap_properties_bottom.jpg)
Quelques remarques :
* si vous cachez les boutons de zoom **et** désactivez le zoom avec la molette de la souris, les utilisateurs ne pourront ni zoomer ni dézoomer ... sauf à découvrir le menu accessible avec un clic droit sur la carte.
* les boutons de navigation en bas des popups permettent de faire défiler les éléments de la carte
![](images/umap_share.png)
Notez que ces options - et quelques autres - sont également disponibles en **Options d'export de l'iframe** du menu **Exporter et partager carte**, où elles permettent de contrôler les mêmes options d'interface lorsque la carte est intégrée dans une page Web.
### 4. Copier ou supprimer une carte
Tout en bas des **Propriétés de la cartes**, l'onglet **Options avancées** propose deux opérations peu utilisées mais qu'il est bon de connaître :
* **Supprimer** supprime la carte du serveur umap, ainsi que les données qui y sont associées !
* **Cloner cette carte** effectue une copie de la carte et de ses données. La nouvelle carte est ajoutée à votre catalogue.
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.
Une fois ces opérations maîtrisées, les tutoriels de niveau intermédiaire vous apprendront à structurer vos cartes avec des calques et enrichir le contenu de vos popups. Vous découvrirez également comment coproduire une carte et créer un diaporama géolocalisé.
# Je crée des infobulles multimédia
## Ce que nous allons apprendre
* Formater le texte des infobulles
* Ajouter un lien vers une page Web
* Insérer une photo et définir sa taille
* Intégrer une vidéo
## Procédons par étapes
![](images/aide-miseenforme.png)
Nous avons vu dans le tutoriel [Je consulte une carte uMap](1-consulter.html) comment associer un nom et une description à un élément de la carte. Ce nom et cette description sont affichés dans une infobulle (//popup// en anglais) qui apparaît lorsqu'on clique sur l'élément.
Le contenu de cette infobulle peut être enrichi de plusieurs manières :
* en formatant le texte : titres, caractères gras et italiques
* en insérant un ou plusieurs liens vers une page Web
* en insérant une image ou une vidéo
Mettre en forme une infobulle nécessite d'utiliser une syntaxe décrite en cliquant sur le point d'interrogation visible à droite de l'intitulé **description**, reprise ci-contre.
----
### 1. Mettre en forme le texte d'une infobulle
![](images/miseenforme-resultat.png)
Un exemple vaut mieux que de longues explications : la description ci-dessous produit l'infobulle à droite.
![](images/miseenforme-syntaxe.png)
Notez les points suivants :
* une ligne commençant par `#` définit une ligne titre, un **caractère espace** doit être placé entre le caractère `#` et le texte du titre
* une **zone vide** est ajoutée automatiquement en-dessous de chaque titre
* il est possible de combiner caractères gras et italiques en utilisant `%%***%%`
* le triangle en bas à gauche du champ de saisie permet de l'agrandir
### 2. Ajouter un lien vers une page Web
Reprenons [la carte de nos vacances à Crozon](http://u.osmfr.org/m/64936/). Au 3ème jour de vacances un fort vent d'Ouest nous amène à aller dans l'Anse de Morgat, bien abritée du vent. Nous décidons de documenter cette visite sur la carte. Nous ajoutons un marqueur sur la carte, puis découvrons avec intérêt l'article Wikipédia sur Morgat : https://fr.wikipedia.org/wiki/Morgat.
![](images/miseenforme-liensimple.png)
Pour ajouter à notre infobulle **un lien vers l'article**, il suffit de copier l'adresse de la page Web, affichée dans la barre d'adresse du navigateur, et de la placer entre **double-crochets**. L'infobulle à droite correspond à la description ci-dessous :
Morgat est un ancien village de pêcheurs.
Article Wikipédia :
[[https://fr.wikipedia.org/wiki/Morgat]]
![](images/miseenforme-lienavectexte.png)
Nous pouvons aussi **cacher l'adresse du lien** et la remplacer par un texte. Pour cela il suffit de faire suivre l'adresse d'une barre verticale (AltGr + 6 sur un clavier français) et du texte :
Morgat est un ancien village de pêcheurs.
[[https://fr.wikipedia.org/wiki/Morgat|Article Wikipédia]]
Cette forme est particulièrement utile pour les adresses longues.
----
### 3. Insérer une photo
Umap ne permet pas de stocker des photos, mais sait afficher des photos publiées sur un serveur Web.
![](images/miseenforme-photo.png)
L'article Wikipédia montre une belle photo de l'Anse de Morgat. Les photos visibles dans Wikipédia sont sous licence libre *[Creative Commons](http://creativecommons.fr/)*. Cela signifie que l'auteur.rice de la photo renonce à ses droits d'auteur : nous pouvons donc utiliser cette photo. Pour cela nous devons :
1. copier l'**adressse de l'image** (cette opération est accessible dans le menu affiché par un clic droit sur la photo)
2. placer cette adresse entre double accolades :
Morgat est un ancien village de pêcheurs.
{{https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Morgat_8006.jpg/330px-Morgat_8006.jpg}}
[[https://fr.wikipedia.org/wiki/Morgat|Article Wikipédia]]
#### 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}}
![](images/lienframapic.png)
#### Modifier la taille d'une photo
![](images/styledepopup.png)
La taille de la photo est restreinte par la taille de l'infobulle. Pour **agrandir une image** vous devez utiliser une infobulle plus grande. Pour cela ouvrez l'onglet ''Options d'interaction'', cliquez sur ''Définir'' en face de ''Style de popup'' puis choisissez **Nom et description (large)**.
A l'inverse vous pouvez **réduire la taille d'une image**, en faisant suivre le lien vers la photo d'une barre verticale et d'un nombre qui définit la **largeur en pixels** de l'image, par exemple :
{{https://framapic.org/xxx/yyy.jpg|400}}
----
### 4. Insérer une vidéo
Insérer une vidéo est plus complexe. En effet le navigateur Web a besoin d'un lecteur pour afficher une vidéo. Les sites de partage de vidéos comme Youtube, DailyMotion ou encore [Framatube](https///framatube.org/) de Framasoft, proposent pour chaque vidéo un lien qui permet de l'intégrer dans une autre page Web en utilisant une *iframe*.
Nous trouvons sur YouTube une [vidéo des Grottes marines de Morgat](https///www.youtube.com/watch?v=sKvjd8bGsZM), qui se visitent en bateau. Pour intégrer cette vidéo à une infobulle, suivez les étapes :
1. ouvrez l'onglet **Intégrer** visible *sous* la vidéo
2. copiez l'adresse après `src=` (sans les guillemets), notez qu'elle comporte le terme *embed* qui signifie *intégrer* ![](images/partageyoutube.png)
3. coller cette adresse entre **triple accolades** dans l'infobulle :
{{{https://www.youtube.com/embed/sKvjd8bGsZM}}}
4. pour un meilleur résultat utilisez un style de popup large, notez la hauteur et la largeur et définissez la taille de l'*iframe* avec les mêmes valeurs :
{{{https://www.youtube.com/embed/sKvjd8bGsZM|315*560}}}
Voici le résultat, la vidéo peut être directement visionnée dans notre infobulle :
![](images/miseenforme-video.png)
## Faisons le point
Nous avons à présent tous les éléments pour produire une belle carte, avec des éléments stylisés et les infobulles qui les décrivent avec un contenu mis en forme et multimédia : liens, photos et vidéos.
La syntaxe permettant de mettre en forme une infobulle est certes un peu complexe, mais la bonne nouvelle est que cette même syntaxe peut être utilisée sur uMap en deux autres endroits :
* la description de la carte, définie dans le menu **Éditer les paramètres**
* le descriptif des **calques**, que nous découvrons dans le [prochain tutoriel](6-calques.html).
# Je structure ma carte avec des calques
## Ce que nous allons apprendre
* Créer des calques et organiser le contenu de la carte
* Définir les propriétés d'un calque
* Gérer les calques d'une carte
## Procédons par étapes
### 1. Créer un calque
Reprenons la [carte du Festival des 3 continents](http://u.osmfr.org/m/26381/) vu dans le tutoriel [Je consulte une carte uMap](1-consulter.html). Les données de cette carte sont organisées en plusieurs calques :
* les cinémas : marqueurs jaunes
* les autres lieux du festival : marqueurs bruns
* les lignes de transport en commun
* les stations de vélo-partage Bicloo
![](images/umap_calques_gauche_droite.jpg)
Le sélecteur de calques permet à l'utilisateur de zoomer sur l'ensemble des éléments d'un calque, de le masquer ou l'afficher à loisir. Chaque calque peut être décrit dans le panneau latéral de la carte. Organiser les éléments d'une carte est donc pratique pour consulter la carte, nous verrons aussi que cela permet de faciliter sa création.
![](images/umap_edit_layers.png)
Le menu **Gérer les calques**, disponible en mode édition, affiche la liste des calques existants et permet de créer un nouveau calque. Cliquez ensuite sur **Ajouter un calque**, apparaît alors le panneau **Propriétés de la couche** du nouveau calque (//calque// ou *couche*, les deux termes sont équivalents).
![](images/umap_layer_props_top.png)
Saisissez le nom du calque et une description de la catégorie d'éléments auxquels vous destinez ce calque : ils seront affichés dans le panneau **À propos**. Ci-dessous le résultat correspondant aux propriétés saisies à droite.
![](images/umap_layer_description.png)
<p class="alert alert-info">
Sautez une ligne en début de description pour celle-ci apparaisse **sous** le nom du calque et non à côté dans le panneau À propos.
</p>
### 2. Organiser le contenu de la carte
![](images/umap_layer_select.png)
Lorsque vous ajoutez un élément à la carte, en haut du panneau de propriétés de l'élément se trouve un **menu déroulant** qui vous permet de choisir le calque où placer l'élément.
Il est bien sûr possible de changer le calque d'un élément déjà créé. N'hésitez donc pas, lorsque votre carte s'enrichit, à *restructurer* son contenu en plusieurs couches.
#### Comment définir les calques d'une carte ?
Il n'y a pas de méthode établie pour définir les calques : cela dépend vraiment des données placées sur la carte et de l'expérience du cartographe. Voici, pour quelques thématiques de cartes et à titre d'exemples, une proposition de listes de calques :
* tourisme : hébergement, restauration, transports, musées, points de vue...
* logistique d'un festival : accès, scènes, restauration, sanitaires, déchets, postes de secours, réseau électrique...
* événement à portée internationale : un ou plusieurs calques par langue
* structures d'un réseau : structures porteuses, adhérentes au réseau, partenaires
* projet d'aménagement : les différents scénarios ou variantes du projet
Nous verrons plus loin que lorsqu'une carte est intégrée à une page Web, il est possible de créer plusieurs présentations de la même carte, et de sélectionner pour chacune quels calques sont visibles. Vous pourrez donc, à partir d'une même carte uMap, diffuser plusieurs cartes dont le contenu est adapté au public visé par chacune des cartes.
Ainsi pour une carte multi-lingues vous pourrez diffuser la carte en différentes langues en sélectionnant le ou les calques de chaque langue. Pour l'exemple d'une carte de la logistique d'un festival, vous pourrez ainsi diffuser une carte vers le public (accès, scènes, restauration, sanitaires), une autre vers les équipes techniques (sanitaires, déchets, réseau électrique), une troisième vers la sécurtié civile (accès, postes de secours, réseau électrique), etc.
### 3. Définir les propriétés d'un calque
Un intérêt majeur de l'utilisation des calques est la possibilité de définir, pour chaque calque, le **style par défaut** des éléments qui seront ajoutés au calque. Vous éviterez ainsi la tâche fastidieuse de définir un à un le style de chaque élément et la carte sera nettement plus *lisible* car homogène. Surtout, si vous décidez que les cinémas doivent être affichés non plus en jaune mais en rouge, vous ne ferez la modification qu'une seule fois pour l'ensemble du calque et non pour chacun des éléments.
![](images/umap_layer_edit.png)
Dans le panneau de gestion des calques cliquez sur le crayon pour éditer les propriétés du calque. Les onglets **Propriétés de la forme** et **Propriétés avancées** vous permettent de définir les styles par défaut du calque. Vous retrouvez les mêmes propriétés que celles utilisées dans le tutoriel [J'utilise un compte et crée une belle carte](3-utiliser-un-compte.html).
![](images/umap_legende.png)
Toutes les pr