Chronique familiale




La chronique familiale pas à pas

Créer une carte avec OpenStreetMap




OpenStreetMap (OSM) ↗ est un service collaboratif de cartographie en ligne permettant de créer des cartes géographiques personnalisées sous licence libre et que vous pouvez donc mettre sur votre chronique.

Ce service présente à mon avis deux avantages :

- il ne nécessite pas d'inscription ;

- vous pourrez faire évoluer vos cartes au gré de vos envies ou de vos découvertes sans avoir besoin de les refaire intégralement à chaque fois ni de modifier le code de votre chronique.

Je vais expliquer ici la démarche pour créer une carte personnalisée relativement simple et la mettre ensuite sur sa chronique, en laissant chacun libre d'explorer plus avant les fonctionnalités de l'application et de créer des cartes plus sophistiquées.
 

 Créer la carte de base


Pour créer une carte OSM, il faut tout d'abord se rendre sur la page de l'application uMap ↗

Cliquez en haut et à droite de la page sur "Créer une carte" :


bouton créer




Vous arrivez sur une carte du nord de l'Europe ↗ à peu près centrée sur le nord de la France.



Vous pouvez vous déplacer dans la carte grâce à la "main" (le curseur) en tenant le bouton gauche de la souris enfoncé, et zoomer soit à l'aide des boutons + / - en haut et à gauche, soit à l'aide de la molette et ainsi vous retrouver à l'endroit de la carte que vous voulez afficher :


curseur main



zoom plus ou moins




Prenons par exemple l'île de Ré ↗.

Toujours à l'aide du curseur et du zoom choisissez le grossissement et le centrage qui vous conviennent 1 et enregistrez ces choix en cliquant sur cette icône dans la barre d'outils de droite :

 
verrouillage du zoom et du centrage




Donnez un nom à votre carte, d'abord en cliquant sur le crayon en haut à gauche :


crayon pour créer le nom




Puis en renseignant le cadre de la fenêtre de droite :


renseignement du nom de la carte




Il vous faut maintenant enregistrer votre carte :


enregistrement de la carte

 


Et verrouiller les permissions et les éditeurs en cliquant sur la clef à droite :


Il semble qu'il y ait un bug sur le verrouillage des permissions. Aussi, avant de cliquer sur la clef, il est nécessaire de rafraîchir la page (touche F5 avec Windows).


icône de verrouillage des permissions




Assurez-vous que la carte n'est modifiable qu'avec le lien secret 2 :


choix des éditeurs




Mettez en surbrillance, copiez et enregistrez avec soin sur votre ordinateur le lien secret :


lien secret de l'éditeur



Celui-ci vous permettra non seulement d'éditer et de modifier votre carte ultérieurement en ouvrant ce lien depuis votre navigateur, mais également de vous assurer que vous êtes le seul à pouvoir le faire.
 

 Récupérer l'adresse de la carte


Vous pouvez dès maintenant récupérer l'adresse publique de la carte qui vous servira à l'afficher sur votre chronique. Cette adresse ne changera plus même si vous apportez des modifications à votre carte.

Pour ce faire copiez tout simplement ce qui figure dans la barre d'adresse en haut de votre écran :


adresse publique



Qui une fois collée se présentera comme ceci : https://umap.openstreetmap.fr/fr/map/ile-de-re_431793
 

 Options d'interface


Les visiteurs n'ont pas besoin de la barre de menu située sur la gauche de la carte et d'ailleurs certains d'entre-eux (moi le premier) la trouvent gênante et peu esthétique. Nous allons donc supprimer les icônes à l'exception du contrôle de zoom. Voici comment procéder :

Cliquez sur la roue dentée à droite :


roue dentée




Puis sur "Options d'interface" :


options d'interface




Voici les options que j'ai choisies 3 ne laissant sur la carte que les boutons + / - et l'échelle de la carte :


options d'interface
options d'interface

 

 Renseigner la carte


Comme je l'ai dit au début, cette page n'est pas un tutoriel sur l'utilisation de uMap (vous en trouverez en ligne) et nous allons seulement voir quelques possibilités offertes par l'application.

