Démarrez avec Travelers’ Map – Extension WordPress

English translation here.

Accès rapide :

  1. Géolocalisez vos articles
  2. Personnalisez vos marqueurs
  3. Affichez votre première carte
  4. Filtrez vos articles et changez les dimensions de la carte à l’aide du « Shortcode Helper »
  5. Ajouter plusieurs marqueurs sur un seul article
  6. Changez de fournisseur de tuiles pour personnaliser votre carte
  7. Désinstallez Travelers’ Map et nettoyez votre base de donnée
  8. Documentation pour les développeurs

Géolocalisez vos articles

Une fois l’extension installée et activée sur votre site WordPress, la première étape est de géolocaliser vos articles. Pour se faire, Travelers’ Map ajoute automatiquement une section en bas de la zone d’édition de chaque article.

L’ajout de marqueurs sur un article avec Travelers’ Map

La carte permet de modifier l’emplacement de votre marquer de manière simple et rapide. Vous pouvez faire une recherche, ou tout simplement naviguer dans la carte. Cliquez sur la carte pour placer votre premier marqueur. Il s’affichera alors. Vous pouvez cliquer une nouvelle fois sur la carte pour le déplacer, ou bien avec un cliquer-glisser. Les champs Latitude et Longitude se mettent à jour automatiquement.

Choisissez le marqueur de votre choix dans la seconde partie (à droite de la carte, ou en dessous selon la taille de votre écran).

Par défaut, le marqueur affichera le titre, l’extrait, et l’image mise en avant de votre article. Vous pouvez modifier ces informations en cliquant sur le bouton « Modifier les informations affichées dans l’infobulle ». Si vous remplissez un de ces champs, cette information remplacera celle de l’article dans votre infobulle.

Une fois terminé, n’oubliez pas de publier ou mettre à jour votre article pour sauvegarder les modifications.

Personnalisez vos marqueurs

Pour ajouter des marqueurs, rendez-vous dans le panneau latéral gauche de l’administration WordPress, dans l’onglet « Travelers’ Map » > « Personnaliser les marqueurs« .

Travelers’ Map ajoute 3 sous-menus à votre administration WordPress

Une page similaire à l’ajout d’article s’ouvre. Pour créer un nouveau marqueur, cliquez sur « Ajouter » en haut de la page.
Il vous suffit maintenant d’ajouter un titre, d’ajouter une « Image mise en avant » représentant votre icône personnalisée et de Publier.

Note : préférez le format .png qui permet d’avoir un fond transparent autour du marqueur contrairement au format .jpg. La taille optimale pour un marqueur est 45 pixels sur son côté le plus long.

Affichez votre première carte

Pour afficher une carte sur une page ou un article, vous allez utiliser un shortcode, code court en français. Ce nom désigne un petit code à insérer dans vos pages entre [crochets], et celui-ci s’exécute automatiquement lorsque la page est vue par les visiteurs.

Le shortcode de Travelers’ Map est [travelers-map]. Lorsqu’il est inséré dans le contenu de votre page, il se transforme en une carte dynamique, d’une largeur de 100% de votre contenu et 600 pixels de hauteur. Tous les articles que vous avez précédemment géolocalisé y sont affichés (cf : Géolocalisez vos articles).

Si vous voulez changer la taille de la carte et filtrer les articles à afficher, lisez la partie ci-dessous.

Filtrez vos articles et changez les dimensions de la carte à l’aide du « Shortcode Helper »

Le shortcode de Travelers’ Map accepte également des paramètres. Afin de vous simplifier la tache, une aide est intégrée à l’extension dans l’onglet « Travelers’ Map » > « Assistant code court« .

Page de l’assistant code court

Dans cette page, lorsque vous insérez des paramètres ou filtrez des catégories / étiquettes, le code court en haut de page est automatiquement mis à jour. Une fois terminé, il ne vous reste plus qu’à copier-coller ce code court dans une de vos pages.

Chaque paramètre est expliqué sur la page de l’assistant, prenez le temps de lire toutes les possibilités offertes par l’extension si vous souhaitez le personnaliser au maximum.

