Créer la carte de mes voyages pour mon blog

CartographieBlogVoyage

5 months ago

Carte affichée en page d'accueil d'un blog

Dans cet article, nous allons tenter de répondre au mieux à la question suivante :

Comment cartographier vos voyages sur votre blog ?

Si vous êtes blogueur dans le domaine du voyage et que vous avez l'habitude de raconter vos aventures, vous trouverez sûrement utile de créer une carte qui présente les destinations dans lesquelles vous vous êtes rendus.
Une carte permet aux lecteurs de trouver plus rapidement les destinations que vous présenterez sur votre blog, et donc les articles que vous avez écrits, mais permet aussi de se rendre compte de l'évolution de votre connaissance du monde.
Cet article a pour objectif de vous présenter les différentes façons de faire une telle carte, leur coût, leurs avantages et inconvénients.

Avant de commencer j'aimerais préciser que la meilleure façon de faire ne sera pas la même pour tout le monde. Elle va dépendre de plusieurs paramètres comme le temps que vous avez à y accorder, le budget que vous avez, vos compétences en développement, etc...

Ok, donc vous voulez créer la carte de vos voyages la plus parfaite possible, pour permettre à vos utilisateurs de trouver vos destinations le plus rapidement possible, ou simplement parce qu'avoir une carte permet de visualiser tous les pays dans lesquels vous vous êtes rendus ?

Commençons par lister les principales options que peut contenir une carte :

Personnalisation du fond de carte
Personnalisation des points / marqueurs / pins de chaque destination (taille, couleur, icône, forme)
Rendre possible le groupement des points pour améliorer la lisibilité de la carte (et que les points ne se chevauchent pas)
Rendre la carte interactive avec la possibilité de se déplacer, zoomer et cliquer sur les points pour accéder à des articles de blog
Avoir la possibilité d'ajouter facilement un voyage à la carte
Placer la ville dans laquelle vous habitez, ajouter votre position actuelle et éventuellement la ville ou le pays dans lequel vous irez par la suite
Étendre la carte en plein écran
Avoir un système de scroll intelligent (pour ne pas perturber le défilement du site)
Améliorer l'expérience utilisateur. Ça passe par plusieurs points comme le fait de pouvoir naviguer facilement sur la carte, lui permettre d'accéder rapidement aux articles, bref en limitant le nombre de clics nécessaires pour arriver à sa fin
Avoir une carte performante, tant pour le référencement du site web que pour l'expérience du lecteur
En bonus: Ajouter les pays que vous avez visité en les coloriant d'une couleur, ajouter les meilleures photos ou vidéos de chaque voyage et les rendre accessibles simplement au visiteur.

Et voilà, on a fait le tour des possibilités, si vous avez d'autres suggestions, n'hésitez pas à me les envoyer à contact@traveledmap.com

Maintenant que vous avez fait votre sélection de fonctionnalités parmi la liste ci-dessus, voyons quelles solutions existent pour cartographier vos voyages sur votre blog, et voyons laquelle vous conviendra le mieux.

TL;DR

En bref, choisir la façon de cartographier ses voyages est très facile et dépend tout simplement du temps que vous voulez y consacrer :

Développer sa propre Carte de A à Z peut-être utile pour les développeurs mais peut-être très chronophage pour les personnes avec peu d'expérience dans le domaine du développement.
Créer sa carte via un logiciel de PhotoMontage comme Photoshop. Cela peut produire des résultats magnifiques mais demande des connaissances dans ces logiciels parfois très complexes...
Générer sa carte avec le service Google MyMap permet l'intégration de celle-ci très facilement grâce à un élément iFrame mais la personalisation n'est pas forcément complète..
La dernière solution est la plus envisageable car elle est très complète et résout tous les problèmes vus au-dessus. TraveledMap est l'outil qu'il vous faut pour raconter vos histoires de voyages et vous offre la personnalisation et l'expérience la plus complète pour l'utilisateur !

Je vous conseille d'en apprendre plus sur TraveledMap et de son utilisation en cliquant juste ici.

1. Développer sa propre carte

Pour avoir échangé avec plusieurs blogueurs qui créent leur blog, je sais qu'une des premières idées qui vient en tête est de développer soi-même une carte à l'aide de technologies comme Mapbox, Google Maps, Openstreetmap et Leaflet.

