Wordpress

Plugin MapSVG : Cartes interactives dans WordPress

MapSVG est un plugin WordPress astucieux qui vous aide à créer des cartes interactives et réactives sur votre site WordPress. Grâce à une suite de fonctionnalités intéressantes, vous pouvez convertir n'importe quel fichier SVG en une carte interactive. Ce n'est pas tout, vous pouvez créer des plans d'étage détaillés, des infographies, des cartes Google, des cartes Chloroplèthes, des cartes-images et bien plus encore.

Dans cette revue, nous examinons les fonctionnalités qui font de MapSVG l'un des meilleurs plugins de cartographie pour WordPress sur le Web. Nous testons également le plugin, alors restez dans les parages et lisez jusqu'à la fin. C'est définitivement une bonne affaire, alors procurez-vous une tasse de café et c'est parti.

Cartes interactives MapSVG pour WordPress

Présenté par l'extraordinaire développeur Roman Stepanov, MapSVG rend la création de cartes interactives facile et amusante. J'ai passé un bon moment à jouer avec les différentes options même si j'ai d'abord dû lire la documentation. Cela étant dit, regardons les fonctionnalités disponibles dans MapSVG.

Plus de 100 cartes prêtes

Pour vous aider à démarrer, MapSVG est livré avec plus de 100 cartes géo-calibrées. Il existe une carte du monde, et elle est déjà subdivisée en régions cliquables (pays). Ensuite, vous avez des cartes de pays avec les états/provinces respectifs. Vous obtenez également quelques cartes spéciales.

Et comme la plupart des cartes sont calibrées, vous pouvez ajouter des marqueurs aux cartes en utilisant une adresse ou des coordonnées. En plus de cela, vous pouvez créer vos propres cartes SVG et les télécharger sur MapSVG.

Tout ce que vous avez à faire est de créer une image SVG à l'aide de n'importe quel logiciel d'édition vectorielle tel qu'Inkscape ou Adobe Illustrator, de télécharger la fichue chose et de la personnaliser.

Savez-vous ce que cela signifie? Cela signifie que vous pouvez concevoir des diagrammes interactifs et visualiser des statistiques (et généralement améliorer l'expérience utilisateur) sans vous plier en quatre.

Objets de base de données

MapSVG vous permet de créer des objets et de les ajouter à des zones spécifiques de votre carte. Cela vous permet d'enrichir vos cartes d'informations offrant à vos visiteurs une expérience immersive.

À des fins d'illustration, supposons un instant que vous êtes un agent immobilier avec des propriétés à vendre dans tout le pays. Vous vous en sortez très bien et souhaitez afficher les propriétés disponibles sur une carte. Vous souhaitez afficher des informations telles que la taille, l'adresse, le prix, des photos et des choses comme ça.

MapSVG vous permet d'ajouter ces détails à une base de données, puis de joindre les informations à une ou plusieurs zones de votre carte. Chaque fois qu'un utilisateur clique sur la zone que vous définissez, disons un état, les détails sont affichés dans une jolie fenêtre contextuelle, une vue détaillée ou une info-bulle.

Répertoire filtrable et consultable

Comme si ajouter des objets de base de données ne suffisait pas, MapSVG vous permet de créer un répertoire et de l'afficher à côté de votre carte. En suivant notre analogie avec l'immobilier, vous souhaiterez peut-être afficher toutes les propriétés (ou agents) disponibles dans un certain état. MapSVG rend cela tout à fait possible.

Les utilisateurs peuvent filtrer les éléments du répertoire à l'aide de filtres déroulants ou d'un champ de recherche. De plus, les utilisateurs peuvent filtrer les objets en cliquant sur une zone spécifique de la carte. Cette fonction de répertoire rend même les diagrammes et les cartes les plus complexes faciles à comprendre. De plus, les utilisateurs peuvent trouver facilement des informations, ce qui est un plus pour votre UX.

Améliorer Google Maps

Ai-je mentionné que vous pouvez intégrer MapSVG avec Google Maps ? Oui, vous pouvez et vous avez juste besoin d'une clé API Google. En règle générale, vous ne pouvez pas personnaliser Google Maps de manière approfondie, ce qui est ou peut être limitatif dans certains scénarios. MapSVG vous permet de relever ce défi.

Comment? Vous pouvez superposer des cartes vectorielles sur tout type de Google Map (terrain, satellite, route ou hybride). Et comme les images vectorielles sont interactives, vous pouvez alors modifier votre Google Map jusqu'à ce que vous la laissiez tomber. Le résultat final évident ici est que vous êtes en mesure de fournir plus de convivialité.

N'oubliez pas que Google Maps est livré avec un ensemble de commandes. Associez ces commandes aux fonctionnalités de MapSVG et vous rendrez littéralement vos utilisateurs fous d'excitation. Ils diront : "Comment diable ont-ils fait ça ?" Cette fonctionnalité vous permet d'améliorer votre carte Google en mettant en évidence des points de repère et en rendant tout ce qui est cliquable.

Éditeurs CSS, JavaScript et de modèles

À quoi sert une carte que vous ne pouvez ni personnaliser ni étendre ? Roman semble avoir cette base avec des éditeurs CSS et JavaScript astucieux. Tant que vous maîtrisez le code, vous pouvez pousser vos illustrations interactives à la limite.

Pour commencer, vous pouvez styliser vos cartes et diagrammes avec CSS comme vous le souhaitez, et sans transpirer. Vous pouvez styliser de nombreux éléments à partir d'info-bulles, de popovers et d'autres conteneurs d'informations. En plus de cela, vous pouvez tirer parti de la puissance de JavaScript pour étendre la fonctionnalité de carte par défaut.

De plus, vous disposez d'un éditeur de modèles qui vous aide à créer des modèles personnalisés pour les popovers, les marqueurs et les info-bulles. L'éditeur de modèles est facile à utiliser, nous ne nous attendons pas à ce que vous rencontriez des problèmes.

Panneau de configuration intuitif avec aperçu en direct

Travailler avec MapSVG est assez simple grâce à un tableau de bord d'administration intuitif qui facilite la création de cartes. La création de cartes et d'autres illustrations interactives avec MapSVG est associée à une facilité du début à la fin.

En plus de cela, le plugin est livré avec une fonction de prévisualisation en direct qui vous permet de voir vos modifications en temps réel. Maintenant, vous n'avez plus à vous demander à quoi ressembleront vos cartes une fois terminées. De plus, vous n'avez pas besoin d'aller et venir (ou d'actualiser une page) pour voir à quoi ressemblent vos cartes. C'est gentil?