Voici par exemple quelques paramètres utiles :

  • this_post=true : affiche uniquement le marqueur de l’article actuel (si le shortcode est ajouté sur vos articles)
  • centered_on_this=true : affiche tous les marqueurs, mais zoom sur l’article actuel au chargement de la page.
  • current_query_markers=true : afficher les marqueurs correspondant à la requête de la page. Par exemple, sur vos pages catégorie, vous pouvez afficher les articles de la catégorie actuelle, sans avoir à changer le shortcode sur toutes vos catégories (exemple sur mon blog).
    Vous pouvez également afficher une carte sur votre page de résultat de recherche. Génial non ?
  • Plus classique, vous pouvez filtrer par catégories (cats=isere,savoie), par étiquette (tags=randonnee), par type de post (exemple: vos produits Woocommerce) et par taxonomies personnalisées (par exemple, vos catégories de produits Woocommerce)

Les filtres peuvent être additionnés, vous pouvez par exemple trier les articles de la catégorie « France » qui ont une étiquette « Bivouac ».

Ajouter plusieurs marqueurs sur un seul article (à venir)

Nouveauté de la version 2 de Travelers’ Map (actuellement en phase de beta test, disponible ici) : Vous pouvez maintenant ajouter plusieurs marqueurs sur un seul article ! Parfait pour les randonnées sur plusieurs jours, ou les visites de villes par exemple. Rendez-vous sur la page d’édition de votre article, dans la section Travelers’ Map.

Cliquez sur « Ajouter un marqueur additionnel » pour ajouter un marqueur.

L’édition du second marqueur s’effectue de la même façon que le premier. Lorsqu’il y a plusieurs marqueurs sur la carte, le clique déplace le marqueur « actif », c’est à dire le marqueur entouré d’un bord bleu. Ce bord entoure l’icône du marqueur sur la carte mais aussi le bloc d’édition du marqueur. Le premier marqueur est obligatoire, il s’agit du marqueur principal.

Ajouter une ancre sur les marqueurs additionnels

Si votre article contient plusieurs marqueurs, il est utile de pouvoir ajouter une ancre dans votre lien. Ainsi, l’utilisateur sera dirigé automatiquement à l’endroit désiré de votre article quand il cliquera sur le lien du marqueur.

Première étape : Ajouter une ancre à l’élément souhaité sur votre page.

Cliquez sur le bloc que vous souhaitez lier à votre marqueur. Rendez vous à droite dans les options du bloc. Dans l’onglet « Avancé », remplissez le champ « Ancre HTML ».

Deuxième étape : rendez-vous dans l’éditeur Travelers’ Map en bas de page, cliquez sur « Modifier les informations de l’infobulle » et remplissez les champs Ancre HTML (#id).


Et voilà, enregistrez votre article et votre marqueur dirigera directement au bon endroit lorsque les utilisateurs cliqueront dessus.

Changez de fournisseur de tuiles pour personnaliser votre carte

Note : Vous avez surement remarqué que la carte sur mon site est différente de la carte par défaut de Travelers’ Map.
La différence est en fait le « fournisseur de tuile ». Les fournisseurs utilisent les données libres d’OpenStreetMap pour créer des cartes, avec chacune leur spécificités. Certaines sont spécialisées dans la randonnées et affichent les courbes de niveau, d’autres sont en noir et blanc.

Pour personnaliser votre carte, rendez-vous dans le panneau latéral gauche de l’administration WordPress, dans l’onglet « Travelers’ Map« .

Page des options

Pour trouver un fournisseur de tuile gratuit, je vous conseille la page de démonstration de Leaflet Providers.

Sur ce site, lorsque vous cliquez sur les différents fournisseurs à droite, la carte change, et toutes les informations que vous devez rentrer dans Travelers’ Map sont disponible :

Résumé des correspondances avec Leaftlet-Providers

Tiles Server URL représente l’adresse des tuiles que la carte va charger. Elle est représentée par L.tileLayer(« Adresse ») sur Leaflet Providers. Si votre fournisseur de tuile requiert une clé API, insérez la directement dans l’adresse, comme indiqué sur leur site. Par exemple l’url du fournisseur Thunderforest ressemble à : https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}
Ici, remplacez {apikey} par votre clé API, sans les acolades.

Tiles Server sub-domains sont les sous-domaines utilisés par votre fournisseur de tuile. Ils sont représentés par « subdomains » sur Leaflet Providers. Si subdomains n’est pas indiqué, entrez abc dans le champ.

