Maps Geo Dynamic avec SVG et JQuery
Lorsque j'ai besoin de créer des graphiques, mon premier choix est Google Charts ou une autre bibliothèque dédiée. Parfois, cependant, j'ai besoin de fonctionnalités spécifiques que je ne trouve pas là-bas. Dans ces cas, les images SVG s'avèrent très précieuses.
Récemment, j'ai dû construire une page de rapport capable de montrer une carte de l'Italie dans laquelle chaque région avait un ton de couleur différent selon certaines valeurs récupérées à partir d'une base de données. Grâce à SVG, cette tâche a été très facile.
Les plats clés
-
Les images
- SVG peuvent être utilisées pour créer des cartes GEO dynamiques avec des tons de couleur différentes pour chaque région, en fonction des données récupérées à partir d'une base de données. Ceci est réalisé en dessinant chaque région comme un seul objet avec un nom de niveau unique qui correspond au code utilisé dans la base de données pour identifier ses données.
- La carte peut être rendue interactive avec CSS et JQuery, ce qui lui permet d'afficher des données spécifiques, telles que la valeur de la population, lorsque la souris plane sur une région. Ceci est réalisé en ajoutant une règle CSS pour G: Hover et une nouvelle classe Info_Panel pour styliser les boîtes d'information, puis modifier le précédent pour le cycle, en ajoutant .data () pour stocker des informations qui seront affichées sur Hover.
- Les cartes SVG peuvent être rendues réactives, utilisées avec d'autres bibliothèques JavaScript, utilisées pour la visualisation des données, et même animées. Ils peuvent également être personnalisés et optimisés pour les performances. Cependant, la création d'une carte personnalisée nécessite une bonne compréhension des données SVG et géographiques, et des animations complexes peuvent avoir un impact sur les performances.
Création de la carte SVG dans Illustrator
Tout d'abord, j'ai dessiné une carte de l'Italie avec illustrator:
Chaque région est dessinée comme un seul objet, et chacun d'eux a son propre niveau, avec un nom correspondant au code utilisé dans la base de données pour identifier ses données relatives (par exemple: «TOS» pour la Toscane).
Enfin, la carte doit être enregistrée en tant que fichier SVG. Vous devez prêter attention pour définir l'option «propriété CSS» sur «Style Elements» dans Illustrator, comme indiqué ci-dessous:
Ouverture du fichier qui vient d'être créé, vous le verrez contient un ensemble de balises G dont les ID correspondent aux noms des niveaux d'illustrateur.
Construire notre fichier HTML
Chaque élément contenu dans les balises G a une classe ST0 afin que les propriétés CSS de course et de remplissage puissent leur être affectées:
Si vous essayez de modifier ces valeurs, la carte changera immédiatement:
Maintenant, nous pouvons utiliser ce code pour créer notre fichier HTML avec SVG en ligne comme indiqué ci-dessous (le code a été raccourci pour la commodité):
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span> <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span> <span><span><span><title</span>></span>Map Sample<span><span></title</span>></span>
</span> <span><span><span><style</span> type<span>="text/css"</span> media<span>="all"</span>></span><span>
</span></span><span><span> <span><span>.map svg</span> {
</span></span></span><span><span> <span>height: auto;
</span></span></span><span><span> <span>width: 350px;
</span></span></span><span><span> <span>}
</span></span></span><span><span> <span><span>.map g</span> {
</span></span></span><span><span> <span>fill: #ccc;
</span></span></span><span><span> <span>stroke: #333;
</span></span></span><span><span> <span>stroke-width: 1;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span> <span><span><span><div</span> class<span>="map"</span>></span>
</span> <span><span><span><svg</span> version<span>="1.1"</span> id<span>="Livello_1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span> <span>xmlns:xlink</span><span>="https://www.w3.org/1999/xlink"</span> x<span>="0px"</span> y<span>="0px"</span> viewBox<span>="0 -21.6 761 919"</span> <span>style<span>="<span>enable-background:new 0 -21.6 761 919;</span>"</span></span> <span>xml:space</span><span>="preserve"</span>></span>
</span> <span><span><span><g</span> id<span>="sar"</span>></span>
</span> <span><span><span><polygon</span> class<span>="st0"</span> points<span>="193,463 ... "</span>/></span>
</span> <span><span><span></g</span>></span>
</span>
<span><!-- etc ... -->
</span>
<span><span><span></svg</span>></span>
</span> <span><span><span></div</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>Vous pouvez voir que l'attribut de style à l'intérieur de la balise SVG a été effacé et remplacé par un nouveau situé à l'intérieur de la tête de document; Tous les éléments G ont été initialement remplis d'un gris clair.
La classe ST0 n'est plus utilisée (vous pouvez le supprimer de votre code SVG) et il a été remplacé par le sélecteur .map G. Quoi qu'il en soit, ce n'est pas obligatoire, vous pouvez utiliser les sélecteurs CSS que vous préférez.
La deuxième étape consiste à lier notre carte à certaines données récupérées de notre base de données. Dans cet exemple, notre objectif est de peindre la carte selon la population de chaque région.
Ajout des données JSON et JavaScript
Les données sont récupérées au format JSON et collées directement à l'intérieur de notre fichier HTML (dans le monde réel, bien sûr, les données seraient récupérées à l'aide d'Ajax ou similaires).
Maintenant, notre page contiendra JSON dans notre fichier javascript qui ressemble à ceci (encore une fois, abrégé):
<span>var regions=[
</span> <span>{
</span> <span>"region_name": "Lombardia",
</span> <span>"region_code": "lom",
</span> <span>"population": 9794525
</span> <span>},
</span> <span>{
</span> <span>"region_name": "Campania",
</span> <span>"region_code": "cam",
</span> <span>"population": 5769750
</span> <span>},
</span>
<span>// etc ...
</span>
<span>];</span>Après cela, une couleur est choisie (dans ce cas, # 0B68AA), et nous l'a attribuée à la région avec la plus grande valeur de population. Les autres régions seront colorées avec des tons de la couleur principale proportionnellement à leur pourcentage de la population.
Ensuite, nous pouvons ajouter du javascript.
Tout d'abord, nous devons déterminer la région avec la valeur de population maximale. Cela peut être fait avec quelques rangées de code.
Une fois qu'un tableau temporaire contenant les valeurs de population a été construit, nous pouvons utiliser la méthode Math.max dessus:
<span>var temp_array= regions.map( function( item ) {
</span> <span>return item.population;
</span><span>});
</span>
<span>var highest_value = Math.max.apply( Math, temp_array );</span>Ensuite, nous pouvons parcourir toutes les éléments de toutes les régions et leur appliquer un pourcentage de transparence en fonction du calcul Population / valeur maximale (avec un peu d'aide de jQuery):
<span>$(function() {
</span> <span>for(i=0; i < regions.length; i++) {
</span> <span>$('#'+ regions[i].region_code).css({'fill': 'rgba(11, 104, 170,'
</span> <span>+ regions[i].population/highest_value
</span> <span>+ ')'});
</span> <span>}
</span><span>});</span>C'est le résultat:
Ajout d'interactivité avec CSS et jQuery
La carte peut être améliorée en ajoutant par une certaine interactivité. Nous voulons qu'il montre la valeur de la population lorsque la souris est positionnée sur les régions.
Tout d'abord, nous ajoutons une règle CSS pour G: Hover et une nouvelle classe Info_Panel pour styliser nos boîtes d'information:
<span><span>.map g:hover</span> {
</span> <span>fill: #fc0 !important;
</span> <span>cursor: help;
</span><span>}
</span>
<span><span>.info_panel</span> {
</span> <span>background-color: <span>rgba(255,255,255, .7)</span>;
</span> <span>padding: .3em;
</span> <span>font-size: .8em;
</span> <span>font-family: Helvetica, Arial, sans-serif;
</span> <span>position: absolute;
</span><span>}
</span>
<span><span>.info_panel::first-line</span> {
</span> <span>font-weight: bold;
</span><span>}</span>Le! Modificateur important dans .map g: Hover est nécessaire pour améliorer la spécificité de la règle de remplissage, sinon il serait contourné par injecté en ligne CSS.
Ensuite, nous devons modifier notre précédent pour le cycle, en ajoutant .data () pour stocker des informations qui seront affichées sur le plan de survol:
<span>for (i = 0; i < regions.length; i++) {
</span> <span>$('#'+ regions[i].region_code)
</span> <span>.css({'fill': 'rgba(11, 104, 170,'
</span> <span>+ regions[i].population/highest_value
</span> <span>+')'}).data('region', regions[i]);
</span><span>}</span>Enfin, nous pouvons compléter notre script en ajoutant des effets de souris:
<span>$('.map g').mouseover(function (e) {
</span> <span>var region_data=$(this).data('region');
</span> <span>$('<div >'
</span> <span>+ region_data.region_name
</span> <span>+ '<br>'
</span> <span>+ 'Population: '
</span> <span>+ region_data.population.toLocaleString("en-UK")
</span> <span>+ '</div>').appendTo('body');
</span><span>}).mouseleave(function () {
</span> <span>$('.info_panel').remove();
</span><span>}).mousemove(function(e) {
</span> <span>var mouseX = e.pageX, // X coordinates of mouse
</span> mouseY <span>= e.pageY; // Y coordinates of mouse
</span>
<span>$('.info_panel').css({
</span> <span>top: mouseY-50,
</span> <span>left: mouseX - ($('.info_panel').width() / 2)
</span> <span>});
</span><span>});</span>comment cela fonctionne:
- Tout d'abord, avec Mouseover, nous construisons un div contenant les informations à afficher (nom de région et population). Le div est construit chaque fois que la souris plane sur un élément G et est annexée au corps du document;
- Mouseleave supprime cette div lorsque le curseur est en dehors de la région planée;
- La dernière méthode, MouseMove, récupère les coordonnées de la souris et les attribue aux divs générés.
Voici le résultat final sur Codepen:
Voir le stylo kdhfh par SitePoint (@SitePoint) sur Codepen.
Questions fréquemment posées (FAQ) sur des cartes géo dynamiques avec SVG et jQuery
Comment puis-je rendre ma carte SVG réactive?
Rendre votre carte SVG réactive implique de définir la largeur et la hauteur du SVG à 100% et de s'assurer que l'attribut Viewbox est correctement défini. L'attribut ViewBox vous permet de spécifier qu'une certaine zone de la carte est visible et que le rapport d'aspect est conservé lors de la mise à l'échelle vers le haut ou vers le bas. Vous pouvez également utiliser des requêtes multimédias pour ajuster la taille et la position de la carte en fonction de la taille de l'écran.
Puis-je utiliser des cartes SVG avec d'autres bibliothèques JavaScript en plus de jQuery?
Oui, les cartes SVG peuvent être utilisé avec d'autres bibliothèques JavaScript telles que D3.js, Raphaël et Snap.Svg. Ces bibliothèques offrent des fonctionnalités supplémentaires pour créer et manipuler les graphiques SVG. Cependant, l'implémentation peut différer de jQuery, vous devrez donc vous référer à la documentation de la bibliothèque respective.
Comment puis-je ajouter de l'interactivité à ma carte SVG?
Vous pouvez ajouter de l'interactivité à votre Carte SVG utilisant JavaScript ou jQuery. Cela peut inclure des fonctionnalités telles que les régions à petit, le zoom, le panoramique et les régions cliquables. Par exemple, vous pouvez utiliser les événements 'Mouseover' et 'Mouseout' pour afficher les infractions, et l'événement 'cliquer' pour rendre les régions cliquables.
Comment puis-je utiliser des cartes SVG pour la visualisation des données?
Les cartes SVG peuvent être utilisées pour la visualisation des données par des régions de coloration basées sur les valeurs de données, une technique connue sous le nom de mappage de choropleth. Vous pouvez utiliser JavaScript pour lier des données à vos éléments SVG et appliquer une échelle de couleurs. Des bibliothèques comme D3.JS fournissent des fonctionnalités intégrées pour créer des cartes Choropletth.
Comment puis-je créer une carte SVG personnalisée?
La création d'une carte SVG personnalisée implique de dessiner la carte à l'aide d'un logiciel graphique vectoriel comme Adobe Illustrator ou Inkscape, puis l'exportant en tant que fichier SVG. Vous pouvez ensuite utiliser JavaScript ou JQuery pour manipuler les éléments SVG et ajouter l'interactivité. Gardez à l'esprit que la création d'une carte personnalisée nécessite une bonne compréhension des données SVG et géographiques.
Pourquoi mes régions de carte SVG ne s'affichent-elles pas correctement?
Si vos régions de carte SVG ne s'affichent pas correctement, cela pourrait être dû à plusieurs raisons. Le fichier SVG peut ne pas être formaté correctement, ou il pourrait y avoir une erreur dans votre code JavaScript. Vérifiez la console pour tous les messages d'erreur et assurez-vous que votre fichier SVG est valide.
Puis-je utiliser des cartes SVG dans tous les navigateurs?
SVG est pris en charge dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari et bord. Cependant, les versions plus anciennes d'Internet Explorer (IE8 et ci-dessous) ne prennent pas en charge SVG. Si vous devez prendre en charge ces navigateurs, vous pouvez utiliser un polyfill comme Raphaël ou convertir votre SVG en un autre format comme VML.
Comment puis-je optimiser ma carte SVG pour les performances?
Optimisation de votre SVG La carte des performances peut impliquer plusieurs techniques. Ceux-ci incluent la minimisation de la taille de votre fichier SVG, l'utilisation de CSS pour le style au lieu d'attributs en ligne et l'utilisation efficace de JavaScript. Vous pouvez également utiliser des outils comme SVGO pour optimiser vos fichiers SVG.
Comment puis-je animer ma carte SVG?
Vous pouvez animer votre carte SVG à l'aide d'animations CSS ou JavaScript. Cela peut inclure l'animation des couleurs, des formes et des positions de vos éléments SVG. Gardez à l'esprit que les animations complexes peuvent avoir un impact sur les performances, alors utilisez-les avec parcimonie.
Puis-je utiliser des cartes SVG dans des applications mobiles?
Oui, les cartes SVG peuvent être utilisées dans des applications mobiles. SVG est pris en charge dans les vues Web Android et iOS, et peut être utilisé dans des applications mobiles hybrides à l'aide de frameworks comme Cordova ou React Native. Cependant, gardez à l'esprit que les performances peuvent être un problème sur les appareils plus anciens ou les cartes complexes.
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1653
14
1413
52
1304
25
1251
29
1224
24
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Démystifier javascript: ce qu'il fait et pourquoi c'est important
Apr 09, 2025 am 12:07 AM
JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido?
Apr 04, 2025 pm 05:36 PM
La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...
JavaScript est-il difficile à apprendre?
Apr 03, 2025 am 12:20 AM
Apprendre JavaScript n'est pas difficile, mais c'est difficile. 1) Comprendre les concepts de base tels que les variables, les types de données, les fonctions, etc. 2) Master la programmation asynchrone et les implémenter via des boucles d'événements. 3) Utilisez les opérations DOM et promettez de gérer les demandes asynchrones. 4) Évitez les erreurs courantes et utilisez des techniques de débogage. 5) Optimiser les performances et suivre les meilleures pratiques.
L'évolution de JavaScript: tendances actuelles et perspectives d'avenir
Apr 10, 2025 am 09:33 AM
Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript?
Apr 04, 2025 pm 05:09 PM
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...
Comment implémenter la fonction de glisser-déposer et de régler la fonction de réglage similaire à VScode dans le développement frontal?
Apr 04, 2025 pm 02:06 PM
Explorez la mise en œuvre de la fonction de glisser et de réglage du panneau de type VScode dans le frontal. Dans le développement frontal, comment implémenter un VScode comme ...