Cartes d'images

Nous avons mentionné les cartes d'images il y a quelques minutes, mais j'ai dû couvrir cette fonctionnalité seule car je pense que c'est impressionnant. Nous savons déjà que MapSVG convertit automatiquement les fichiers SVG en cartes interactives. Dessinez simplement un fichier SVG, téléchargez-le et personnalisez-le.

Mais saviez-vous que vous pouvez également créer des cartes à partir d'images PNG et JPEG ? Cela semble intéressant maintenant, non? MapSVG est livré avec des outils de dessin brillants qui vous permettent de créer des cartes interactives (cliquables) à partir d'images raster. En quoi est-ce utile ? Vous pouvez dessiner des plans de maison interactifs, des plans, des itinéraires, des plans de ville, des plans de salle et bien plus encore.

Grâce à ces fonctionnalités et incroyable assistance, rien ne devrait vous empêcher de créer des cartes et des illustrations interactives à partir de cette galaxie. Le ciel est la limite ici les gars puisque MapSVG est un plugin de carte pratique (et probablement le meilleur) pour WordPress.

Comment configurer MapSVG et créer une carte

La configuration de MapSVG est aussi simple que l'installation de n'importe quel autre plugin WordPress typique. Vous êtes prêt à commencer à créer des cartes interactives dès que vous installez et activez le plugin. Vous n'avez rien à configurer puisque MapSVG fonctionne dès la sortie de la boîte.

Obtenir MapSVG

Faisons l'expérience pratique. Prenez une copie de MapSVG et suivez les instructions suivantes. Connectez-vous à votre tableau de bord d'administration WordPress et accédez à Plugins> Ajouter nouveau.

examen du plugin wordpress mapsvg

Ensuite, appuyez sur le Télécharger bouton (dans la fenêtre de contrôle qui apparaît maintenant) (1)Choisissez Fichier (2), et appuyez sur la Installer maintenant (3) bouton comme indiqué ci-dessous.

avis mapsvg

Attendez la fin du processus d'installation, puis cliquez sur le bouton Activer le plugin .

revue mapsvg

Et c'est tout; le plugin est prêt à être utilisé après l'activation. Clique sur le MapSVG élément sur l'administrateur WordPress pour lancer le panneau de configuration.

cartesvg