Attribution représente le texte affiché en bas à droite de votre module de carte. Il est obligatoire lorsque vous utilisez les données libres d’OpenStreetMap et le module Leaflet. De plus, chaque fournisseur de tuile requiert une attribution. Vous trouverez sur Leaflet Providers l’attribution nécessaire.

Une fois terminé, n’oubliez pas d’enregistrer les modifications. Vous pouvez réinitialiser les options à leur état d’origine en cliquant sur Réinitialiser les réglages par défaut.

Désinstallez Travelers’ Map et nettoyez votre base de donnée

Les données de géolocalisation de vos articles sont sauvegardées en tant que méta-données et ne sont pas supprimées en cas de désactivation ou de suppression de Travelers’ Map. Ceci afin d’éviter qu’un utilisateur perde toutes ses données lorsqu’il désactive par mégarde son extension.

Cependant, si vous souhaitez désinstaller Travelers’ Map définitivement, une option est disponible dans l’onglet « Travelers’ Map« , en bas de la page, pour supprimer toutes les données de géolocalisation de vos articles.

Attention, cette action est irréversible.

Une fois les données supprimées, vous pouvez désinstaller l’extension dans votre onglet « Extensions« .

Documentation Travelers’ Map pour les développeurs

Si vous voulez interagir avec vos cartes sur le front-office en JavaScript, c’est possible depuis la version 1.7.0 de Travelers’ Map ! Découvrez comment avec un exemple.

Interagir avec les objets de carte

Le tableau « cttm_map » contenant tous les objets de carte Travelers’ Map est maintenant défini comme une variable globale, vous pouvez donc interagir avec depuis n’importe où.

J’ai également créé l’évènement « cttm_map_loaded » à écouter pour savoir quand les cartes sont initialisées.

Ci-dessous, un code commenté qui permet d’interagir avec les cartes :

<script>
// Écouter l'évènement pour executer notre code quand les cartes sont initialisées.
document.addEventListener('cttm_map_loaded', function (e) {
  // cttm_map est un tableau de toutes les cartes incluses dans la page
  // Nous lançons une boucle pour interagir avec chacunes d'elles.
  for (let i = 0; i < cttm_map.length; i++) {
    // Vous pouvez maintenant interagir avec les cartes
    cttm_map[i].setView([45.30824,5.85554], 10);
  }
}, false);
</script>

Et voilà, dorénavant, toutes nos cartes sont centrées sur la Dent de Crolles, une magnifique montagne que je vous conseille d’aller voir 😉

Exemple: Ajouter le plugin Leaflet.Locate à mes cartes

Leaflet.Locate est un plugin de Leaflet permettant de rajouter un bouton, afin de géolocaliser les utilisateurs. Il est disponible ici.

Tout d’abord, il est nécessaire de charger les fichiers script et style du plugin dans notre thème wordpress. N’oubliez pas de téléverser les fichiers .css et .js dans les dossiers ‘wp-content/themes/your-theme/css’ et ‘…/js’. Enregistrez-les (register) et chargez-les (enqueue) dans le fichier functions.php de votre thème.

Si vous ne savez pas comment faire, vous pouvez facilement trouver l’information en cherchant sur internet. En dernier ressort, vous pouvez copier-coller le code de cette page dans le tag <head> de votre ficher header.php. Cependant gardez à l’esprit que ce n’est pas la bonne façon de faire.

Maintenant que les fichiers sont chargés, nous allons ajouter le plugin à chaque instance de nos cartes, uniquement après l’initialisation de ces dernières. Pour cela, ajoutez le code javascript ci-dessous dans le fichier script.js de votre thème, ou bien dans un tag <script> juste avant le tag de cloture de votre </body> (généralement dans votre fichier footer.php):

<script>
// Écouter l'évènement pour executer notre code quand les cartes sont initialisées.
document.addEventListener('cttm_map_loaded', function (e) {
  // cttm_map est un tableau de toutes les cartes incluses dans la page
  // Nous lançons une boucle pour interagir avec chacunes d'elles.
  for (let i = 0; i < cttm_map.length; i++) {
    //Nous ajoutons le bouton de localisation sur chacune des cartes de la page.
    L.control.locate({keepCurrentZoomLevel:true}).addTo(cttm_map[i]);
  }
}, false);
</script>

Et voilà ! Vos utilisateurs peuvent maintenant se géolocaliser sur vos cartes Travelers’ Map. Amusez-vous bien 😉