Passer au contenu principal

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èthe, des cartes d'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'au bout. C'est vraiment une bonne affaire, alors procurez-vous une tasse de café et roulons.

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 je devais d'abord lire la documentation. Cela étant dit, regardons les fonctionnalités disponibles dans MapSVG.

Plus de 100 cartes prêtes

carte-du-monde-1426850

Pour vous aider à démarrer, MapSVG est fourni 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.

igraal_fr-fr

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

base de données-7409743

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 Web une expérience immersive.

À des fins d'illustration, supposons pendant une minute que vous êtes un agent immobilier avec des propriétés à vendre dans tout le pays. Vous vous débrouillez très bien et vous 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 une belle fenêtre contextuelle, une vue détaillée ou une info-bulle.

Répertoire filtrable et interrogeable

annuaire-9223281

Comme si l'ajout d'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. Selon notre analogie immobilière, vous voudrez 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 de l'annuaire à 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 d'annuaire facilite la compréhension des diagrammes et des cartes les plus complexes. De plus, les utilisateurs peuvent trouver facilement des informations, ce qui est un plus pour votre UX.

Améliorez Google Maps

améliorer-google-maps-5588042

Ai-je mentionné que vous pouviez intégrer MapSVG à 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 sur n'importe quel type de carte Google (terrain, satellite, route ou hybride). Et comme les images vectorielles sont interactives, vous pouvez ensuite modifier votre carte Google jusqu'à ce que vous la déposiez. Le résultat final évident ici est que vous êtes en mesure de fournir plus de convivialité.

N'oubliez pas que les cartes Google sont livrées avec un ensemble de commandes. Associez ces commandes aux fonctionnalités de MapSVG et vous allez littéralement rendre 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 tout ce qui est cliquable.

Éditeurs CSS, JavaScript et modèles

template-editor-3743328

À quoi sert une carte que vous ne pouvez pas personnaliser ou étendre? Roman semble avoir cela fondé sur des éditeurs CSS et JavaScript astucieux. Tant que vous connaissez votre chemin dans le code, vous pouvez pousser vos illustrations interactives à la limite.

Pour commencer, vous pouvez styliser vos cartes et vos diagrammes avec CSS comme vous le souhaitez, et sans transpirer. Vous pouvez styliser de nombreux éléments à partir d'infobulles, de fenêtres contextuelles 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

mapsvg-control-panel-2876658

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 s’accompagne facilement 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

cartes-images-6598966

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 cela est-il 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 Support, 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 simple (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 plugin. Vous n'avez rien à configurer car MapSVG fonctionne dès la sortie de la boîte.

Obtenez MapSVG

Faisons une 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.

installation-mapsvg-wordpress-plugin-6957235

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

téléchargement-mapsvg-wordpress-plugin-2049926

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

activer-mapsvg-plugin-6963317

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

mapsvg-4215488

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 une intégration, ce qui est aussi simple que 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 ou alors Support liens en haut du panneau de contrôle. 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é 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 géo-coordonnées (latitude / longitude) ou simplement en entrant une adresse qui est convertie en coordonnées automatiquement. - 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.

mapsvg-creation-nouvelle-carte-3304382

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 adaptative (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 (provinces chinoises dans notre cas) et qu'elles sont déjà cliquables! Familiarisez-vous également avec les autres commandes, y compris Menu menu déroulant.

nouvelle-carte-dans-mapsvg-2439564

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

édition-couleurs-de-carte-dans-cartesvg-9965526

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 car WordPress est bébé 🙂

Choisissez vos couleurs et n'oubliez pas de frapper le Enregistrer Ctrl + S bouton comme nous l'illustrons ci-dessous.

bleu-chine-8689314

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 - 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, j'ajouterai des infobulles car ce serait amusant.

Ajouter des 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 le site officiel Tutoriels et documentation 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'infobulles implique l'ajout d'un modèle (vous vous souvenez de l'éditeur de modèles que nous avons mentionné précédemment?) Pour cela, accédez à Menu> Modèles puis choisissez Info-bulle de la région. 

ajout d'infobulles dans les cartesvg-4185709

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

Province: {{title}}

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 d'info-bulles.

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

info-bulles dans les cartesvg-3822489

Comme vous pouvez le voir dans la capture d'écran ci-dessus, nos infobulles 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 d'une manière inimaginable. Supposons que vous souhaitiez ajouter des photos et plus d'informations à vos infobulles. Comment procéderiez-vous? Pour cela, nous faisons appel au 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 nous pouvons ajouter d'autres champs personnalisés. Vous avez le choix de champs personnalisés, y compris texte, zone de texte, case à cocher, images, etc. Ajoutons quelques images de 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-des-champs-personnalisés-étape-1-2279687

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

ajout-des-champs-personnalisés-étape-2-1-9692229

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

Frappez ensuite le Lister bouton comme indiqué dans l'image ci-dessous.

list-fields-4790687

Basculez votre carte sur 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 Parcourir bouton. Voir l'image ci-dessous.

ajout-des-champs-personnalisés-étape-3-7796346

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

télécharger-images-7623615

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) puis revenez à Aperçu (3) mode comme indiqué ci-dessous.

ajout de champs personnalisés 5-5415832

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 ça juste cette minute.

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

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


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

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

ajout-des-champs-personnalisés-étape-6-9168249

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

ajout-des-champs-personnalisés-étape-7-8846157

Assez soigné, non? Vous venez d'apprendre comment ajouter des champs personnalisés à vos cartes MapSVG. L'ajout de popovers et de marqueurs est également aussi simple que cela. 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 soutien et des conseils étonnants via des tutoriels. Pour afficher votre carte sur votre site WordPress, enregistrez vos modifications et accédez à Pages> Ajouter nouveau.

afficher-carte-sur-wordpress-page-1228247

Ensuite, appuyez sur le MapSVG comme indiqué ci-dessus et choisissez votre carte. Cela ajoute le shortcode [mapsvg id = "17 ″ title =" Chine "] sur 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 réactives 100%, ce qui signifie qu'elles auront fière allure sur plusieurs appareils.

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

carte-de-chine-5883115

Conclusion

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

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