cartes OSM pour WordPress

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’ :

menu 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’ :

menu carte

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 :

shortcode

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 :

exemple

 

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) :

osm widget

 

 

 

 

 

 

 

 

 

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 »]

WP_OSM_v3

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 :

osm-reglages

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) :

osm-config

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

 

 

3 réflexions sur « cartes OSM pour WordPress »

    1. C’est un peu plus complexe puisqu’il faut éditer un fichier de l’extension (sera écrasé à chaque mise à jour).

      Ajouter une icône, ou changer la description, demande de transférer l’icône dans le dossier ‘osm\icon’ si besoin et de modifier le fichier osm-marker-select.php qui est de la forme :J’ai ajouté cette ligne :L’ordre des lignes est celui de la boite de dialogue.

      1. Merci beaucoup.
        Je ne peux pas faire comme cela car il y a plus de 40 sites sur une install réseau de wordpress.
        j’ai essayé sur le principe que vous indiquez en ajoutant un include d’un fichier php dans le dossier uploads, mais pb à chaque mise a jour
        merci

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*