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>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span>    <span><span><span><meta> charset<span>="UTF-8"</span>></span>
</span>    <span><span><span><title>></title></span>Map Sample<span><span></span>></span>
</span>    <span><span><span><style> type<span >="text/css"</style></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></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span>    <span><span><span><div> class<span>="map"</span>>
        <span><span><span><svg> 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>></svg></span>
</span>            <span><span><span><g> id<span>="sar"</span>></g></span>
</span>                <span><span><span><polygon> class<span>="st0"</span> points<span>="193,463 ...    "</span>/></polygon></span>
</span>            <span><span><span></span>></span>
</span>
            <span><!-- etc ... -->
</span>
        <span><span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></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     <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></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     <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></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>+ region_data.region_name 
</span>    <span>+ '<br>' 
</span>    <span>+ 'Population: ' 
</span>    <span>+ region_data.population.toLocaleString("en-UK")
</span>    <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!