Jusqu'ici tout va bien, je pense que vous conviendrez que le processus est simple. Sur le panneau de configuration, vous pouvez choisir l'une des cartes prédéfinies, créer une carte Google (nécessite d'abord l'intégration, ce qui est aussi simple que de copier-coller une clé API), créer une carte-image, télécharger un fichier SVG ou télécharger un Fichier SVG avec carte Google.

Si vous avez besoin d'aide pour créer une carte, vous pouvez obtenir une aide rapide en cliquant sur Tutoriels or Assistance liens en haut du panneau de configuration. Choisissons l'une des cartes préexistantes. j'irai avec la Chine car tout y est fait de nos jours de toute façon ????

N / B: Le développeur recommande d'utiliser géo-calibré des cartes au lieu de non calibré cartes parce que…

… les cartes géocalibrées sont plus récentes, ont des titres de région et vous pouvez ajouter des marqueurs par géo-coordonnées (latitude/longitude) ou simplement en entrant une adresse qui est automatiquement convertie en coordonnées. – Tutoriels MapSVG

Choisissez la Chine (ou toute autre carte que vous aimez) dans le Nouvelle carte SVG menu déroulant. Si vous détestez la barre de défilement, n'hésitez pas à utiliser le champ de recherche.

créer une nouvelle carte dans mapsvg

Sur l'écran suivant, remplissez le Titre et changez le Texte de préchargement si vous êtes si enclin. Sur le même écran, vous pouvez définir la taille de votre carte, désactiver la conception réactive (elle est activée par défaut, alors ne touchez pas le cadran), activer les info-bulles et les popovers, entre autres.

Vous remarquerez également que la carte est déjà divisée en régions (les provinces chinoises dans notre cas) et elles sont déjà cliquables ! Familiarisez-vous également avec les autres commandes, y compris le Menu menu déroulant.

Changeons quelques couleurs et ayons une idée du plugin. Aller vers Menu > Couleurs comme indiqué ci-dessous.

éditer les couleurs de la carte dans le plugin wordpress mapsvg

La Couleurs screen vous aide à choisir les couleurs de vos rêves. Ce que je veux dire, c'est qu'il n'y a pas de limite aux couleurs que vous souhaitez utiliser. Utilisez simplement le sélecteur de couleurs jusqu'à ce que vous ayez quelque chose que vous aimez. J'irai avec des nuances de bleu parce que WordPress est bae ????

Choisissez vos couleurs et n'oubliez pas d'appuyer sur Enregistrer Ctrl+S comme nous l'illustrons ci-dessous.

Voir? Je vous ai dit que MapSVG est facile à utiliser. En quelques clics, j'ai changé les couleurs de ma carte et ça fait du bien - juste comme ça une fois, il y a de nombreuses années, lorsque je me suis classé premier sur Google. L'édition de n'importe quelle autre partie de la carte est tout aussi facile, et pour prouver mon point, j'ajouterai des info-bulles car ce serait amusant.

Ajout d'info-bulles dans MapSVG

Alors, comment ajouter des info-bulles qui apparaissent lorsque vous passez la souris sur une région de votre carte ? C'est facile, et je vais vous montrer comment dans un instant.

Au fait, si quelque chose n'est pas clair pour une raison ou une autre, n'hésitez pas à consulter les didacticiels et la documentation officiels de MapSVG. Mieux encore, accédez à la section des commentaires à la fin de cet article et je vais invoquer Thor juste pour toi. Ce marteau résout tout 🙂

