SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 249 visiteurs en ce moment

Accueil > Affichage multimédia > Images > Plugin jQuery Vector Maps > Plugin jQuery Vector Maps

Plugin jQuery Vector Maps

24 septembre 2015 – par Sophie Drouvroy, Teddy Payet – commentaire

9 votes

Ce plugin permet d’avoir des rendus vectoriels (SVG) par l’intermédiaire de la librairie « jQuery Vector Maps » (JQVMAP). L’image SVG affichée est responsive.

Préambule

Le mode de fonctionnement de la librairie JQVMAP est à consulter sur le site dédié à cette librairie jQuery http://jqvmap.com.

Installation

Ce plugin s’installe comme tous les plugins par l’intermédiaire du gestionnaire de plugins de SPIP. Merci de vous référer à la page dédiée.

Création de cartes

Après son installation, vous pourrez trouver dans le menu « Édition » de l’espace privé une entrée « Cartes », qui redirigera à l’adresse http://example.tld/ecrire/?exec=maps.
Cette page listera toutes les cartes que vous aurez créées. Dans la colonne de gauche (quand vous êtes en « petit écran » et colonne de droite quand vous êtes en « grand écran »), vous y trouverez un formulaire vous permettant d’importer des cartes fournies par le plugin à l’installation.

Sur la page ?exec=maps, si vous avez les droits nécessaires, vous pourrez cliquer sur le bouton « Créer une carte ». Vous pourrez y renseigner les champs suivants (qui sont issus de la librairie JQVMAP, entre parenthèses vous trouverez l’équivalence) :

  • Titre,
  • Descriptif,
  • Hauteur (height) : valeur numérique sans unité de mesure (pas de px, em, etc.).
  • Largeur (width) : valeur numérique sans unité de mesure (pas de px, em, etc.).
  • Code unique : un nom qui peut contenir des lettres non-accentuées, des chiffres, des underscores et des tirets. Les espaces ne sont pas autorisés.
  • Couleur du fond (backgroundColor) : une valeur hexadécimale d’une couleur ou le nom d’une couleur valide. Si vous renseignez null, le fond sera transparent.
  • Couleur des bordures (borderColor),
  • Opacité des bordures (borderOpacity) : la valeur à renseigner doit être comprise entre 0 et 1.
  • Épaisseur de la bordure (borderWidth) : une valeur numérique sans unité ;
  • Couleur des régions (color) : une valeur hexadécimale d’une couleur ou le nom d’une couleur valide. Si vous renseignez null, la couleur sera transparente,
  • Zoom (enableZoom) : activer le zoom sur la carte.
  • Couleur de survol (hoverColor) : couleur de la région lorsque le pointeur de la souris est au-dessus.
  • Opacité au survol (hoverOpacity) : la valeur à renseigner doit être comprise entre 0 et 1.
  • Fonction normalisée (normalizeFunction) : cette fonction peut être utilisée pour améliorer les résultats de visualisation des données de nature non-linéaire. La librairie utilise 2 fonctions par défaut « linear » et « polynomial ».
  • Couleurs de l’échelle (scaleColors) : cette option définit les couleurs, avec laquelle les régions seront colorisées lorsque vous définissez les valeurs d’option. Elle peut contenir plusieurs valeurs hexadécimales ou des couleurs valides (cf. red, orange, etc.), séparées par une virgule.
  • Couleur des éléments sélectionnés (selectedColor) : Valeur hexadécimale. Par défaut #c9dfaf.
  • Zone présélectionnée de la carte (selectedRegion) : ceci est la région (cf. zone) que vous cherchez à avoir présélectionnée.
  • Info-bulle (showTooltip) : Afficher le nom de la zone au survol.
  • Nom de la variable de data visualisation (dataName), si vous désirez faire de la data visualisation, il vous faut donner un nom correspondant au type de données. Ce nom ne doit pas contenir de caractères accentués ou d’espace. Il ne doit pas commencer par un chiffre.

Il y a 4 champs obligatoires :

  • Le titre de la carte,
  • Hauteur,
  • Largeur,
  • Code unique.

