L’extension OSM permet de réaliser toutes sortes de cartes sur votre blog WordPress.

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)
• 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 une nouvelle options d’écran est proposée :
WP OSM Plugin shortcode generator
Cela fait apparaitre 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 pour afficher une carte) et aussi de géolocaliser une page/un article.

Première étape : marquer géographiquement un(des) article(s) ou page(s) :

1) Lors de la création/modification de l’article/page uiliser la boite de dialogue « WP OSM Plugnin shortcode generator » et séléctionner l’onglet ‘Set Geotag’ :

Sélectionner le type et la couleur d’icône puis, centrer la carte sur le lieu associé à l’article (ou la page), zoomer pour cela, puis cliquer sur le point à marquer. L’icône apparait à l’endroit désigné, recommencer si besoin puis enregistrer (ou mettre à jour).

Deuxième étape : ajouter la carte dans une page.

2) Utilisez la boite de dialogue « WP OSM Plugnin shortcode generator » pour créer le raccourci à mettre dans la page, pour ça sélectionner l’onglet ‘Map & Geotags’ :

On peut limiter à un type (article ou page), on peut filtrer selon les catégories (d’articles). , Centrez la carte et réglez le zoom à votre guise, tel que vous voulez la voir apparaitre.
Quand on clique sur la carte le shortcode apparait sous la carte :

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.
Le code se compose de parties :
[*osm_map_v3 indique au plugin qu’il doit préparer une carte
map_center= »48.8693430679, 2.4129764600″ coordonnées du centre
zoom= »12″ niveau de zoom initial
width= »100% » largeur relative
height= »450″ hauteur absolue
tagged_type= »post » filtre type
marker_name= »mic_black_pinother_02.png »
tagged_filter= »comptoir » filtre catégorie
control= « fullscreen »] contrôles disponibles

Troisième étape : voir le résultat.

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

 

4) Bonus : un widget affichera un marqueur qui localise une page/article géolocalisé.
Activer le widget dans le menu Apparence>Widgets (voir les détails en anglais).
Le résultat (n’apparait que sur les page géo-taguées) :

 

 

 

 

 

 

 

 

 

NB : Depuis novembre 2015 l’extension OSM permet l’utilisation d’OPEN LAYER 3 qui prend mieux en charge les mobiles et offre une vue plein écran grâce au bouton situé en haut et à droite. La syntaxe évolue un peu, exemple :
[*osm_map_v3 map_center= »48.857,2.352″ zoom= »9″ width= »100% » height= »450″ tagged_type= »post » control= »fullscreen » map_border= »thin solid grey »]

Tous les détails sur le site de l’extension :http://wp-osm-plugin.hanblog.net/tutorial/wp-osm-plugin-free-mapping-solution-based-on-state-of-the-art-technology/

 

Quatrième étape : continuer à géo-taguer des articles et/ou des pages qui apparaitront sur la carte (sans qu’on aie besoin de changer  la page qui affiche cette carte).

 

Pour aller plus loin (pour les plus expérimentés) :

Vous remarquerez vite qu’il est fastidieux de devoir recentrer la carte et zoomer à chaque article, c’est pourquoi la position de départ est réglable dans le fichier de configuration.
Il faut se rendre dans Extensions>Editeur et choisir l’extension OSM :

NB Ce fichier n’est pas fourni dans  les mises à jour (pour ne pas vous faire perdre vos réglages) mais un modèle est proposé  :osm-config-sample.php, renommez le avec votre logiciel de transfert de fichier par exemple.

Puis modifiez la longitude, la latitude et le zoom par défaut comme ici (avec vos valeurs) :

Pour afficher la carte OSM-WP dans un autre site il faut la présenter en peine fenêtre sans quoi les bandeaux de votre thème WP vont apparaitre aussi, j’explique comment faire dans cet article.

Maintenant à vous de jouer !

Si vous voulez que je détaille une partie ou que j’explique la méthode avec fichier texte, faites-moi le savoir marc (chez) pechemonnaielocale.fr