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.

En relation  Comment créer une bordure pour vos images dans WordPress

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.