Création de cartes interactives dans WordPress avec MAPSVG

Le plugin WordPress MAPSVG vous permet de créer rapidement et facilement des cartes interactives riches en fonctionnalités. Les cartes interactives sont une exigence commune pour les projets lorsque vous avez besoin de visualiser l'impact d'un emplacement spécifique. Si vous utilisez déjà WordPress, ce plugin puissant pourrait être votre solution pour créer des cartes qui peuvent être mises en production.

Rappelez-vous votre dernière expérience de mise en œuvre ou de planification d'une carte interactive. Vous pouvez estimer qu'il faudra beaucoup de temps pour cartographier les données de la source d'origine dans JSON, puis la connecter à un cadre visuel (comme D3). Vient ensuite de configurer la façon dont les utilisateurs interagissent avec la carte elle-même. Ce sont de nombreux efforts de développement.

Vient ensuite une question sur la façon de gérer les données de la carte. Les données sont-elles stockées dans un fichier externe? Dois-je appeler régulièrement l'API pour obtenir des données? La gestion de ces données directement dans le panneau d'administration WordPress de votre site Web est beaucoup plus facile, tout comme la gestion de tous les autres contenus du site Web. Pas besoin d'ouvrir l'éditeur de code et de maintenir la carte séparément!

Ceux-ci, ainsi que de nombreuses autres fonctionnalités de carte courantes, sont intégrées au plugin MAPSVG, où vous pouvez créer plusieurs cartes uniques en fonction de vos besoins visuels. Nous allons creuser dans ce plugin et l'utiliser pour créer une carte basée sur SVG interactive dans WordPress.

Options pour créer une nouvelle carte

Une fois installé, MAPSVG propose cinq options pour créer de nouvelles cartes basées sur les fonctionnalités vectorielles, image ou Google Maps. Aux fins de cet article, je me concentrerai sur la fonctionnalité SVG.

Dans la nouvelle option de carte SVG , il y a près de 200 cartes vectorielles géocalibrées et non calibrées. MAPSVG LITE, une version gratuite de ce plug-in, permet aux administrateurs de sites de créer des cartes interactives avec des info-bulles, des vues de détails personnalisables et des marqueurs placés via des coordonnées de latitude et de longitude. La mise à niveau vers la version payante (46 $) fournira la prise en charge suivante: catalogue de cartes, recherche intégrée, filtre de localisation, vue détaillée des zones de carte, intégration avec des articles WordPress et des champs personnalisés avancés, des infractions personnalisées et des cartes de contour et d'autres fonctionnalités avancées.

Créer une nouvelle carte

