Examen du plug-in MapSVG: créez des cartes interactives dans WordPress

Examen du plug-in MapSVG: créez des 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ète, 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 et lisez jusqu’au bout. C’est vraiment une bonne affaire, alors prenez une tasse de café et roulons.

Cartes interactives MapSVG pour WordPress

Présenté par le développeur extraordinaire 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 je devais d’abord 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 (pays) cliquables. Ensuite, vous avez des cartes des 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, téléchargez le fichu truc et personnalisez-le.

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 pencher en arrière.

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 avec des informations offrant à vos visiteurs web une expérience immersive.

À des fins d’illustration, supposons une minute 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 trucs 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, par exemple un état, les détails sont affichés dans un joli popover, une vue détaillée ou une info-bulle.

Répertoire filtrable et consultable

Comme si l’ajout d’objets de base de données ne suffit pas, MapSVG vous permet de créer un répertoire et de l’afficher à côté de votre carte. En suivant notre analogie immobilière, vous voudrez peut-être afficher toutes les propriétés (ou agents) disponibles dans un certain état. MapSVG rend cela très possible.

Les utilisateurs peuvent filtrer les éléments du répertoire à l’aide de filtres déroulants ou d’une zone 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 facilite même la compréhension des diagrammes et des cartes les plus complexes. De plus, les utilisateurs peuvent facilement trouver des informations, ce qui est un plus pour votre UX.

Améliorez 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 surmonter ce défi.

Comment? Vous pouvez superposer des cartes vectorielles au-dessus de tout type de carte Google (terrain, satellite, route ou hybride). Et puisque les images vectorielles sont interactives, vous pouvez ensuite modifier votre carte Google jusqu’à ce que vous tombiez. 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 vos utilisateurs fous d’excitation. Ils seront comme, “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 n’importe quoi cliquable.

Éditeurs CSS, JavaScript et modèles

À quoi sert une carte que vous ne pouvez pas personnaliser ou étendre? Roman semble avoir mis cela à la terre avec des éditeurs CSS et JavaScript astucieux. Tant que vous connaissez votre 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 des info-bulles, des 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 obtenez 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 couplée avec facilité du début à la fin.

En plus de cela, le plugin est livré avec une fonction d’aperçu en direct qui vous permet de voir vos modifications en temps réel. 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 images cliquables 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. Il suffit de dessiner un fichier SVG, de le télécharger et de le personnaliser.

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 géniaux qui vous permettent de créer des cartes interactives (cliquables) à partir d’images raster. Comment 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.

Merci à ces fonctionnalités et incroyable soutien, 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, car MapSVG est un plugin de carte sans fioritures (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 tout autre plugin WordPress typique. Vous êtes prêt à commencer à créer des cartes interactives dès que vous installez et activez le plug-in. Vous n’avez rien à configurer car MapSVG fonctionne dès la sortie de l’emballage.

Obtenez MapSVG

Prenons une expérience pratique. Prenez une copie de MapSVG et suivez les instructions suivantes. Connectez-vous à votre tableau de bord administrateur WordPress et accédez à Plugins> Ajouter un nouveau.

examen du plugin mapsvg wordpress

Ensuite, appuyez sur le Télécharger bouton (1)Choisissez un fichier (2), et a frappé le Installer maintenant (3) bouton comme indiqué ci-dessous.

Avis sur mapsvg

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

examen de mapsvg

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

mapsvg

Jusqu’ici tout va bien, je pense que vous conviendrez que le processus est simple. Sur le panneau de commande, 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 Google map.

Si vous avez besoin d’aide pour créer une carte, vous pouvez obtenir une aide rapide en cliquant sur Tutoriels ou Soutien liens en haut du panneau de commande. Choisissons l’une des cartes préexistantes. J’irai avec la Chine parce que tout y est fait de toute façon de nos jours ��

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

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

Choisissez la Chine (ou toute autre carte que vous aimez) 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éation d'une nouvelle carte dans mapsvg

Sur l’écran suivant, remplissez le Titre et changer le Texte du préchargeur 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, donc ne touchez pas le cadran), activer les info-bulles et les popovers entre autres choses.

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

Laissez-nous changer certaines couleurs et avoir une idée du plugin. Aller vers Menu> Couleurs comme indiqué ci-dessous.

modification des couleurs de la carte dans le plugin mapsvg wordpress

le Couleurs écran 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. Travaillez 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 de frapper le Enregistrer Ctrl + S bouton 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. Modifier n’importe quelle autre partie de la carte est tout aussi facile, et pour prouver mon point, je vais ajouter des info-bulles parce que ce serait amusant.

Ajout d’infobulles dans MapSVG

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

Soit dit en passant, si quelque chose n’est pas clair pour une raison ou une autre, n’hésitez pas à consulter le site officiel Tutoriels et documentation MapSVG. Mieux encore, cliquez sur la section des commentaires à la fin de ce post et je vais invoquer Thor juste pour toi. Ce marteau résout tout ��

Cela mis à part, l’ajout d’infobulles implique l’ajout d’un modèle (rappelez-vous l’éditeur de modèles que nous avons mentionné précédemment?). Pour cela, accédez à Menu> Modèles puis choisissez Info-bulle sur la région. 

ajout d'infobulles dans le plugin mapsvg wordpress

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

Province: {{Titre}}

Le code ci-dessus est du HTML simple avec Étiquettes de guidon. Si vous souhaitez afficher uniquement le titre de votre région, 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 info-bulles.

Aller vers Menu> Paramètres et allumez le Info-bulles comme nous l’illustrons ci-dessous.

Avis sur 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 d’enrichir vos info-bulles de manière inimaginable. Imaginons que vous souhaitiez ajouter des photos et plus d’informations à vos info-bulles. Comment vous y prendriez-vous? Pour cela, nous appelons objets de base de données nous l’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 ajouter d’autres champs personnalisés. Vous avez un choix de champs personnalisés, y compris texte, zone de texte, case à cocher, images, etc. Ajoutons quelques images à la province de Nei Mongol.

Aller à Menu> Régions et cliquez sur le Modifier les champs bouton comme nous le soulignons dans l’image ci-dessous.

ajout de champs personnalisés dans MapSVG

Sur l’écran suivant, appuyez sur le Image puis le bouton Enregistrer les champs bouton comme indiqué ci-dessous.

Enregistrez vos modifications en cliquant sur le Enregistrer Ctrl + S bouton. N’oubliez pas de sauvegarder vos modifications.

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

Transformez votre carte en 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 Feuilleter bouton. Voir l’image ci-dessous.

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

Vous serez redirigé vers le Modifier les régions écran où vous devez cliquer sur le OK (1) bouton. Ensuite, cliquez sur le Enregistrer Ctrl + S (2) bouton, puis revenir à 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-le bien cette minute.

Aller vers Menu> Modèles> Info-bulle sur la région et changez le code en ceci:

Province: {{Titre}}
Première image:


Toutes les images:
{{#chaque image}} {{/chaque}}

Voici une image pour plus d’illustration. N’oubliez pas de frapper le sauver bouton.

Maintenant, essayez de passer la souris sur votre région sélectionnée (Nei Mongol dans notre cas). Dis moi ce que tu vois. C’est ce qui est sur mon écran.

Assez bien, non? Vous venez d’apprendre à ajouter des champs personnalisés à vos cartes MapSVG. L’ajout de popovers et de marqueurs est également aussi simple que la tarte. De plus, tant que vous connaissez ces notions de base, vous pouvez 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, cliquez sur publier et voir 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 MapSVG WordPress et lui donner 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. À votre santé!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map