Plugin jQuery Vector Maps

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 :

jQuery('#map_[(#CODE_MAP|sinon{[(#TITRE||translitteration|strtolower|trim|replace{#GET{regex},"_",u})]})]').vectorMap({
        map: 'map_[(#CODE_MAP|sinon{[(#TITRE||translitteration|strtolower|trim|replace{#GET{regex},"_",u})]})]',[
        backgroundColor : (#BACKGROUND_COLOR|jqvmap_format),][
        borderColor : (#BORDER_COLOR|jqvmap_format),][
        borderOpacity : (#BORDER_OPACITY),][
        borderWidth : (#BORDER_WIDTH),][
        color : (#COLOR|jqvmap_format),][
        enableZoom : (#ENABLE_ZOOM),][
        hoverColor : (#HOVER_COLOR|jqvmap_format),][
        hoverOpacity : (#HOVER_OPACITY),][
        normalizeFunction : (#NORMALIZE_FUNCTION|jqvmap_format),][
        scaleColors : \[(#SCALE_COLORS|jqvmap_format)\],][
        selectedColor : (#SELECTED_COLOR|jqvmap_format),][
        selectedRegion : (#SELECTED_REGION|jqvmap_format),][
        showTooltip : (#SHOW_TOOLTIP),]<B_click>
        onRegionClick: function(element, code, region)
            {
                <BOUCLE_click (VECTORS) {id_map} {url_site!=''}>
                [(#COMPTEUR_BOUCLE|=={1}|?{'if','elseif'})] (code == '[(#CODE_VECTOR|sinon{[(#ID_VECTOR)]})]')
                {
                    window.open('[(#URL_SITE)]','_blank');
                }</BOUCLE_click>
            },</B_click>[
        values: (#DATA_NAME),]
    });

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 :

<jqvmap|code_map=france_regions>
<jqvmap|id_map=1>

Ou dans vos squelettes :

[(#MODELE{jqvmap}{code_map=france_regions})]
[(#MODELE{jqvmap}{id_map=1})]

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.

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

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 1^er 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 1^er 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 1^er 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 1^er 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 1^er 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 1^er 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 1^er 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 1^er 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 1^er 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 1^er 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 1^er 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 1^er 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 1^er janvier 2016.
• 2015-fr-picar.xml : Carte de la région Picardie avec ses départements. Région avant la réforme territoriale au 1^er 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 1^er 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 1^er 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 1^er 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 1^er 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 1^er 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 1^er 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 1^er janvier 2016.
• 2016-fr-norm.xml : Carte de la région « Normandie » avec ses départements. Région de la réforme territoriale au 1^er 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 1^er 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 1^er 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 1^er 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 1^er 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 1^er 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 1^er janvier 2016.
• france_continent.xml : Carte de la France continentale (sans les DOM), avant la réforme territoriale au 1^er janvier 2016.
• france_regions.xml : Carte de la France avec les DOM, avant la réforme territoriale au 1^er janvier 2016.
• france_regions_2016.xml : Carte de la France avec les DOM, à partir de la réforme territoriale au 1^er 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.