Comment ajouter une carte OpenStreetMap à WordPress ?

Faut-il remplacer Google Maps par OpenStreetMap ?

Google Maps est la référence en matière de cartographie sur Internet. Avec WordPress, il permet d’ajouter facilement une carte à un formulaire de contact. Cependant il y a d’autres solutions.

En juillet 2018, une nouvelle tarification du service de cartographie de Google Maps est entrée en vigueur. Cela n’a pour l’instant pas d’impact sur les sites peu fréquentés. En effet le déclenchement du paiement commence à 28 000 affichages par mois. Mais qui sait de quoi demain sera fait ? De plus, Google Maps nécessite maintenant de posséder un compte et il faut pour cela enregistrer une carte de paiement.

Depuis le 25 mais 2018, le RGPD remet en question la pertinence d’utiliser Google Maps. En effet ce règlement demande la mise en place d’une politique de confidentialité, et celle-ci nécessite d’être clair sur les données privées collectées.

Comme vous le savez, utiliser un service tiers gratuit est, bien souvent, synonyme de récupération des données par le service en question. Ne nous voilons pas la face : rien n’est gratuit. Comme les hébergeurs de vidéos (YouTube, Vimeo…) Google Maps suit les visiteurs de votre site.

La question d’une alternative à Google Maps se pose donc. Il se trouve qu’en matière de cartographie il existe un service issue du monde du logiciel libre : OpenStreetMap. Le service est de bonne qualité, facile à mettre en œuvre et de par ses principes fondateurs ne piste pas les utilisateurs.

Comment remplacer Google Maps par OpenStreetMap ?

Nous allons voir maintenant comment se débarrasser de Google Maps en mettant en place une solution vraiment gratuite : OpenStreetMap.

Les manipulations suivantes s’appliquent à n’importe quel thème ou constructeur WordPress. Dans l’exemple suivant j’utilise le constructeur de page Elementor, mais cela ne change rien sur le fond. Elementor embarque une fonction de cartographie qui ne prend en compte que Google Maps.

Si l’on veut utiliser OpenStreetMap, deux possibilités :

• embarquer la carte dans un iframe,
• utiliser une extension.

Il m’a semblé plus simple d’utiliser une extension. C’est donc cette solution que je vais décrire.

Si vous souhaitez utiliser l’option iframe, il vous faudra commencer par créer une carte en utilisant le service Umap d’OSM. La création d’un compte est gratuite (vous pouvez faire un don). Pour découvrir les possibilité d’Umap je vous recommande le didacticiel de Johann Nallet.

Utiliser une extension pour intégrer une carte OSM dans WordPress

Nous allons voir comment insérer une simple carte avec un point de repère, comme on peut le faire dans une page de contact pour indiquer une adresse.

Il existe plusieurs extensions. J’en ai retenu deux :

• OSM – OpenStreetMap (ne pas confondre avec le site OSM)

• Leaflet Maps Marker

La version gratuite de LeafLet Maps Marker pose des problèmes d’affichage avec Elementor. La carte s’affiche sur une moitié verticale de l’écran.

Sur les conseils de son développeur, j’ai testé la version Pro (30 jour d’essai gratuit). En effet, elle ne présente pas de problème d’affichage avec Elementor. Toutefois, bien que la version Pro offre beaucoup de fonctionnalités. Il m’a semblé que le coût de la licence était trop élevé pour le simple affichage d’une carte comportant un point repère.

Si vous avez besoin de plus de fonctionnalités je recommande vivement, LeafLet Maps Marker d’autant que le support est très réactif.

J’ai donc opté pour l’extension qui offrait juste ce dont j’avais besoin : OSM – OpenStreetMap.

Réglages de base de l’extension OSM – OpenStreetMap

On commence par installer OSM – OpenStreetMap à partir de l’administration du site WordPress : Extensions > Ajouter puis « Installer » et « activer ».

Une fois installée, OSM offre une interface de réglages basiques, à laquelle on accède à partir de la colonne de gauche : Réglages > OSM.

Les réglages permettent de définir les coordonnées (latitude, longitude) qui serviront de centre à la carte par défaut ainsi que son niveau de zoom.

Umap peut vous aider à trouver les coordonnées.

Comment créer une carte avec OSM ?

Pour construire une carte, ouvrez une page ou un article en mode édition standard, (non Gutenberg). OSM 4.1.2 ne semble pas compatible avec Gutenberg. L’interface de génération du code court ne s’affiche pas correctement.

Ouvrir la page ou l’article avec Elementor ne permet pas d’afficher l’interface d’OSM.

Les réglages du générateur de code court d’OSM apparaissent en bas de page sous la zone de saisie du texte.

L’interface permet de générer un code court (shortcode) que l’on pourra coller dans une zone de texte où vous voudrez afficher la carte.

On commence par créer un Marker (point d’intérêt)

1. Sélectionner l’onglet « Create Marker »
2. Choisir le numéro du Marker
3. Lui donner un nom
4. Préciser les informations qui s’afficheront dans un pop-up lié au Marker. (Utilisez <br/> pour un retour à la ligne).
5. Choisir l’icône du Marker
6. Zoomer / dé-zoomer pour agrandir la carte
7. Cliquer à l’endroit ou le Marker doit pointer
8. Enregistrer

Comment créer la carte et son code court (shortcode)

1. Sélectionner l’onglet « Map & Marker »
2. Choisir le type de carte
3. Choisir le numéro du Marker à afficher
4. Choisir les options : Fullscreen (icône de plein écran), scaleline (échelle), position de la souris (coordonnées d’un point)
5. Cliquer sur le point qui sera la centre de la carte. Cela génère le code court
6. Il est possible de modifier manuellement les dimensions de la carte affichée
7. Copier le code court.

Comment afficher une carte dans une publication WordPress ?

Une fois le code court (shortcode) copié depuis le bas de l’interface de génération de code court, il ne vous reste plus qu’à le copier dans une zone de texte.Voici un exemple de code court :

Ci-dessous le même code court interprété par l’extension OSM.

La carte s’affiche aux dimensions spécifiées dans le code

Cliquez sur l’icône pour voir apparaître la notice avec le texte saisi au point 4 de la création du Marker.

Et voilà !

Les icône par défaut d’OSM ne sont pas très jolies. Dans un prochain article je vous expliquerai comment utiliser une icône personnalisée.