Comment ça marche ?
Des entreprises comme Mapbox ou Google proposent des outils de développement qui vont permettre d'afficher une cartographie sur un site web. Pour ça, il faut se créer un compte, récupérer son identifiant d'utilisation de l'outil choisi (souvent appelé "Private Key". Pour MapBox, elle peut commencer par "pk.eyLzdkonZnecie..." par exemple) et commencer à développer.
La première étape va toujours consister à installer le SDK (kit d'aide au développement) de l'outil choisi dans votre site web.

Attention, veuillez noter que selon la plateforme que vous utilisez pour l'hébergement de votre blog (WordPress.com, Wix, etc...) Il n'est pas toujours possible d'inclure des scripts, donc d'installer un SDK, donc d'utiliser cette solution. En effet, certains hébergeurs comme WordPress.com décident de ne pas laisser leurs utilisateurs inclure des scripts car certains d’entre eux pourraient être dangereux pour votre blog. Pour WordPress.com, cela ne concerne que les abonnements premiums et inférieurs.

Ensuite, il vous faudra suivre les différentes documentations (voici celles de Mapbox et Google) pour créer, intégrer une carte, puis développer la logique qui permettra d’afficher les différents points représentant vos voyages. Pour un bon développeur, créer une carte qui respecte la plupart de nos exigences prendra une bonne dizaine de jours s’il n’y a pas d’interface de création de voyages, soit une dépense de 5 000€ minimum auprès d’un studio de développement. Pour ajouter une interface de création de voyage et de personnalisation des marqueurs, comptez une vingtaine de jours supplémentaires (10 000€).
En revanche, une fois la carte développée, vous bénéficierez d’un tiers gratuit de la part de ces fournisseurs jusqu’à une certaine limite, ensuite les vues sur la carte vous seront facturées.

Inclues	Option
	Personnalisation du fond de carte
	Personnalisation des points / marqueurs / pins de chaque destination (taille, couleur, icône, forme)
	Rendre possible le groupement des points pour améliorer la lisibilité de la carte (et que les points ne se chevauchent pas)
	Rendre la carte interactive avec la possibilité de se déplacer, zoomer et cliquer sur les points pour accéder à des articles...
	Avoir la possibilité d'ajouter facilement un voyage à la carte
	Placer la ville dans laquelle vous habitez, ajouter votre position actuelle et éventuellement la ville ou le pays
	Étendre la carte en plein écran
	Avoir un système de scroll intelligent (pour ne pas perturber le défilement du site)
	Améliorer l'expérience utilisateur.
	Avoir une carte performante
	Ajouter les pays que vous avez visités en les coloriant d'une couleur
	Ajouter les meilleures vidéos de chaque voyage

TL;DR

En résumé, cette solution n’est certainement pas la plus adaptée à la plupart des lecteurs de cet article, car elle est chronophage et coûteuse si vous n’êtes pas développeur. En revanche, si vous êtes développeur, que vous avez du temps devant vous et que vous souhaitez pousser les fonctionnalités des services de cartographie au maximum, c’est une très bonne solution.

2. Créer une carte basée sur une image statique

Exemple de carte animée montrant les payes visités

Il est aussi possible d’utiliser une image sur laquelle vous pouvez ajouter des points à l’aide d’un logiciel comme Photoshop ou tout autre logiciel de montage d’image. Pour cela, il vous suffit de prendre un fond de carte libre de droits sur Internet et d'y ajouter les villes ou pays que vous avez visité en plaçant des marqueurs personnalisés. Une fois que l’image est disponible, il est possible d’ajouter des surfaces cliquables au-dessus de l’image, avec lesquelles l’utilisateur pourra interagir pour être redirigé vers vos articles de blog. L’ajout des zones cliquables peut-être fait à l’aide des images maps en HTML.

Cette solution est particulièrement intéressante par rapport aux performances qu’elle offre comparé à une carte interactive, cependant elle ne respecte pas une bonne partie de nos conditions, comme vous pouvez le voir sur le tableau suivant :

Inclues	Option
	Personnalisation du fond de carte
	Personnalisation des points / marqueurs / pins de chaque destination (taille, couleur, icône, forme)
	Rendre possible le groupement des points pour améliorer la lisibilité de la carte (et que les points ne se chevauchent pas)
	Rendre la carte interactive avec la possibilité de se déplacer, zoomer et cliquer sur les points pour accéder à des articles...
	Avoir la possibilité d'ajouter facilement un voyage à la carte
	Placer la ville dans laquelle vous habitez, ajouter votre position actuelle et éventuellement la ville ou le pays
	Étendre la carte en plein écran
	Avoir un système de scroll intelligent (pour ne pas perturber le défilement du site)
	Améliorer l'expérience utilisateur.
	Avoir une carte performante
	Ajouter les pays que vous avez visités en les coloriant d'une couleur
	Ajouter les meilleures vidéos de chaque voyage

TL;DR

Créer sa carte via un logiciel de PhotoMontage comme Photoshop. Cela peut produire des résultats magnifiques mais demande des connaissances dans ces logiciels parfois très complexes...

3. Créer une carte avec Google MyMaps

Illustration présentant Google MyMap

Google MyMaps est un service qui propose de créer des cartes, d'ajouter des points dessus, chaque point pouvant posséder un lien externe qui pourra être le lien d'un article de blog. Google MyMaps permet aussi d'intégrer simplement cette carte sur votre site web, à l'aide d'un élément iframe.

Note: une iframe c'est l'intégration d'une page d'un site dans un autre site. C'est une solution très utilisée pour intégrer des cartographies dynamiques car il est très complexe de les intégrer sans.

Inclues	Option
	Personnalisation du fond de carte
	Personnalisation des points / marqueurs / pins de chaque destination (taille, couleur, icône, forme)
	Rendre possible le groupement des points pour améliorer la lisibilité de la carte (et que les points ne se chevauchent pas)
	Rendre la carte interactive avec la possibilité de se déplacer, zoomer et cliquer sur les points pour accéder à des articles...
	Avoir la possibilité d'ajouter facilement un voyage à la carte
	Placer la ville dans laquelle vous habitez, ajouter votre position actuelle et éventuellement la ville ou le pays
	Étendre la carte en plein écran
	Avoir un système de scroll intelligent (pour ne pas perturber le défilement du site)
	Améliorer l'expérience utilisateur.
	Avoir une carte performante
	Ajouter les pays que vous avez visités en les coloriant d'une couleur
	Ajouter les meilleures vidéos de chaque voyage

TL;DR

Avantages et inconvénients : en résumé c'est une de mes solutions préférées car l'interface d'administration de Google MyMaps permet de créer des voyages rapidement, de les intégrer sans aucune connaissance en développement et possède quelques options de personnalisation.
En revanche son défaut principal est d'être peu interactif et d'avoir une expérience utilisateur amoindrie, notamment lors du clic sur un voyage qui ouvrira une colonne à gauche indésirable et non customisable.

4. Créer une carte avec TraveledMap

Extrait d'une Carte Utilisateur

Nous en arrivons donc à la solution que j'ai créée pour pallier aux problèmes des solutions précédentes.

Ce que j'ai voulu faire avec TraveledMap c'est tout d'abord laisser la possibilité aux gens de se créer leur carte de voyages pour conserver leur souvenir en un seul et même endroit. Évidemment l'idée derrière ça était de permettre à ceux qui le souhaitent de partager cette carte sur les réseaux sociaux ou sur leur site.
J'ai donc ajouté beaucoup d'options de customisation pour pouvoir accorder la carte et le site.
J'ai aussi travaillé avec des blogueurs afin de pouvoir répondre aux besoins qu'ils avaient, notamment Alyssa de "my life movie" et Maxence de "virée malin".
Le résultat final permet donc d'inclure très facilement la carte sur son blog, chaque voyage peut diriger vers une page web à l'aide d'interactions simples, et même, si vous le souhaitez, contenir les photos de vos voyages visibles par vos utilisateurs.

Il est possible de modifier le fond de carte, la couleur, l'icône et la taille des marqueurs individuellement, de choisir zoom et un centrage par défaut, de l'étendre en plein écran, etc…

Inclues	Option
	Personnalisation du fond de carte
	Personnalisation des points / marqueurs / pins de chaque destination (taille, couleur, icône, forme)
	Rendre possible le groupement des points pour améliorer la lisibilité de la carte (et que les points ne se chevauchent pas)
	Rendre la carte interactive avec la possibilité de se déplacer, zoomer et cliquer sur les points pour accéder à des articles...
	Avoir la possibilité d'ajouter facilement un voyage à la carte
	Placer la ville dans laquelle vous habitez, ajouter votre position actuelle et éventuellement la ville ou le pays
	Étendre la carte en plein écran
	Avoir un système de scroll intelligent (pour ne pas perturber le défilement du site)
	Améliorer l'expérience utilisateur.
	Avoir une carte performante
	Ajouter les pays que vous avez visités en les coloriant d'une couleur
	Ajouter les meilleures vidéos de chaque voyage

TL;DR

Cette solution est la plus envisageable car elle est très complète et résout tous les problèmes vus au-dessus. TraveledMap est l'outil qu'il vous faut pour raconter vos histoires de voyages et vous offre la personnalisation et l'expérience la plus complète pour l'utilisateur et pour vos amis !