OK, nous avons choisi de créer une nouvelle carte basée sur SVG. Sélectionnez une option dans le menu déroulant pour créer une carte vectorielle. Choisissez une carte géocalibrée au lieu d'une carte non calibrée lorsque cela est possible. Carte de géocalibration mise à jour avec le titre de la région. De plus, ils vous permettent d'ajouter des marqueurs de carte par des coordonnées géographiques (c'est-à-dire la longitude et la latitude) ou en entrant des adresses qui sont automatiquement converties en coordonnées.

Si vous utilisez votre propre fichier SVG personnalisé, sélectionnez l'option Télécharger SVG . Après le téléchargement, votre fichier personnalisé sera affiché sous <kbd>user-uploads/your-file-name.svg</kbd> dans le nouveau menu déroulant SVG MAP . Avant de télécharger le fichier sur la carte du plugin, je vous suggère d'effectuer des étapes supplémentaires pour optimiser le fichier:

1. Les zones contenant plusieurs chemins vectoriels, comme Hawaï, doivent être regroupées en tant que chemins composites dans Illustrator. Dans Illustrator, vous pouvez le faire en sélectionnant le chemin pertinent, puis en allant à l'objet > Path composite > Créer (ou CMD 8 ).
2. Assurez-vous que votre couche a un nom unique et unique. Le nom de la couche sera utilisé comme zone à des fins de modèle et d'organisation {{id}}.
3. Ensuite, ouvrez votre fichier SVG dans un éditeur de texte et donnez à chaque chemin un attribut de titre. Cela sera utilisé comme zone dans le modèle {{title}}.

Les champs ID et titre sont des propriétés par défaut extraites du fichier et sont utilisées pour les associer à des chemins individuels. En commençant par la dernière version du plugin (actuellement 5.3.7), vous pouvez modifier le fichier SVG directement dans le panneau d'administration WordPress pour définir les valeurs ID et titre pour chaque chemin, ainsi que pour ajuster la définition de chemin et dessiner de nouveaux chemins. Je préfère personnellement les contrôles pour l'édition dans Illustrator and Code Editor, mais c'est toujours un bon choix.

Continuons à utiliser la carte de géocalibration fournie par le plugin et à créer une démo à l'aide de l'entrée à partir de https://www.php.cn/link/e74b103532a9337cc42f051774ac49d4 cette année pour visualiser les données (parties) des conférences techniques du monde entier.

Faire du style de carte

Maintenant que nous sommes prêts et sélectionnons le fichier SVG, l'interface du plugin ouvrira le panneau Paramètres. Ici, nous définissons le nom de la carte, définissons la taille et la taille, et activons les info-bulleurs et autres paramètres principaux.

En plus de l'onglet Paramètres, vous verrez également des onglets pour contrôler et définir des fonctionnalités de carte spécifiques. Passez à la couleur de l'onglet suivante, où nous définissons le thème de la carte.

Comme indiqué ci-dessus, nous pouvons contrôler les valeurs de remplissage et de trait de la carte et les différents états actifs de chaque chemin. Les avantages de l'utilisation de cartes à base de vecteur! Donc, si je crée un fichier de carte personnalisé, je préfère laisser les valeurs de remplissage et de course non définies dans Illustrator. Cependant, la largeur de course ne peut pas être ajustée efficacement dans l'interface utilisateur (car elle nécessite l'édition du SVG et la modification de la valeur de chaque chemin), il est donc préférable de le définir dans Illustrator et de re-télécharger le fichier.

Vous trouverez ci-dessous les options de couleur pour les conteneurs (tels que les répertoires, les filtres, les barres latérales, etc.), ainsi que les valeurs de couleur minimales et maximales pour la carte de contour (plus à ce sujet plus tard!). Les styles de conteneurs peuvent également être définis dans le monde dans votre feuille de style de thème ou dans l'onglet CSS des paramètres.

Définir les données de la carte

Par défaut, l'onglet de zone pré-remplira la zone en fonction du chemin du SVG sélectionné, affichant ses valeurs d'identification et de titre. Vous pouvez modifier et créer vos propres champs de zone selon les besoins. Il en va de même pour l'onglet de la base de données - où vous pouvez saisir les données de la carte et l'associer à la zone de carte.

Pour les entrées de zone et de base de données, vous pouvez choisir de créer manuellement des champs et du contenu dans l'interface utilisateur, ou télécharger des données à partir d'un fichier CSV.

Remarquez l'ensemble de données final dans la capture d'écran ci-dessus, en particulier les champs de zone personnalisés pour les détails de la réunion, les détails de la réunion et les champs qui téléchargent une image montrant les drapeaux de chaque pays dans la base de données. Nous pouvons aller plus loin en séparant le contenu de la carte elle-même et en les tirant en tant que données d'article pour tout type de publication WordPress. C'est là que les champs personnalisés avancés peuvent aider à créer des champs de ces données dans l'éditeur d'article et associer des données soumises avec des valeurs dans la carte. Bien sûr, ce n'est pas nécessaire, mais pour la séparation des préoccupations, il est agréable d'avoir cette option.

Afficher les données de carte

Lorsque vous affichez des informations sur les régions ou les objets de base de données sur la carte, nous devons définir le modèle dans le plugin. Il existe cinq types de modèles: pop-ups, info-bulleurs, vues de détails, répertoires et balises.

Le modèle accepte des balises de texte brut, HTML et de guidon pour afficher la région et les valeurs variables de la base de données. Si vous appuyez sur les données de l'article via le champ de base de données de l'article, vous aurez accès au champ WordPress standard, Post.id, post.post_title, poster.post_content, post.url et tout champ personnalisé créé à l'aide de cette syntaxe: post.acf.my_field_name. Chaque fois que vous avez besoin de rendre un champ de texte riche (tel que post.post_content), vous devez utiliser la syntaxe du guidon {{{Triple-stash}}} pour sortir le HTML rendu.

L'utilisation de la syntaxe du guidon signifie également que nous pouvons construire une logique conditionnelle dans des modèles pour créer des vues de modèle dynamique en fonction des valeurs de région et de base de données. Dans MAPSVG 5.0 et ultérieurement, les options de modèle sont pré-peuplées avec les commentaires HTML et les balises de démarrage pour la zone par défaut et les champs de base de données. Très utile!

Ajouter une carte à une page

MAPSVG contient un shortcode pour intégrer des cartes dans n'importe quelle page ou article. Placez un bloc shortcode Gutenberg sur la page et appelez MAPSVG avec l'ID de carte à intégrer: [MAPSVG].

Pour les utilisateurs qui travaillent dans l'éditeur WordPress classique ou utilisent une version plug-in avant 5.0, l'icône MAP est ajoutée à la barre d'outils TinyMCE, qui injecte un raccourci dans le contenu de votre article, en utilisant un ID de carte. L'ID de carte peut être trouvé dans le tableau de bord de l'éditeur MAPSVG ou dans la chapelure supérieure de la carte d'activité. Le bouton Copy to Cliboard est contenu à côté de deux instances du shortcode pour l'attraper pour être utilisée dans l'éditeur de l'article.

Démo

Après avoir terminé la saisie des données et commuté certains paramètres MAPSVG supplémentaires, nous obtenons une carte interactive et réactive entièrement fonctionnelle! Notez que nous avons peu d'exposition à beaucoup de code au cours de ce processus.

Voir la démo complète

Au-delà de la carte

L'avantage de la fonctionnalité SVG du plugin est que, fondamentalement, SVG peut être tout ce que nous voulons. Pouvez-vous créer des «cartes» interactives à partir de chemins vectoriels de presque tout: plans d'architecture, infographies ou chronologies interactives de votre carrière? C'est plus qu'une simple carte!

Pas sur WordPress? aucun problème. MAPSVG est également disponible en tant que plugin jQuery, et il vaut également la peine d'utiliser des cartes interactives en dehors de WordPress.

ressource

• Site Web Mapsvg (y compris la démonstration en temps réel de l'interface de gestion)
• Tutoriel mapsvg
• Documentation MAPSVG
• MAPSVG LITE (WordPress Plugin Directory)
• Archive de tutoriel vidéo Mapsvg (YouTube)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!