Démarrez avec Travelers’ Map – Extension WordPress

English translation here.

Accès rapide :

 

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.

Voici à quoi ressemble la section Travelers’ Map ajoutée à vos pages d’éditions d’articles.

Différentes parties sont présentes :

Latitude et Longitude, comme leurs noms l’indiquent, représentent la position du marqueur sur la carte, et se remplissent automatiquement lorsque vous placez un marqueur sur la carte.

Choose a marker permet de choisir l’image du marqueur qui s’affichera sur la carte. Par défaut, seul un marqueur est disponible. Pour en ajouter d’autres, voir la partie “Personnalisez vos marqueurs“.

La carte en elle même. cliquez directement sur celle-ci pour y placer votre marqueur. Vous pouvez déplacer ce marqueur à l’aide d’un cliqué-glissé, ou bien en cliquant une seconde fois sur la carte.

  • En haut à gauche de la carte se trouvent les boutons de zoom et dé-zoom (vous pouvez également utiliser la molette de votre souris lorsque vous avez cliqué sur la carte une première fois).
  • En dessous se trouve une icône de loupe qui permet de rechercher un lieu. Tapez votre lieu dans le formulaire, des suggestions apparaissent. Cliquez sur l’une d’entre elle pour que votre carte dynamique zoom automatiquement dessus. Il ne vous reste plus qu’à y placer votre marqueur en cliquant sur la carte.

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” > “Customize markers“.

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 “Add new” 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. 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” > “Shortcode Helper“.

Page du Shortcode Helper

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

Le plugin n’étant disponible qu’en anglais pour le moment, voici une traduction point par point, ainsi que quelques explications :

  • Width : La largeur de votre carte. Par défaut “100%”. Ce champ accepte toutes les unitées valides en CSS. Exemple : “780px” ou “50%”.
  • Height : Hauteur de votre carte. Par défaut “600px”. Ce champ accepte toutes les unitées valides en CSS. Exemple : “500px” ou “25vh”.
  • Les valeurs Max width et Max height ne sont par défaut pas utilisées. Elles représentent la largeur ou hauteur maximale de votre carte. Par exemple, si la largeur de votre carte est de 100%, mais que vous voulez que sa largeur maximale soit de 1200px, vous pouvez assigner un Max width de 1200px. C’est particulièrement utile pour les sites qui s’adaptent au mobile avec une valeur en pourcentage, mais qui ne veulent pas d’une carte gigantesque sur ordinateur.
  • Categories vous permet de sélectionner les catégories que vous voulez afficher sur la carte. Lorsqu’aucune n’est coché, tous les articles sont affichés. Ceci est particulièrement utile si vous voulez afficher vos cartes dans vos pages catégorie. Exemple sur notre site, la catégorie Japon n’affiche que les articles qui lui sont liés.
  • Tags vous permet de sélectionner les étiquettes que vous voulez afficher sur la carte. Son utilisation est similaire à Categories.

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

 

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ées. 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.

Si vous souhaitez soutenir cette extension, n’hésitez pas à rajouter également :
| Built with <a href=”https://wordpress.org/plugins/travelers-map/” target=”_blank”>Travelers’ Map</a>

Une fois terminé, sauvegardez les informations en cliquant sur Save Changes. Vous pouvez réinitialiser les options à leur état d’origine en cliquant sur Reset settings to default.

 

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