Plugin mapsvg: cartes interactives en WordPress

Mapsvg est un élégant plugin wordpress qui vous aide à créer des cartes interactives et réactives sur le site WordPress. Grâce à un magnifique ensemble de fonctionnalités, vous pouvez convertir n’importe quel fichier SVG en une carte interactive. Ce n’est pas tout, vous pouvez créer des plans détaillés, des cartes d’information, des cartes Google, des cartes de chlorophylle, des cartes d’images, et plus encore. Dans cette revue, nous examinerons les caractéristiques qui font de mapsvg l’un des meilleurs plugins de cartographie pour WordPress sur le Web. Nous avons également testé le plug – in, donc nous l’avons lu jusqu’à la fin. C’est vraiment une bonne affaire, alors servez – vous un café et roulez.
Mapsvg interactive maps WordPress a été créé par un développeur exceptionnel, roman Stepanov. Mapsvg rend la création de cartes interactives simple et intéressante. Bien que je doive d’abord lire la documentation, je m’amuse à jouer avec les différentes options. C’est – à – dire, regardons les fonctionnalités disponibles dans mapsvg. Plus de 100 cartes prêtes Pour vous aider à démarrer rapidement, mapsvg est livré avec plus de 100 cartes géocalibrées. Il existe une carte du monde qui a été divisée en zones cliquables (pays). Vous disposez alors de cartes nationales et de leurs États \/ provinces respectifs. Il y a aussi des cartes spéciales.
Comme la plupart des cartes sont calibrées, vous pouvez les marquer avec des adresses ou des coordonnées. De plus, vous pouvez créer vos propres cartes SVG et les télécharger sur mapsvg. Tout ce que vous avez à faire est d’utiliser n’importe quel logiciel d’édition vectorielle (comme Inkscape ou Adobe illustrator) pour créer des images SVG, télécharger ce satané truc et le personnaliser. Tu sais ce que ça veut dire? Cela signifie que vous pouvez concevoir des graphiques interactifs et visualiser des statistiques, ce qui améliore généralement l’expérience utilisateur, sans avoir à revenir en arrière. Objet de la base de données Mapsvg vous permet de créer des objets et de les ajouter à des zones spécifiques de la carte. Ça vous enrichira.
Le dernier point ici est que vous pouvez fournir plus de disponibilité. N’oubliez pas que Google Maps est livré avec de nombreux contrôles. En combinant ces contrôles avec la fonctionnalité mapsvg, vous excitez vos utilisateurs. Ils diront: \
CSS, Javascript et éditeur de modèles À quoi sert une carte qui ne peut être personnalisée ou étendue? Roman semble avoir une base élégante pour les éditeurs CSS et JavaScript. Tant que vous connaissez le Code, vous pouvez pousser l’illustration interactive à la limite. Pour les débutants, vous pouvez utiliser css pour modéliser des cartes et des graphiques à votre guise sans effort. Vous pouvez modéliser de nombreux éléments en fonction de la description de la commande, des fenêtres contextuelles et d’autres conteneurs d’information. De plus, vous pouvez profiter de la puissance du Javascript pour étendre la fonctionnalité de la cartographie par défaut. De plus, vous pouvez obtenir un éditeur de modèles qui vous aide à créer des modèles personnalisés pour les POP – ups, les étiquettes et les invitations. L’éditeur de modèles est facile à utiliser et nous ne voulons pas que vous ayez des problèmes.
Panneau de contrôle visuel avec aperçu en temps réel Comme la gestion intuitive des tableaux de bord facilite la création de cartes, l’utilisation de mapsvg est en fait très simple. Il est facile de créer des cartes et d’autres illustrations interactives du début à la fin en utilisant mapsvg. De plus, le plug – in fournit un aperçu en temps réel qui vous permet de visualiser les changements en temps réel. Maintenant, vous n’avez plus à vous demander à quoi ressemblera la carte une fois qu’elle sera terminée. De plus, vous n’avez pas à aller – retour (ou mettre à jour la page) pour voir à quoi ressemble la carte. Quel dessert?
Cartes d’images Il y a quelques minutes, nous avons parlé de cartes d’images, mais j’ai dû présenter cette fonctionnalité en personne parce que je la trouvais impressionnante. On le sait déjà.
Fichier SVG avec Google Map. Si vous avez besoin d’aide pour créer une carte, vous pouvez obtenir de l’aide rapide en cliquant sur le tutoriel ou le lien de soutien en haut du panneau de contrôle. Choisissons une carte préexistante. Sans objet: les développeurs recommandent d’utiliser des cartes géocalibrées plutôt que des cartes non calibrées, car… … Les cartes géocalibrées sont plus récentes et ont un titre de zone que vous pouvez marquer pour les coordonnées géographiques (latitude \/ longitude) ou simplement entrer l’adresse qui sera automatiquement convertie en coordonnées. Tutoriel cartes SVG sélectionnez Chine (ou toute autre carte que vous aimez) dans le menu déroulant nouvelle carte SVG. Si vous détestez les barres de défilement, vous pouvez utiliser la boîte de recherche. À l’écran suivant, si vous voulez, remplissez le titre et modifiez le texte du préchargeur. Sur le même écran, vous pouvez définir la taille de la carte, désactiver la conception de la réponse (par défaut, elle est ouverte, donc ne touchez pas le cadran), ouvrir des invitations et des POP – ups, etc. Vous remarquerez également que la carte a été divisée en plusieurs régions (dans notre cas, les provinces de Chine) et que vous pouvez déjà cliquer! De plus, Familiarisez – vous avec d’autres contrôles, y compris les menus déroulants. Changeons de couleur et regardons le plug – in. Allez au menu > couleurs, comme indiqué ci – dessous. L’écran couleur vous aide à choisir la couleur de vos rêves. Je veux dire, il n’y a pas de limite à la couleur que vous voulez utiliser. Il suffit d’utiliser le sélecteur de couleurs jusqu’à ce que vous ayez quelque chose que vous aimez. Je vais choisir l’ombre bleue, car WordPress est BAE pour choisir votre couleur, n’oubliez pas d’appuyer sur le bouton Enregistrer Ctrl + s, comme indiqué ci – dessous. Tu vois? Je t’ai dit que mapsvg est facile à utiliser. En quelques clics, j’ai changé la couleur de la carte et je me sens bien, comme une fois il y a de nombreuses années, quand
Je suis numéro un sur Google. Modifier n’importe quelle autre partie de la carte est tout aussi simple, et pour prouver mon point de vue, j’ajouterai des suggestions parce que ce serait amusant. Ajouter une invite dans mapsvg, comment puis – je ajouter une invite affichée lorsque vous passez le curseur sur une zone de la carte? C’est très simple, je vais vous le montrer tout de suite. Au fait, si, pour une raison ou une autre, ce n’est pas clair, n’hésitez pas à consulter les tutoriels et la documentation officiels de mapsvg. Mieux encore, visitez la section commentaires à la fin de cet article et j’appellerai Thor pour vous. Ce marteau résout tous les problèmes sauf celui – ci, et les suggestions d’ajout incluent l’ajout de modèles (vous vous souvenez de l’éditeur de modèles que nous avons mentionné précédemment?). Pour ce faire, allez au menu > modèles et sélectionnez les infobulles régionales. Ensuite, ajoutez le code suivant dans l’éditeur de modèle et appuyez sur le bouton Enregistrer Ctrl + s, comme indiqué ci – dessus. Province: {Titre}} Le code ci – dessus est un HTML simple avec des étiquettes de poignée. Si vous ne voulez afficher que le titre de la zone, utilisez l’étiquette {title}}. Vous pouvez également définir vos champs personnalisés, et vous le saurez bientôt. Mais d’abord, activons la fonction prompt. Allez au menu > paramètres et ouvrez l’invite comme suit. Comme vous pouvez le voir dans la capture d’écran ci – dessus, nos suggestions sont positives. Cependant, j’ai dit que je vous montrerais comment ajouter des champs personnalisés afin que vous puissiez enrichir vos suggestions d’une manière inimaginable. Supposons que vous vouliez ajouter des photos et plus d’informations à la proposition. Que feriez – vous? Par conséquent, nous utilisons l’objet de base de données mentionné précédemment. L’utilisation de l’objet de base de données mapsvg pour ajouter des champs personnalisés vous permet d’ajouter des champs personnalisés à une carte. Nous avons déjà le champ {title}, mais voyons comment ajouter plus de champs personnalisés. Vous pouvez sélectionner ca
Le MPI personnalisé comprend du texte, des zones de texte, des cases à cocher, des images, etc. Nous avons ajouté quelques images pour la province de Mongolie intérieure. Allez dans le menu > régions et cliquez sur le bouton Modifier les champs, comme indiqué dans l’illustration suivante. Sur l’écran suivant, appuyez sur le bouton Image, puis sur le bouton Enregistrer le champ, comme indiqué ci – dessous. Cliquez sur le bouton Enregistrer Ctrl + s pour enregistrer les modifications. N’oubliez jamais d’enregistrer vos modifications. Appuyez ensuite sur le bouton liste, comme le montre l’image suivante. Changez la carte pour changer la région, puis cliquez sur une région (nous sélectionnons en mongol). Vous devriez voir le nouveau champ personnalisé (Image) à droite. Appuyez sur le bouton parcourir. Voir l’image ci – dessous. À l’écran suivant, ajoutez l’image et appuyez sur le bouton sélectionner l’image. Vous serez redirigé vers l’écran zone d’édition en cliquant sur le bouton OK (1). Ensuite, cliquez sur le bouton Enregistrer Ctrl + s (2) et retournez en mode Aperçu (3), comme indiqué ci – dessous. Si vous essayez de survoler la Mongolie intérieure à ce stade, l’image n’apparaît pas dans l’infobulle. Pourquoi? Nous n’avons pas créé de modèle pour l’image. Faisons – le maintenant. Allez au menu > modèles > zone des conseils d’outils et changez le Code comme suit: Province: {Titre}} Première image: Toutes les images: ♪ Every image ♪
Voici une image pour plus d’explications. N’oubliez pas d’appuyer sur le bouton Enregistrer.
Essayez maintenant de survoler la zone sélectionnée (dans notre cas, mongole). Dis – moi ce que tu as vu. C’est ce que j’ai à l’écran. C’est propre, non? Vous venez d’apprendre comment ajouter des champs personnalisés à une carte mapsvg. Même ajouter du pop – corn et un marqueur est facile. De plus, tant que vous connaissez ces bases, vous pouvez créer n’importe quelle carte \/ carte interactive au soleil. L’utilisation de mapsvg est une question pour les élèves de quatrième année, en particulier