Afficher une carte OpenStreetMap dans WordPress avec Ultimate Maps

Google Maps ou OpentStreetMap ?

Avant de passer à la pratique prenons un instant pour questionner les habitudes et les solutions de facilité. Cela peut éviter de perdre du temps à résoudre de futurs problèmes, comme par exemple : préserver la vie privée des visiteurs, optimiser la vitesse son site…

Dès qu’il s’agit d’afficher une carte sur un site web, on pense Google Maps. Gratuit (plus vraiment), connu de tous, simple à utiliser, Google Maps aurait toutes les qualités s’il n’était le cheval de Troie d’un système d’analyse des comportements qui n’est sûrement pas notre ami.

Pourtant, il existe une alternative à Google Maps qui, à l’instar de Wikipédia, a pour vocation le bien commun. Il s’agit d’OpenStreetMaps : un système gratuit, sous licence libre, qui propose quelques options bien pratiques.

Dans l’article Comment ajouter une carte OpenStreetMap à WordPress ? publié en novembre 2018 j’expliquais les raisons pour lesquelles il me semblait nécessaire d’abandonner Google Maps au profit d’OpenStreeMap. Je ne vais pas revenir ici sur ces arguments puisque ils sont encore d’actualité. Si vous voulez en savoir plus, je vous invite à lire l’article en question.

L’article expliquait comment mettre en place une carte OpenStreetMap à l’aide de l’extension OSM – OpenStreetMap. Depuis, j’ai découvert une autre extensions gratuite bien plus simple et plus évoluée qu’OSM. Il s’agit d’Ultimate Maps. Voyons comment ça marche.

Intégrer une carte OpenStreetMap dans WordPress avec Ultimate Maps : facile !

Ultimate Maps est une extension gratuite que l’on peut installer à partir de la bibliothèque d’extension de son site WordPress (Tableau de Bord > Extensions > Ajouter).

Elle permet d’afficher très facilement une carte dans un article ou une page.

Après avoir configuré une carte avec Ultimate Maps (point central, dimensions, aspect), il suffit d’insérer son code court (shortcode) à l’endroit où l’on veut afficher la carte.

Ulitmate Maps permet de placer un ou plusieurs marqueurs sur la carte et de leur associer une fenêtre surgissante (Pop-Up) avec le contenu que l’on souhaite.

Accéder à Ultimate Maps

Après avoir installé et activé Ultimate Maps, une rubrique « Ultimate Maps by Supsystic » apparaît dans la colonne de gauche du tableau de bord. Cliquez sur le sous-menu « Ajouter une carte ».

Comment créer et afficher une carte avec Ultimate Maps

À partir de l’onglet « Ajouter une carte » il est facile de créer la carte que l’on veut.

1. Donnez un nom à la carte,
2. Choisissez les dimensions,
3. La carte sera centrée sur un point que l’on définit avec le champ « Point central ». Il permet de saisir une adresse ou des coordonnées (latitude et longitude). Il est aussi possible de déplacer la carte avec la souris pour la centrer manuellement,
4. Enregistrez la carte.

Une fois la carte enregistrée, le code court (shortcode) apparaît.

Pour afficher la carte, il suffit de coller le code court dans l’article ou la page où l’on veut la voir apparaître.

Changer l’aspect de la carte

Il sera par la suite possible de revenir sur la carte et modifier ses réglages.

La zone « Type de carte » donne accès à un grand nombre de styles pour choisir l’aspect de la carte.

Exemples de types de carte.

Ajouter un marqueur sur une carte

Ultimate Maps offre la possibilité d’ajouter très facilement un ou plusieurs marqueurs sur une carte.

L’ajout se fait à partir de l’onglet « Marqueurs » d’une carte.

1. Donnez un nom au marqueur,
2. Ajoutez une description composée de texte, image, lien… Le marqueur s’affiche de façon dynamique sur la carte. Il est aussi possible de le déplacer manuellement,
3. Choisissez l’icône du marqueur parmi une quarantaine d’images ou téléverser l’icône de votre choix,
4. Enregistrez le marqueur.

En conclusion

Ultimate Maps permet de configurer des cartes et des marqueurs assez facilement. Une fois la carte insérée dans la page de destination avec un code court (shortcode) la carte et ses marqueurs sont modifiables depuis l’interface de gestion d’Utlimate Maps.

Ultimate Maps offre d’autres fonctionnalités utiles (régler le zoom, grouper des marqueurs, importer / exporter des cartes et des marqueurs…). Il existe aussi une version Pro qui permet d’afficher la liste des marqueurs (en) à côté de la carte, ou d’ajouter des formes sur une carte (en) pour mettre en évidence une zone.

A noter qu’il est possible d’utiliser d’autres moteurs de cartes que OpenStreetMap : Bing maps, Leaflet maps, Mapbox et Thunderforest.

Pour en savoir plus vous pouvez vous référer à la documentation que l’on trouve sur sur le site de WordPress à propos d’Ultimate Maps ou sur le site de l’éditeur Supsystic.

La documentation et l’interface de l’extension ont été traduits en français par mes soins. Si vous constatez des erreurs, merci de me les signaler.

Bonne cartographie.