Marre de faire la pub de Google sur votre plan d’accès ?

Voici comment créer et afficher une carte avec OpenStreetMap dans un article.

Créer sa carte

Une carte avec un simple marqueur

Il suffit de

• se rendre sur https://www.openstreetmap.org
• indiquer le lieu désiré dans le formulaire de recherche

Une carte plus personnalisée

Vous devez d’abord vous créer un compte sur https://www.openstreetmap.org/ afin de pouvoir sauvegarder vos cartes.

Rendez-vous ensuite sur https://umap.openstreetmap.fr/fr/ et connectez-vous.

Vous pouvez alors créer une carte en cliquant sur le bouton "Créer une carte".

• Donnez un nom à votre carte en cliquant sur "Cartes sans nom"
• Zoomez sur la zone qui vous intéresse en double-cliquant sur celle-ci ou en utilisant les boutons "+" et "-"
• Placez un marqueur où vous voulez
• Modifiez ce marqueur en cliquant dessus puis en cliquant sur le crayon. On peut
  • modifier sa couleur et sa forme
  • lui donner un nom et le faire apparaître dans une étiquette (options d’interactions)
  • faire apparaître une description détaillée au clic (non visible en mode édition)
  • etc
• on peut rajouter plusieurs marqueurs
• Enregistrez votre carte (le zoom et le centre sont enregistrés)

Afficher sa carte

Avec OpenStreetMap

• Cliquez sur le bouton de partage à droite <picto|nom=share-square-o>
• Copiez le code d’intégration fourni
• Collez le code dans le texte de votre article
  (on peut modifier la taille de la carte en changeant les valeurs de width et de height dans le code)

Avec UMap

• Cliquez sur le bouton de partage à gauche <picto|nom=share-alt>
• Copiez le code d’intégration fourni (on peut paramétrer ce code en cliquant sur "Options d’export de l’iframe")
• Collez le code dans le texte de votre article

Voici un exemple

Voir en plein écran

Aller plus loin

On peut aller plus loin dans l’utilisation mais on peut aussi contribuer à l’amélioration des cartes.

Plus de détails : https://drane.ac-lyon.fr/spip/OpenS...