Tout d'abord, il est important de savoir que pour positionner un élément vous pouvez zoomer et vous déplacer sur la carte,

si vous ne cliquez pas sur cette icône icône de verrouillage de zoom et de centrage vous ne modifierez pas le choix de zoom et centrage initiaux.

 

 Positionner un marqueur


Nous allons voir comment positionner un marqueur et pour ce faire, cliquez sur l'icône à droite :


icône marqueur




Le curseur se transforme en croix que vous pouvez positionner où vous le souhaitez, au besoin en zoomant et en faisant défiler la carte :


icône marqueur




Cliquez, votre marqueur apparaît à l'endroit choisi :


icône marqueur

 

 Modifier l'apparence de l'icône


En cliquant sur "Propriétés de la forme" :


propriétés de l'icône



Vous pourrez changer la couleur et la forme de l'icône ou y intégrer une image comme ceci par exemple  bateau intégré dans l'icône

 

 Nommer l'icône


Vous pouvez nommer l'icône en renseignant la fenêtre de saisie :


fenêtre du nom




Et obtenir ceci en cliquant sur l'icône :


fenêtre du nom



Mais j'en conviens aisément, cela présente un intérêt très limité !
 

 Édition et consultation


Je viens de dire que vous verriez le nom de l'icône en cliquant dessus. En fait, pour le voir il faudra que vous ayez enregistré votre travail (et je vous conseille de le faire à chaque modification) :


bouton enregistrer



Puis que vous ayez désactivé le mode "Édition" :


désactiver l'édition



Et là, en cliquant sur l'icône concernée vous pourrez voir le résultat de vos modifications.


Pour activer à nouveau le mode "Édition" il vous faudra cliquer sur le crayon 5 :


réactiver l'édition



Si vous souhaitez alors modifier le contenu d'une icône, il vous faudra cliquer sur celle-ci, puis sur le crayon qui apparaît au dessus :


modifier une icône



Si vous souhaitez la supprimer cliquez sur la poubelle, l'application vous demandera une confirmation avant la suppression.
 

 Liens, textes, images et vidéos


Je disais un peu plus haut que nommer l'icône présentait un intérêt limité. En revanche pouvoir mettre dans le popup 4 un texte, des liens vers n'importe quelles pages web (les fiches individuelles par exemple), une photographie du lieu ou une vidéo présente un tout autre intérêt.

Il vous faudra pour cela renseigner la fenêtre "Description". Cliquez sur l'aide :


icône d'aide




Pour avoir un aperçu des possibilités :


Aide de description



 Taille du popup


Vous pouvez choisir la taille à laquelle s'affichera le popup. Pour cela cliquez sur "Options d'interaction" :


Options d'interaction




Puis sur "Popup" (taille par défaut) ou "Popup grande" :


Options d'interaction




Avec l'option "Popup", la taille de l'objet dans celui-ci sera au maximum de 300 px, avec l'option "Popup grande" de 500 px au maximum, même si vous spécifiez une taille supérieure de l'objet.



L'inclusion d'un texte ne présentant pas de difficulté particulière, nous allons nous intéresser aux autres possibilités.


 Un lien vers une autre page


Vous pouvez insérer un lien pour renvoyer vers une page web (une fiche individuelle par exemple). La syntaxe du lien sera la suivante :

[[adresse de la page|Texte du lien]]le caractère | s'obtient avec la combinaison de touches Alt + 124