Pour information, voici le code utilisé dans le modèle pour afficher la carte :

  1. jQuery('#map_[(#CODE_MAP|sinon{[(#TITRE||translitteration|strtolower|trim|replace{#GET{regex},"_",u})]})]').vectorMap({
  2. map: 'map_[(#CODE_MAP|sinon{[(#TITRE||translitteration|strtolower|trim|replace{#GET{regex},"_",u})]})]',[
  3. backgroundColor : (#BACKGROUND_COLOR|jqvmap_format),][
  4. borderColor : (#BORDER_COLOR|jqvmap_format),][
  5. borderOpacity : (#BORDER_OPACITY),][
  6. borderWidth : (#BORDER_WIDTH),][
  7. color : (#COLOR|jqvmap_format),][
  8. enableZoom : (#ENABLE_ZOOM),][
  9. hoverColor : (#HOVER_COLOR|jqvmap_format),][
  10. hoverOpacity : (#HOVER_OPACITY),][
  11. normalizeFunction : (#NORMALIZE_FUNCTION|jqvmap_format),][
  12. scaleColors : \[(#SCALE_COLORS|jqvmap_format)\],][
  13. selectedColor : (#SELECTED_COLOR|jqvmap_format),][
  14. selectedRegion : (#SELECTED_REGION|jqvmap_format),][
  15. showTooltip : (#SHOW_TOOLTIP),]<B_click>
  16. onRegionClick: function(element, code, region)
  17. {
  18. <BOUCLE_click (VECTORS) {id_map} {url_site!=''}>
  19. [(#COMPTEUR_BOUCLE|=={1}|?{'if','elseif'})] (code == '[(#CODE_VECTOR|sinon{[(#ID_VECTOR)]})]')
  20. {
  21. window.open('[(#URL_SITE)]','_blank');
  22. }</BOUCLE_click>
  23. },</B_click>[
  24. values: (#DATA_NAME),]
  25. });

Télécharger

Ceux-ci renseignés, il vous faudra créer les zones de la carte. Pour cela, cliquer sur « Créer un vecteur ».

Créer des zones/vecteurs

Voici la liste des champs d’un vecteur :

  • Carte, par défaut, la carte sélectionnée est la carte ayant pour identifiant celui passé en paramètre de la présente page de création.
  • Titre,
  • Descriptif,
  • Abréviation de la zone,
  • Couleur de la zone : pour personnaliser la couleur de fond de la zone sur la carte,
  • Data visualisation : une valeur numérique (de 0 à XX milliards, les nombres à virgules sont autorisés sous la forme « anglaise »),
  • Coordonnées, ce champ correspond au path de votre fichier SVG initial.
  • Lien hypertexte : si une URL valide d’un site est renseignée, lorsque l’internaute cliquera sur cette zone, le navigateur ouvrira une fenêtre (ou un onglet selon le réglage du navigateur de l’internaute) vers ce lien.

Il y a 2 champs obligatoires :

  • Le titre de la zone,
  • Les coordonnées du path,

Après avoir cliqué « Enregistrer », vous serez redirigé vers la page de consultation de la zone. Pour revenir à la carte et voir le résultat concret de ce que vous avez saisi, il faut cliquer sur le nom de la carte dans le fil d’Ariane.
Vous devriez voir maintenant apparaître la carte au-dessus de la liste des zones de la carte.

Modèle fourni

Le plugin fourni un modèle jqvmap que vous pourrez utiliser dans vos articles (ou tout autre type d’objets) de la façon suivante :

Ou dans vos squelettes :

Mise en ligne d’une carte

Après avoir renseigné toutes les informations, aussi bien pour une carte que pour ses zones, la carte ne sera mise en ligne qu’après avoir changé son statut. En effet, pour des raisons de confort et de non pollution du site public, une carte possède les mêmes statuts qu’un article :

  • en cours de rédaction ;
  • proposé à l’évaluation ;
  • publié en ligne ;
  • à la poubelle ;
  • refusé.

Exemple de rendu de carte SVG

Le plugin se destine principalement à un rendu javascript de SVG. En voici un exemple avec la carte de France.

PNG - 85.9 ko
Carte de France des régions en 2016
Rendu par défaut d’une carte par le plugin jQuery Vector Map.

Mais il est tout à fait possible avec un peu d’imagination et de patience de réaliser une illustration telle que celle-ci :

PNG - 133.7 ko
Tigre de RaphaelJS

Liste des cartes fournies par le plugin

En voici la liste (qui pourra s’étoffer au fil de l’eau) :

  • 2015-fr-alsace.xml : Carte de la région d’Alsace avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2015-fr-aquit.xml : Carte de la région de l’Aquitaine avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2015-fr-auver.xml : Carte de la région de l’Auvergne avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2015-fr-basnorm.xml : Carte de la région de la Basse Normandie avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2015-fr-bourgogne.xml : Carte de la région de la Bourgogne avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2015-fr-char.xml : Carte de la région de Champagne-Ardenne avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2015-fr-francomte.xml : Carte de la région de Franche-Comté avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2015-fr-hautnorm.xml : Carte de la région de la Haute-Normandie avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2015-fr-langrous.xml : Carte de la région du Languedoc-Roussillon avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2015-fr-limousin.xml : Carte de la région du Limousin avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2015-fr-lorraine.xml : Carte de la région de la Lorraine avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2015-fr-midipy.xml : Carte de la région Midi-Pyrénées avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2015-fr-npdc.xml : Carte de la région Nord-Pas-de-Calais avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2015-fr-picar.xml : Carte de la région Picardie avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2015-fr-poitou.xml : Carte de la région Poitou-Charentes avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2015-fr-rhoalp.xml : Carte de la région Rhône-Alpes avec ses départements. Région avant la réforme territoriale au 1er janvier 2016.
  • 2016-fr-alpc.xml : Carte de la région « Aquitaine-Limousin-Poitou-Charentes » avec ses départements. Région de la réforme territoriale au 1er janvier 2016.
  • 2016-fr-aura.xml : Carte de la région « Auvergne-Rhône-Alpes » avec ses départements. Région de la réforme territoriale au 1er janvier 2016.
  • 2016-fr-bfc.xml : Carte de la région « Bourgogne-Franche-Comté » avec ses départements. Région de la réforme territoriale au 1er janvier 2016.
  • 2016-fr-lrmp.xml : Carte de la région « Languedoc-Roussillon-Midi-Pyrénées » avec ses départements. Région de la réforme territoriale au 1er janvier 2016.
  • 2016-fr-nordpdcp.xml : Carte de la région « Nord-Pas-De-Calais-Picardie » avec ses départements. Région de la réforme territoriale au 1er janvier 2016.
  • 2016-fr-norm.xml : Carte de la région « Normandie » avec ses départements. Région de la réforme territoriale au 1er janvier 2016.
  • brazil_br.xml : Carte du Brésil, issue de la librairie JQVMAP.
  • dz_fr.xml : Carte de l’Argentine, issue de la librairie JQVMAP.
  • europe_en.xml : Carte de l’Europe, issue de la librairie JQVMAP.
  • fr-bret.xml : Carte de la région de Bretagne avec ses départements. Région inchangée après la réforme territoriale du 1er janvier 2016.
  • fr-centre.xml : Carte de la région « Centre-Val de Loire » avec ses départements. Région inchangée après la réforme territoriale du 1er janvier 2016.
  • fr-corse.xml : Carte de la région de la Corse avec ses départements. Région inchangée après la réforme territoriale du 1er janvier 2016.
  • fr-idf.xml : Carte de la région de l’Île de France avec ses départements. Région inchangée après la réforme territoriale du 1er janvier 2016.
  • fr-paca.xml : Carte de la région « Provence Alpes Côte d’Azur » avec ses départements. Région inchangée après la réforme territoriale du 1er janvier 2016.
  • fr-pdll.xml : Carte de la région « Pays de La Loire » avec ses départements. Région inchangée après la réforme territoriale du 1er janvier 2016.
  • france_continent.xml : Carte de la France continentale (sans les DOM), avant la réforme territoriale au 1er janvier 2016.
  • france_regions.xml : Carte de la France avec les DOM, avant la réforme territoriale au 1er janvier 2016.
  • france_regions_2016.xml : Carte de la France avec les DOM, à partir de la réforme territoriale au 1er janvier 2016.
  • germany_en.xml : Carte de l’Allemagne, issue de la librairie JQVMAP.
  • world_en.xml : Carte du Monde, issue de la librairie JQVMAP, avec de la data visualisation.

Voir en ligne : http://plugins.spip.net/jqvmap

Dernière modification de cette page le 25 novembre 2015

Retour en haut de la page

Vos commentaires

  • Le 20 février à 21:38, par flouvel En réponse à : Plugin jQuery Vector Maps

    Bonjour,
    je viens de découvrir ce plugin. Je me suis donné beaucoup de mal pour intégrer des cartes vectoriels avec liens et zoom dans un squelettesui : simple et responsive (que je proposerai très bientôt sous forme de plugin), cela aux prix d’avoir dans l’espace privé « Erreur d’analyse XML » pour la carte intégrée, car elle n’est pas un svg complet, juste un calque, la définition du svg étant dans le squelette.
    je comptais essayer de développer un plugin pour intégrer des cartes.svg ...
    Exemples de carte : massifs de bleau, qui comprend un lien sur celle-ci, etc.
    Ma question (à laquelle je vais essayer de répondre) : ce plugin devrait répondre à mon besoin ?
    impatient de tester en tout cas !

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Adaptive Images

    15 novembre 2013 – 69 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Social tags

    8 septembre 2008 – 428 commentaires

    Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious.... Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration. Insertion (...)

  • Module de Paiement Stripe

    17 octobre – commentaires

    Stripe est un prestataire de paiement externe https://stripe.com/fr qui propose une API moderne et une interface de paiement extrêmement conviviale et efficace. Ce module permet les paiements à l’acte et les paiement récurrents. Configuration (...)

  • Métas

    8 août 2009 – 50 commentaires

    Ce petit plugin permet l’ajout, depuis l’espace privé, de metatags aux articles et rubriques de SPIP, ainsi que la mise en exergue de mots importants.

Ça spipe par là