Cartes OSM dans WordPress

Nous utilisons l’extension OSM permet de réaliser toutes sortes de cartes sur votre blog.

Les principales fonctions sont d’afficher des cartes interactives :

  • simples (centrées sur un point donné)
  • idem avec un marqueur (directement dans la page ou dans l’article)
  • idem avec plusieurs marqueurs (grâce à un fichier texte de points)
  • idem avec plusieurs séries de marqueurs (avec plusieurs fichiers, l’utilisateur choisir
  • cartes d’un parcours grâce aux données KLM
  • cartes d’un parcours grâce aux données GPX
  • cartes des articles/pages géotagués : ce que nous détaillons ci-dessous

Comme toute extension il faut l’ajouter et l’activer (on suppose que c’est fait).
Il faut créer une page/un article qui affichera la carte (Pages>Ajouter).
Grâce à l’extension deux nouvelles options d’écran sont proposées :
WP OSM Plugin shortcode generator est une boite située sous celle du texte, elle permet de générer pour vous le(s) ‘shortcode(s)’ (instructions pour WordPress/OSM).
WP OSM Plugin geotag est une boite située à droite (quand on est sur 2 colonnes), qui permet d’ajouter très simplement les champs personnalisés (tags) aux articles/pages.

1) Cochez les deux cases pour afficher les boites dans votre page/article en cours d’édition.

Capture d’écran 2015-10-11 à 08.59.24

2) Utilisez  shortcode generator pour créer le raccourci à mettre dans la page, pour ça sélectionner l’onglet Geotagged, centrez la carte et réglez le zoom à votre guise :

Capture-d’écran-2015-06-07-à-10.08.50

Quand on clique sur la carte le shortcode apparait :

Capture d’écran 2015-10-11 à 08.58.10

Copier/coller le code dans votre page/article. L’affichage de la page/article ne montre pour l’instant que le fond de carte centré et agrandi comme vous l’avez choisi.

3) dans les articles/pages que vous voulez localiser sur la carte :localiser avec OSM

 

Modifiez l’article/page comme d’habitude, dans la boite WP OSM Plugin geotag choisissez l’icône, centrez et zoomez la carte, puis cliquez sur le point précis à afficher, les informations apparaissent sous la carte.

Vous devrez les enregistrer grâce au bouton Enregistrer.

OSM Saved

L’affichage change pour confirmer la prise en compte.

 

 

On peut vérifier la saisie, après avoir mis-à-jour la page/article, dans la boite champs personnalisés, l’extension a ajouté :

OSM champs personnalisés

Procédez ainsi pour tous les articles/pages à localiser sur la carte.

OSM exemple carte4) Quand on affiche une carte d’articles geolocalisés,les icônes sont des liens qui affichent une bulle reprenant le début de l’article/page et contiennent un lien vers celui-ci :

 

 

 

 

 

5) Bonus : un widget est inclus qui affichera un marqueur sur un fond de carte interactive avec la position enregistrée dans une page / un article géolocalisé.
Activer le widget dans le menu Apparence>Widgets (voir les détails en anglais).

OSM Widget config
Le résultat (n’apparait que sur les page géo-taguées) :

OSM Widget exemple

Pour aller plus loin : d’autres exemples et des idées de personnalisation sur le site de la Pêche : http://peche-monnaie-locale.fr/cartes-osm-pour-wordpress/

Màj 15/11/2015 OSM pour WordPress supporte maintenant Open Layer 3 et les cartes peuvent être affichées en plein écran grâce à un bouton en haut, à droite, de la carte.