Exemple : [[https://fr.wikipedia.org/wiki/La_Couarde-sur-Mer|La Couarde-sur-Mer sur Wikipédia]]

Et pour voir le résultat, cliquez sur l'icône au dessus de La Couarde-sur-Mer, puis sur le lien dans le popup, vous serez dirigé vers la page Wikipedia de la ville :





 Une image avec une largeur définie


Avec cette syntaxe :

{{adresse de l'image|largeur}}

Exemple : {{https://upload.wikimedia.org/wikipedia/commons/f/fd/Port_Ars_en_Re.jpg|300}}


Cliquez sur l'icône au dessus de Ars-en-Ré :





Si vous êtes Premium, vous voudrez peut-être mettre dans l'infobulle une image hébergée sur l'espace dédié de la chronique.

Si c'est le cas, je vous explique comment en récupérer l'adresse sur cette page : Récupérer l'adresse d'une image ↗


 Une image cliquable


Que vous pourrez afficher en grand dans un autre onglet. La syntaxe est la suivante :

[[adresse de la grande image|{{adresse de la petite image}}]]

Cliquez sur l'icône puis sur la carte postale :




 Une vidéo


Nous avons vu dans la page Intégrer une vidéo dans la chronique ↗ comment récupérer l'adresse et les dimensions d'une vidéo.

Voici la syntaxe pour l'intégrer dans une popup :

{{{adresse de la vidéo|hauteur*largeur}}}

Exemple : {{{https://www.youtube.com/embed/E93SzVoT7V8|315*560}}}

Cliquez sur l'icône fuchsia :



 

 Intégrer la carte à la chronique


Il nous reste donc à mettre notre carte sur la chronique. Voici le code d'intégration :

<div style="width:100%; height:80vh; margin:auto; border:solid black 1px;">
<object type="text/html"
data="https://umap.openstreetmap.fr/fr/map/ile-de-re_431793"
style="width:100%; height:100%;">
Votre configuration ne permet pas d'afficher ce fichier 
</object>
</div>



Et les explications :

<div style="width:100%; height:80vh; margin:auto; border:solid black 1px;">un conteneur centré dans la page qui occupe toute la largeur et 80% de la hauteur 6 (avec une bordure noire de 1px d'épaisseur)

<object type="text/html"qui contient une balise "object" dont on définit le type 7

data="https://umap.openstreetmap.fr/fr/map/ile-de-re_431793"dans laquelle on met l'adresse publique8 de la carte

style="width:100%; height:100%;">et celle-ci occupera tout le conteneur

Votre configuration ne permet pas... ici le texte de remplacement si le navigateur du visiteur ne peut pas afficher le fichier

</object>on referme les balises
</div>


Avec ce résultat (comme précédemment, cliquez sur les icônes) :


Votre configuration ne permet pas d'afficher ce fichier

 

 Notes

 
1. Vous pourrez modifier ces choix ultérieurement et ce autant de fois que vous voudrez.
 
2. C'est l'option par défaut. Si ce n'était pas le cas, c'est celle qu'il faut choisir à l'aide du menu déroulant.
 
3. Bien entendu, il ne s'agit que d'une suggestion et vous restez libre d'afficher ce qui vous convient. Un simple clic sur le bouton suffit à permuter les choix ON /OFF. Il est inutile de laisser le bouton de plein écran affiché, cette option ne fonctionne pas sur la chronique.
 
4. Un popup est une fenêtre qui s'ouvre dans une page web, parfois de façon intrusive pour afficher de la publicité où un contenu non sollicité, ou comme dans le cas d'OpenStreetMap de façon utile après un clic sur une icône de la carte, ce qui permet d'afficher un contenu (texte, lien, image, vidéo... )
 
5. Il faudra également cliquer sur le crayon pour passer en mode "Édition" lorsque vous reviendrez sur votre carte avec le lien secret.
 
6. Cette page explique comment Créer un conteneur avec <div> ↗. Il va de soi que vous choisirez des dimensions qui vous conviennent.
 
7. Nous avions vu sur cette page Inclure un PDF dans la chronique ↗ et celle-là Intégrer une vidéo dans la chronique ↗ que la balise object sert à insérer des objets autres que du texte et notamment du multimédia dans une page web. Elle ne fait pas partie des balises originellement reconnues par GeneWeb mais est acceptée depuis maintenant quelques années.
 
8. Ne confondez surtout pas l'adresse publique que vous mettrez sur votre chronique et le lien secret qui vous permet de modifier votre carte. Si vous insériez ce dernier sur votre chronique, les visiteurs pourraient modifier votre carte, voire même la supprimer sans que vous puissiez les en empêcher.



───── oOo ─────


Index des pages