Créer la carte de mes voyages pour mon blog
Dans cet article, nous allons tenter de répondre au mieux à la question suivante:
Comment créer la carte de vos voyages sur votre blog ?
Si vous êtes blogueur dans le domaine du voyage et que vous avez l'habitude de raconter vos aventures, sachez qu'il peut être utile de créer une carte listant tous les voyages que vous avez réalisés.
Une carte permet au lecteur de retrouver facilement toutes les destinations que vous présentez sur votre blog, et donc l'ensemble des articles que vous avez écrits. Elle permet aussi de visualiser l'évolution de votre connaissance du monde.
L'objectif principal de cet article est de vous présenter toutes les différentes manières de créer cette carte, le coût, les avantages et les inconvénients...
Avant de commencer, je souhaite préciser que la meilleure solution ne sera pas la même pour tout le monde. Cela dépendra de plusieurs facteurs : le temps que vous pouvez y consacrer, votre budget, vos compétences en développement, etc...
Ok, donc vous voulez créer la meilleure carte pour permettre à vos lecteurs de trouver vos destinations le plus rapidement possible, ou simplement parce qu'avoir une carte permet de visualiser tous les pays où vous êtes allé ?
Dans cet article, nous faisons référence à une liste de fonctionnalités ou options que la solution de cartographie pourrait offrir, voici la liste :
- 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
Maintenant que vous avez fait votre choix avec la liste ci-dessus, voyons quelles solutions existent pour cartographier vos voyages sur votre blog, et laquelle est la meilleure pour vous.
En bref, choisir la façon de cartographier vos voyages est très simple et dépend simplement du temps que vous voulez y consacrer :
- Développer votre propre carte de A à Z peut être utile pour les développeurs mais peut être très chronophage pour les personnes ayant moins d'expérience dans ce domaine.
- Créer votre propre carte statique via des logiciels comme Photoshop. Cela peut produire un beau résultat mais nécessite des compétences en ce type de logiciel et en CSS, pour placer des éléments cliquables sur une image.
- Générer une carte avec Google MyMaps permet une intégration très simple grâce à un élément iFrame mais la personnalisation est limitée...
- Utiliser TraveledMap est probablement la solution la plus envisageable car c'est un site très complet qui résout les différents problèmes évoqués. TraveledMap vous permet de raconter vos voyages, offre de nombreuses options de personnalisation et une excellente expérience pour vous et vos lecteurs. Vous pouvez en savoir plus ici
Développer votre propre carte
En échangeant avec de nombreux blogueurs qui ont créé leur blog, je sais que l'une des premières idées est de développer une carte soi-même en utilisant des technologies comme Mapbox, Google Maps, Openstreetmap et Leaflet.
Comment ça marche ?
Certaines entreprises comme Mapbox ou Google proposent des outils de développement qui permettent d'afficher une carte sur un site web. Pour cela, il faut créer un compte, obtenir une clé d'accès (également appelée "Private Key". Pour MapBox, elle peut commencer par "pk.eyLzdkonZnecie...") et commencer à développer.
La première étape est toujours d'installer le SDK (Software Development Kit) de l'outil choisi sur votre site.
Attention, selon la plateforme utilisée pour votre blog (WordPress.com, Wix, etc...), il n'est pas toujours possible d'inclure des scripts. En effet, certains hébergeurs comme WordPress.com ne permettent pas l'ajout de scripts car certains pourraient être dangereux. Pour WordPress.com, cela ne concerne que les abonnements premium et inférieurs
Ensuite, vous devrez suivre les documentations (voici celles deMapboxetGoogle) pour créer, intégrer une carte, puis développer l'affichage des différents marqueurs représentant vos voyages. Pour un bon développeur, créer une carte qui répond à nos exigences prendra environ 10 jours s'il n'y a pas d'interface de création de voyage, ce qui représente un coût d'environ 5000 $ en studio de développement. Pour ajouter une interface de création et de personnalisation des marqueurs, comptez environ 20 jours supplémentaires (10 000 $).
D'autre part, une fois la carte créée, vous bénéficierez d'une partie gratuite chez ces fournisseurs jusqu'à une certaine limite, puis vous serez facturé en fonction du nombre de vues de votre carte.
| Inclues | Options |
|---|---|
| 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 |
En résumé, cette solution n'est pas la plus adaptée pour la majorité des lecteurs de cet article, car elle est chronophage et coûteuse si vous n'êtes pas développeur. En revanche, si vous avez les compétences nécessaires, c'est la meilleure façon d'obtenir une carte avec toutes les fonctionnalités que vous souhaitez.
Créer une carte à partir d'une image statique
Exemple d'une carte animée (GIF) montrant les pays visités
Il est également possible d'utiliser une image sur laquelle vous pouvez ajouter des marqueurs en utilisant un logiciel comme Photoshop ou tout autre logiciel d'édition. Pour cela, il suffit de prendre un fond de carte libre de droits sur Internet et d'ajouter les villes ou pays que vous avez visités en plaçant des marqueurs personnalisés. Une fois l'image prête, il est possible d'ajouter des zones cliquables que l'utilisateur peut utiliser pour être redirigé vers vos articles de blog. L'ajout de ces zones peut se faire grâce à des HTML image-maps.
Cette solution est particulièrement intéressante pour ses performances par rapport à une carte interactive, mais elle ne répond pas à une bonne partie de nos critères, comme vous pouvez le voir dans le tableau suivant :
| Inclues | Options |
|---|---|
| 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 |
Créer votre propre carte via un logiciel comme Photoshop peut produire un beau résultat mais nécessite des compétences dans ces logiciels parfois très complexes...
Créer une carte avec Google MyMaps
Google MyMaps est un service qui permet de créer des cartes et d'y ajouter des marqueurs. Chaque marqueur peut avoir un lien externe qui redirige vers un article de blog. Google MyMaps permet aussi d'intégrer facilement cette carte sur votre site grâce à un élément iFrame.
Un iFrame est l'intégration d'une page d'un site dans un autre. C'est une solution couramment utilisée pour intégrer des cartes dynamiques car il est très difficile de les intégrer autrement.
Illustration présentant Google MyMaps
Créer une carte avec Google MyMaps est très simple, car une fois la carte générée sur leur site, vous pouvez simplement copier le lien et ajouter un iframe sur votre site (si c'est un site WordPress, vous pouvez consultercomment ajouter un iframe sur WordPress)
Cependant, le design de leurs cartes n'est pas très attractif et l'expérience utilisateur est limitée car elle est conçue pour un usage très courant.
Voici le récapitulatif des fonctionnalités :
| Inclues | Options |
|---|---|
| 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 |
Avantages et inconvénients : en résumé, c'est l'une de mes solutions préférées car l'interface d'administration de Google MyMaps permet de créer rapidement des voyages, de les intégrer sans compétences en développement et propose quelques options de personnalisation.
Cependant, son principal défaut est de ne pas être très interactif et d'offrir une expérience utilisateur réduite, notamment lorsqu'un voyage ouvre une colonne latérale non désirée et non personnalisable.
Créer une carte avec TraveledMap
Nous arrivons à la solution que j'ai créée pour résoudre les problèmes des solutions précédentes.
Extrait d'une carte utilisateur TraveledMap
Ce que je voulais faire avec TraveledMap, c'est d'abord permettre aux gens de créer leur propre carte de voyage pour conserver leurs souvenirs en un seul endroit. Bien entendu, l'idée derrière cela était de permettre à ceux qui le souhaitent de partager cette carte sur les réseaux sociaux ou leur site web.
J'ai donc ajouté de nombreuses options de personnalisation pour que la carte s'intègre parfaitement au site.
J'ai aussi travaillé avec des blogueurs pour répondre à leurs besoins, notamment Alyssa de "my life's a movie" et Maxence de "viree malin".
Le résultat final permet d'inclure très facilement la carte sur votre blog (avec iframe, comme Google MyMaps). Chaque voyage peut rediriger vers une page web via des interactions simples, et peut même, si vous le souhaitez, contenir des photos de vos voyages visibles par vos utilisateurs.
Il est possible de personnaliser le fond de la carte, la couleur, l'icône et la taille de chaque marqueur, de choisir un zoom et un centrage par défaut, d'étendre en plein écran, etc…
| Inclues | Options |
|---|---|
| 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 |
Cette solution est la plus envisageable car elle est très complète et résout tous les problèmes évoqués ci-dessus. TraveledMap est un outil incroyable si vous souhaitez raconter vos voyages. Il offre de nombreuses options de personnalisation et la meilleure expérience pour vous et les visiteurs de votre site !