Cela mis à part, l'ajout d'info-bulles implique l'ajout d'un modèle (vous vous souvenez de l'éditeur de modèles que nous avons mentionné plus tôt ?). Pour cela, naviguez jusqu'à Menu > Modèles puis choisissez Info-bulle de région. 

ajout d'info-bulles dans le plugin wordpress mapsvg

Ensuite, ajoutez le code suivant dans l'éditeur de modèles et appuyez sur le Enregistrer Ctrl+S bouton comme indiqué ci-dessus.

Province: {{title}}

Le code ci-dessus est du code HTML simple avec des balises Handlebars. Si vous souhaitez afficher uniquement le titre de votre région, vous utilisez la balise {{title}}. Vous pouvez également définir vos propres champs personnalisés, comme vous l'apprendrez dans un instant. Mais d'abord, activons la fonction d'info-bulle.

Accédez à Menu > Paramètres et allumez le Les info-bulles caractéristique comme nous l'illustrons ci-dessous.

avis mapsvg

Comme vous pouvez le voir dans la capture d'écran ci-dessus, nos info-bulles sont actives. Pourtant, j'ai mentionné que je vais vous montrer comment ajouter des champs personnalisés afin que vous puissiez enrichir vos info-bulles de manière inimaginable. Disons que vous souhaitez ajouter des photos et plus d'informations à vos info-bulles. Comment vous y prendriez-vous ? Pour cela, nous faisons appel au objets de base de données nous avons mentionné plus tôt.

Ajout de champs personnalisés via des objets de base de données

MapSVG vous permet d'ajouter des champs personnalisés à vos cartes. Nous avons déjà le champ {{title}}, mais voyons comment nous pouvons ajouter d'autres champs personnalisés. Vous avez le choix entre des champs personnalisés, notamment texte, zone de texte, case à cocher, images, etc. Ajoutons quelques images à la province de Nei Mongol.

Cliquez sur Menu > Régions Et cliquez sur le Modifier les champs comme nous le soulignons dans l'image ci-dessous.

ajout de champs personnalisés dans MapSVG

Sur l'écran suivant, appuyez sur le Image(s) bouton, puis le Enregistrer les champs Comme indiqué ci-dessous.

Enregistrez vos modifications en cliquant sur le Enregistrer Ctrl+S bouton. N'oubliez jamais d'enregistrer vos modifications.

Ensuite, appuyez sur le Liste bouton comme indiqué dans l'image ci-dessous.

Basculez votre carte vers Modifier les régions et cliquez sur une région (nous avons choisi Nei Mongol). Vous devriez voir votre nouveau champ personnalisé (Images) À droite. Frappez le DECOUVREZ bouton. Voir l'image ci-dessous.

Sur l'écran suivant, ajoutez vos images et appuyez sur le bouton Choisir des images .

Vous serez redirigé vers le Modifier les régions écran où vous devez cliquer sur le D'accord (1) bouton. Ensuite, cliquez sur le Enregistrer Ctrl+S (2) bouton puis revenez à Aperçu (3) mode comme indiqué ci-dessous.

Si vous essayez de passer la souris sur Nei Mongol à ce stade, les images n'apparaîtront pas dans l'info-bulle. Pourquoi? Eh bien, nous n'avons pas créé de modèle pour les images. Faisons cela correctement cette minute.

Accédez à Menu > Modèles > Info-bulle de région et remplacez le code par celui-ci :

Province: {{title}}
First image:


All images:
{{#each images}} {{/each}}

Voici une image pour plus d'illustration. N'oubliez pas de frapper le Enregistrer .

Maintenant, essayez de passer la souris sur la région que vous avez sélectionnée (Nei Mongol dans notre cas). Dis moi ce que tu vois. C'est ce qu'il y a sur mon écran.

Plutôt chouette, non ? Vous venez d'apprendre à ajouter des champs personnalisés à vos cartes MapSVG. L'ajout de popovers et de marqueurs est également simple comme bonjour. De plus, tant que vous connaissez ces bases, vous êtes prêt à créer n'importe quelle carte/diagramme interactif sous le soleil.

Travailler avec MapSVG est l'affaire des élèves de quatrième année, d'autant plus que Roman Stepanov offre un excellent support et des conseils incroyables via des tutoriels. Pour afficher votre carte sur votre site WordPress, enregistrez vos modifications et accédez à Pages > Ajouter un nouveau.

Ensuite, appuyez sur le MapSVG comme indiqué ci-dessus et choisissez votre carte. Cela ajoute le shortcode [mapsvg id=”17″ title=”Chine”] à votre page WordPress. Par tous les moyens, n'hésitez pas à ajouter la carte n'importe où sur votre site en utilisant le shortcode. Ne vous inquiétez pas, les cartes que vous créez avec MapSVG sont 100% réactives, ce qui signifie qu'elles auront fière allure sur plusieurs appareils.

Ensuite, appuyez sur publier et voyez les résultats sur le frontend.

Conclusion

Nous serions ici toute la journée si nous examinions chaque fonctionnalité, mais je vous encourage à obtenir votre propre copie du plugin de carte WordPress MapSVG et à lui faire un essai routier. Entre vous et moi, c'est le seul plugin de carte WordPress dont vous aurez besoin.

Vous avez une question ou une suggestion ? N'hésitez pas à nous contacter via la section commentaires ci-dessous. Acclamations!

Articles Relatifs

0 Commentaires
Commentaires en ligne
Voir tous les commentaires
Retour à bouton en haut