Partager un lieu avec une carte OpenStreetMaps (OSM)
Création du tuto
juillet 2023
Service utilisé pour ce tuto :
la carte www.openstreetmap.org
(proposé par l'association www.openstreetmap.fr)
Besoin d’envoyer par mail ou sms un lien vers une carte pour situer un endroit ? C’est possible de le faire avec la carte d’OpenStreetMaps. Je vais te montrer comment faire ça.
Pour situer un endroit précis sur la carte je vais utiliser ce qu’on appelle un marqueur (1) :
Avec la carte d’OpenStreetMaps (OSM) il est possible de ne mettre qu’un seul marqueur. Si tu as besoin de faire une carte avec plusieurs marqueurs et d’autres indications, voir mon tuto :
En haut de la page tu pourras voir un bouton pour se connecter (1). Ce n’est pas obligatoire pour créer et partager une carte. La connexion sert uniquement si tu veux participer à améliorer la carte.
Pour commencer rends-toi sur la carte d’OSM : www.openstreetmap.org.
Zoomer sur la carte
Pour mon tuto je veux situer avec exactitude le parking du col d’Erroimendi. Pour ça je vais zoomer. Sur la droite se trouve le menu principal (1) avec toutes les fonctionnalités de la carte :
Pour zoomer il faut utiliser l’icône (1). Il est également possible de zoomer avec sa souris en double cliquant sur le lieu choisi. Pour se déplacer dans la carte il faut garder le bouton gauche de la souris enfoncé et déplacer la souris.
Le degré du zoom dépendra de la précision que tu désires, c’est-à-dire si tu veux que le lieu soit indiqué avec précision ou pas par le marqueur. Donc c’est à toi de voir jusqu’où tu veux zoomer.
Insérer le marqueur
Maintenant, pour indiquer le parking, je vais mettre un marqueur dessus. Toujours dans le menu de droite je clique sur l’icône (1) :
Le panneau Partager s’ouvre. Dans la partie Lien ou HTML, je coche la case Inclure le marqueur (1) pour l’inséré sur la carte (2) :
Partager la carte
Je vais copier le lien personnalisé de cette carte incluant le marqueur. Toujours dans la partie Lien ou HTML, on peut voir trois boutons (1) :
- Lien. C’est celui par défaut. Le lien de mon exemple ressemble à ça :
https://www.openstreetmap.org/?mlat=42.97397&mlon=-0.99518#map=18/42.97397/-0.99518
- Lien abrégé. Le lien est plus court que le précèdent :
https://osm.org/go/b~sh3LM3f--?m=
- HTML. C’est du code HTML permettant d’intégrer la carte dans la page d’un site :
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.9985917806625367%2C42.972446635407884%2C-0.9917628765106202%2C42.975484545902624&layer=mapnik&marker=42.97396560941372%2C-0.9951773285865784" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?mlat=42.97397&mlon=-0.99518#map=18/42.97397/-0.99518">Afficher une carte plus grande</a></small>
Pour mon tuto le code HTML ne sera pas utile. Je vais plutôt utiliser l’un des deux autres liens.
Il suffit de cliquer sur le bouton Lien ou Lien Abrégé. Automatiquement le lien, juste en dessous des boutons (1), se met en surbrillance et est copié. Il suffit de le coller dans un mail ou un sms.