Cartopartie sentiers de Rumes
Toggle navigation
carto-sentiers
Notes partagées
C'est quoi Openstreetmap ?
C'est quoi OpenStreetMap ?
Qui l'a fait et pourquoi ?
Et ça fonctionne ?
Mais pourquoi ça marche ?
Un projet jamais fini !
Et les données sont vraiment libres ?
Et les données sont vraiment fiables ?
Contribuer sur Openstreetmap
Tuto : contribuer sur Openstreetmap
Interroger la base Openstreetmap
Imprimer une carte Openstreetmap
Le vélo dans Openstreetmap
Créer un point noeuds et une relation dans osm (vidéo)
Ressources partagées
Sommes-nous prêts à partager ?
Gardien de la ressource
Rechercher
×
Se connecter
×
Se connecter
Mot de passe perdu ?
Se souvenir de moi
S'inscrire
Aide
Gestion du site
Tableau de bord
Base de données
Dépôts
Archives
Activer JavaScript pour joindre des fichiers.
Joindre / Insérer un fichier
Annuler
Échoué
×
Télécharger le fichier
Texte du lien de téléchargement
Alignement de l'image
Gauche
Centre
Droite
Taille de l'image
Miniature (140x97)
Moyenne (300x209)
Large (780x544)
Taille originale
Texte de la vignette
Paramètres avancés
Lien associé
Effets graphiques
Bord blanc
Ombre portée
Agrandissement au survol
Texte de remplacement
=====Comment créer une infobulle multimédia pour votre élément (ou votre carte) ?===== {{grid}} {{col size="6"}} Nous avons vu 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. ** {{end elem="col"}} {{col size="6"}} {{attach file="umapinfobulle.png" desc="image umapinfobulle.png (60.5kB)" size="original" class="left"}} {{end elem="col"}} {{end elem="grid"}} ====Mettre en forme le texte d'une infobulle==== Un exemple vaut mieux que de longues explications : la description ci-dessous produit l'infobulle à droite. {{grid}} {{col size="6"}} {{attach file="miseenformesyntaxe.png" desc="image miseenformesyntaxe.png (27.2kB)" size="original" class="left"}} {{end elem="col"}} {{col size="6"}} {{attach file="miseenformeresultat.png" desc="image miseenformeresultat.png (13.5kB)" size="original" class="left"}} {{end elem="col"}} {{end elem="grid"}} **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 - le triangle en bas à gauche du champ de saisie permet de l'agrandir ====Ajouter un lien vers une page Web==== {{grid}} {{col size="6"}} Pour ajouter à notre infobulle un lien vers une page web, 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]]%% {{end elem="col"}} {{col size="6"}} {{attach file="miseenformeliensimple.png" desc="image miseenformeliensimple.png (7.2kB)" size="original" class="left"}} {{end elem="col"}} {{end elem="grid"}} {{grid}} {{col size="6"}} Nous pouvons aussi cacher l'adresse du lien et la remplacer par un texte. Cette forme est particulièrement utile pour les adresses longues. 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]]%% {{end elem="col"}} {{col size="6"}} {{attach file="miseenformelienavectexte.png" desc="image miseenformelienavectexte.png (5.9kB)" size="original" class="left"}} {{end elem="col"}} {{end elem="grid"}} ==== Insérer une image==== {{grid}} {{col size="8"}} Umap ne permet pas de stocker des images, mais sait afficher des photos publiées sur un serveur Web. 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. Cela signifie que l'auteur·rice de la photo renonce à ses droits d'auteur : nous pouvons donc utiliser cette photo. Pour cela nous devons : - copier l'adressse de l'image (cette opération est accessible dans le menu affiché par un clic droit sur la photo) - 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]]%% {{end elem="col"}} {{col size="4"}} {{attach file="miseenformephoto.png" desc="image miseenformephoto.png (32.1kB)" size="original" class="left"}} {{end elem="col"}} {{end elem="grid"}} ===Comment utiliser vos photos ? === Si vous disposez d'un serveur vous pouvez l'utiliser pour stocker vos photos. **Si ce n'est pas le cas vous pouvez utiliser un service comme https://cozy.io/fr/ **, un service de stockage libre qui vous offre 5 gigas de stockage. L'opération est très simple : - ouvrez un compte gratuit chez https://cozy.io/fr et connectez-vous - Faites **transférer des fichiers** sur votre cosy drive - cliquez sur la photo souhaitée et avec le clic droit "Copier l'adresse de l'image" - collez ce lien entre double accolades dans la description de l'infobulle ===Modifier la taille d'une image=== {{grid}} {{col size="6"}} 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}}%% {{end elem="col"}} {{col size="6"}} {{attach file="styledepopup.png" desc="image styledepopup.png (16.7kB)" size="original" class="left"}} {{end elem="col"}} {{end elem="grid"}} ===Associer une image à un lien vers une page Web=== Il est possible d'intégrer une image qui ouvre une page Web lorsque l'utilisateur clique dessus. Cela consiste en fait à créer un lien vers une page Web, en utilisant en guise de texte le lien vers une image. Exemple avec le site et le logo Framasoft : %%[[https://framasoft.org/|{{https://framasoft.org/nav/img/logo.png}}]]%% ====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 de Framasoft, proposent pour chaque vidéo un lien qui permet de l'intégrer dans une autre page Web en utilisant une iframe. {{grid}} {{col size="6"}} Nous trouvons sur Youtube une vidéo des Grottes marines de Morgat, qui se visitent en bateau. Pour intégrer cette vidéo à une infobulle, suivez les étapes : - ouvrez l'onglet Intégrer visible sous la vidéo - copiez l'adresse après src= (sans les guillemets), notez qu'elle comporte le terme embed qui signifie intégrer - coller cette adresse entre triple accolades dans l'infobulle 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}}}%% {{end elem="col"}} {{col size="6"}} {{attach file="partageyoutube.png" desc="image partageyoutube.png (13.7kB)" size="original" class="left"}} {{end elem="col"}} {{end elem="grid"}} ""<div class="well">""**Remarque importante** Tous ces paramétrages de la zone description des éléments sont aussi valables pour le champ de description général de votre carte. Ceci permet d'afficher par exemple à l'ouverture de votre carte, un panneau latéral avec le titre de votre carte et diverses informations sur celles-ci, y compris images, tuto vidéo et vos logos... Pour cela il faut que dans les options d'interaction de votre carte vous ayez coché **légende** dans "voulez-vous afficher un panneau latéral au chargement ?" ""</div>""
Sauver
Annuler
Thème
Protection anti-spam active
×
Apparence de la page infoBulle
Thème
gatien-bootstrap3
margot
minibandeauhaut
yeswiki
Squelette
fixed-1col.tpl.html
fixed-2cols-left.tpl.html
fixed-2cols-right.tpl.html
fixed-3cols.tpl.html
fullscreen-1col.tpl.html
fullscreen-2cols-left.tpl.html
fullscreen-2cols-right.tpl.html
fullscreen-3cols.tpl.html
fullwidth-1col.tpl.html
responsive-1col.tpl.html
responsive-2cols-left.tpl.html
responsive-2cols-right.tpl.html
responsive-3cols.tpl.html
Style
blue.css
gray.css
green.css
red.css
yellow.css
Image de fond
‹
›
Paramètres avancés
Langue de la page
Català
English
Español, castellano
Français
Nederlands, Vlaams
Português
Choisir une page pour :
le menu horizontal
les raccourcis en haut à droite
l'entête (bandeau)
le pied de page
le menu vertical
la colonne de droite