Dans le passé, l’ajout d’une carte vectorielle à un site WordPress était une tâche compliquée. Modification de fichiers vectoriels, utilisation d’API ou installation de bibliothèques Javascript – l’ajout d’une carte responsive devenait très vite compliqué.
Il y avait une petite poignée de plugins de carte, mais aucun qui faisait le travail sans beaucoup de configuration, ou encore, des connexions API. Mais maintenant, il existe un excellent plugin (et gratuit !) qui fait un travail magnifique de cartographie vectorielle ; il s’appelle Interactive Geo Maps.
Créer une carte des subdivisions du monde, ou une carte d’un pays spécifique avec Interactive Geo Maps est facile. Vous pouvez le faire en 15 minutes, sans API ou sans avoir à manipuler des scripts supplémentaires.
Vous pouvez personnaliser l’apparence des régions, ajouter des infobulles, et même ajouter des URL aux régions pour les rendre cliquables.
Passons en revue les étapes de la création d’une carte pour que vous puissiez voir comment cela fonctionne.
Installation du plugin Cartes géographiques interactives
Rien d’inhabituel ici, suivez simplement les étapes habituelles d’installation du plugin.
Connectez-vous à votre panneau d’administration WordPress.
Dans la colonne de navigation de gauche, passez la souris sur le lien “Plugins” et cliquez sur le lien “Add New”.
Dans la boîte “Rechercher des plugins…”, entrez “Interactive Geo Maps”.
Une fois que vous avez localisé le plugin, cliquez sur le bouton “Installer maintenant”.
Enfin, cliquez sur le bouton “Activer”.
Utilisation des cartes géographiques interactives
La création d’une nouvelle carte vectorielle ne nécessite que quelques étapes.
- Choix de la carte
- Définir les régions
- Publier la carte
Bien qu’il s’agisse des seules étapes requises, nous ajouterons également des marqueurs pour mettre en évidence des emplacements spécifiques dans une région.
Commençons.
Créer une nouvelle carte
Dans la colonne de navigation de gauche, passez la souris sur le lien “Maps” et cliquez sur le lien “Add New”.
Donnez un titre à la carte.
Maintenant, choisissons ce qui sera affiché sur notre carte vectorielle réactive.
Sélectionnez une carte régionale
Par défaut, le plugin affiche une carte du monde. Mais il existe des centaines de cartes parmi lesquelles vous pouvez choisir.
Faites défiler la page “Add New Map” jusqu’à la section “Map Settings”.
Cliquez sur le menu déroulant “Carte à afficher” pour voir les cartes disponibles.
Comme vous le remarquerez, il existe au moins deux versions de la plupart des cartes, “Haute” et “Basse”. Cela fait référence au niveau de détail contenu dans l’image de la carte.
La version “haute” de la carte nécessite un fichier plus important que la version “basse”. Donc, bien sûr, l’image “Haute” sera plus longue à charger.
Vous devrez décider comment équilibrer les détails et les performances de vos cartes. Un site très fréquenté ou un site avec beaucoup de trafic mobile bénéficiera de l’utilisation de fichiers plus petits (“Low”).
Pour cette démonstration, je vais utiliser “World Great Lakes Ultra”. Les fichiers “Ultra” sont encore plus volumineux que les fichiers “High”, mais comme il ne s’agit pas d’un site en direct, cela ne pose pas de problème.
Projection
Le paramètre “Projection” modifie la façon dont la carte est représentée.
Le paramètre “Miller” est la projection par défaut, et je vais le laisser tel quel pour le moment. Mais si vous préférez une projection Mercator, elle est disponible, ainsi que la projection AlbersUSA, si vous travaillez avec une carte des États-Unis.
Vous pouvez ajouter une description dans le champ “Description” pour vous aider à garder la trace de plusieurs cartes. Puisque nous n’en faisons qu’une, je vais laisser ce champ vide.
L’onglet Paramètres visuels
C’est ici que vous définissez certaines des options d’affichage de la carte. Je vais laisser les paramètres par défaut ici, mais vous pouvez les modifier :
-
- Couleur de fond
- Couleur des bordures
- Largeur des bordures
- Hauteur de la carte
- Largeur maximale de la carte
- Famille de polices
Définir les régions sur la carte
Passons maintenant à la partie amusante. C’est ici que nous ajoutons de l’interactivité à la carte.
Si nous sauvegardons la carte avant de définir les régions, elle sera visible, mais il n’y aura pas d’éléments interactifs.
C’est joli, mais ça ne fait rien quand on passe la souris ou qu’on clique. Corrigeons cela.
Cliquez sur l’onglet “Régions”.
Vous verrez la liste des valeurs par défaut, à commencer par les couleurs de remplissage, de survol et de vide. Vous pouvez modifier ces valeurs ici. Je vais laisser les valeurs par défaut.
La valeur suivante est “Click Action”, et nous allons la modifier. Elle contrôle ce qui se passe lorsqu’une région est cliquée.
Nous allons définir l’action du clic sur “Ouvrir l’URL (nouvel onglet)”, de cette façon nous pouvons ajouter des URL cliquables aux régions.
Les valeurs par défaut finales sont d’inclure ou d’exclure des régions.
La saisie des codes de région (nous y reviendrons dans une minute) dans “Inclure les régions” affiche uniquementces régions. Le reste de la carte disparaît.
En entrant les codes de région dans “Exclure les régions”, on supprime complètement ces zones de la carte.
Par exemple, si nous entrons RU dans “Exclure les régions”, la Russie disparaît de notre carte.
Bon, ajoutons une région
Il y a deux façons d’ajouter une région à notre carte. Nous pouvons cliquer sur le bouton “Ajouter une nouvelle région” et en rechercher une, ou sélectionner une région dans la liste de celles disponibles dans la colonne de droite.
Passons en revue chaque méthode, et vous pourrez décider de celle qui vous convient le mieux.
Ajout d’une région en cliquant sur le bouton “Ajouter une nouvelle région”.
Commencez par cliquer sur le bouton “Ajouter une nouvelle région”.
Dans le champ “Nom”, ajoutez le nom de la région.
Commencez à taper le nom de la région dans le champ “Code de la région”, et la sélection de la région s’affiche.
Ici, je tape “Canada”, et vous voyez que la sélection du Canada apparaît en vert, ce qui inclut le code de région (CA). Cliquez sur le champ vert pour ajouter le code pays.
Si vous tapez votre région et qu’aucun code ne s’affiche, cela signifie que la région n’est pas disponible sur la carte. Essayez une région proche, ou consultez la liste dans la colonne de droite.
Le champ “Contenu de l’info-bulle” vous permet de saisir le texte que vous souhaitez voir s’afficher lorsque quelqu’un survole la région.
Dans le champ “Contenu de l’action”, vous pouvez saisir une URL qui s’ouvrira lorsque vous cliquerez sur la région.
Cliquez sur le bouton “Ajouter une nouvelle région”.
Maintenant, le Canada est actif dans notre carte d’aperçu, et si vous passez la souris dessus, vous pouvez voir l’info-bulle.
Ajout d’une région par un clic dans la liste des régions
La deuxième façon d’ajouter une région est de cliquer sur l’icône “+ ” à côté de la région dans la colonne de droite. C’est la méthode que je préfère car elle pré-remplit certains des champs.
Donc, pour ajouter la Suisse, nous allons faire défiler la page jusqu’à ce que nous la trouvions et cliquer sur le +.
Vous pouvez maintenant constater que le nom, le code régional et l’info-bulle sont déjà remplis. Vous pouvez modifier le nom et l’info-bulle, et ajouter une URL d’action.
Cliquez sur le bouton “Ajouter une nouvelle région”.
Vous pouvez continuer à ajouter des régions en utilisant l’une des méthodes suivantes.
Ajouter un zoom à la carte
Après avoir ajouté quelques régions supplémentaires, notre carte commence à être plus complète.
Mais que faire si nous voulons voir certaines régions de plus près ? Il n’y a pas de fonction de zoom par défaut, mais il est facile de l’ajouter.
Allez dans la section “Settings” du plugin et cliquez sur l’onglet “Map Features”.
Cliquez sur le bouton “Zoom” pour l’activer, puis cliquez sur le bouton “Enregistrer”.
Maintenant, lorsque nous visualisons la carte, nous pouvons faire un zoom avant et arrière.
Ajouter des marqueurs de localisation
En définissant nos régions et en ajoutant du texte et des liens, nous obtenons une carte intéressante. Mais nous pouvons la rendre encore meilleure en ajoutant des marqueurs de localisation et des informations.
Dans notre démo, j’ai défini certains pays que j’ai visités, mais comment ajouter les villes ?
Il y a deux façons d’ajouter des marqueurs d’emplacement, et les deux se font dans l’onglet “Marqueurs ronds”.
Premièrement, vous pouvez cliquer sur la carte dans l'”Aperçu de la carte” pour définir un marqueur.
C’est facile et pratique, mais pas très précis.
La deuxième méthode demande un peu plus d’efforts, mais je la préfère pour sa précision. Vous aurez besoin de la latitude et de la longitude de l’emplacement.
Le plugin recommande le site Latitude and Longitude Finder, c’est donc ce que nous allons utiliser.
L’ajout de lieux sera plus facile si vous ouvrez le site Latitude and Longitude Finder dans un onglet séparé.
Nous allons rechercher la latitude et la longitude de la ville que nous voulons marquer, puis passer au plugin.
Dans l’onglet “Marqueurs ronds”, cliquez sur le bouton “Ajouter un nouveau marqueur”.
Vous pouvez voir que les champs sont presque les mêmes que lorsque nous avons ajouté des régions. La seule différence réside dans les champs supplémentaires pour la latitude et la longitude.
Ajoutez un titre et, si vous le souhaitez, une info-bulle et un contenu d’action. (Si vous ajoutez une URL au Contenu de l’action, n’oubliez pas de définir l’Action du clic dans la section ci-dessous).
Copiez et collez ensuite la latitude et la longitude de votre recherche sur le site Latitude and Longitude Finder.
Maintenant, si nous sauvegardons la carte, allons sur notre site et zoomons sur la région, nous pouvons voir le marqueur.
Modification de l’apparence du marqueur
Par défaut, les marqueurs sont de la même couleur que les régions, et je trouve le point un peu gros.
Pour définir une nouvelle couleur de marqueur et rendre le point du marqueur plus petit, modifiez les valeurs par défaut dans l’onglet Marqueurs ronds.
Maintenant, lorsque nous enregistrons la carte, que nous nous rendons sur notre site et que nous zoomons sur la région, le marqueur se détache de la région.
Vous pouvez ajouter autant de marqueurs que vous le souhaitez.
Sachez qu’il peut y avoir un effet négatif sur la vitesse de chargement de la carte lorsque trop de marqueurs sont tracés.
Le nombre de marqueurs “trop nombreux” dépend de votre site, de votre hébergeur, etc. et sera différent pour chaque site Web.
Publier la carte vectorielle
Bon, nous avons vécu beaucoup de choses ensemble, n’est-ce pas ? Il est maintenant temps de rendre notre carte visible sur notre site. Comme vous vous en doutez, il y a plusieurs façons de le faire.
La première méthode consiste à copier le shortcode de la carte dans la page ou l’article où vous voulez qu’elle apparaisse. Le code court se trouve sur la page Cartes :
Ou sur la page Modifier la carte :
Si vous utilisez l’éditeur WordPress Gutenberg, le plugin crée un bloc.
Vous pouvez le trouver dans la section “Widgets”, il s’appelle “Carte”.
Lorsque vous ajoutez le bloc, vous pouvez sélectionner votre carte dans la liste déroulante “Carte à afficher”.
Il n’y a pas vraiment de raison d’utiliser le bloc lorsque vous n’avez qu’une seule carte. Mais si vous en gérez plusieurs, je peux voir où le menu déroulant pourrait être utile.
Que se passe-t-il si vous désinstallez le plugin Cartes géographiques interactives ?
Si vous désinstallez le plugin, les pages et les articles qui utilisaient le plugin seront affectés.
-
- Les cartes créées par le plugin seront supprimées.
- Les shortcodes du plugin cesseront de fonctionner, de sorte que les shortcodes eux-mêmes seront affichés partout où ils ont été utilisés.
Qu’est-ce qu’une carte vectorielle a de si spécial ?
Les images de cartes vectorielles changent d’échelle, ou de taille, mieux que d’autres types de fichiers d’image comme .jpg ou .png. Ces types de fichiers image sont appelés des graphiques “matriciels”. Ils sont constitués de pixels de couleurs différentes. Les graphiques vectoriels, comme les cartes utilisées par ce plugin, sont constitués de points et de chemins, comme un dessin à points.
Lorsque vous agrandissez une image matricielle, elle devient floue car vous “étirez” les pixels individuels à une taille supérieure. Si vous agrandissez un fichier JPG de 72 pixels par pouce à 200 %, ces 72 pixels ne peuvent pas devenir 144 pixels comme par magie. La qualité de l’image est donc compromise.
En revanche, lorsque vous agrandissez une image vectorielle, les lignes entre les points sont redessinées, de sorte que l’image reste lisse. Comme vous pouvez vous y attendre, le redessin a un coût. Le rendu des images vectorielles utilise plus de ressources informatiques que celui des images matricielles.
Malgré le coût informatique, le format vectoriel est idéal pour les cartes, les logos, les graphiques, etc., qui doivent s’adapter à des tailles d’affichage changeantes. Les graphiques vectoriels sont le moyen le plus fiable de garantir la qualité de ce type de mise en page.
Le dernier mot sur les cartes ?
L’API Google Maps est depuis très longtemps le traceur de cartes de référence pour la plupart d’entre nous. Mais le changement récent qui consiste à exiger une carte de crédit pour obtenir une clé API fait que beaucoup de gens cherchent des alternatives.
Si vous souhaitez créer une carte vectorielle gratuitement sur WordPress, le plugin Interactive Geo Maps est la seule solution possible. Il se distingue des autres plugins de cartes vectorielles (peu nombreux, il est vrai) disponibles.
Et maintenant que vous avez vu à quel point il est facile à utiliser, il n’y a aucune raison pour que vous ne puissiez pas créer une carte aujourd’hui. Choisissez votre carte, définissez vos régions et publiez. Il n’y a pas plus simple que cela.
Avez-vous déjà essayé d’intégrer manuellement une carte sur votre site Web ? Avez-vous rencontré d’autres alternatives à l’API Google Maps que nous devrions connaître ? Faites-le moi savoir dans les commentaires.
