Plugin image-map des départements

Un plugin pour afficher la carte de France des départements en image-map (image réactive)

Ce plugin propose un modèle pour afficher une carte de France des départements en image réactive

Voir cet exemple http://galactron.org/Utilisation-du...

Voici le fond de carte utilisé

Installation

Pour récupérer les fichiers de ce plugin vous pouvez :

  • soit utiliser les listes d’installation de /plugins/auto dans la page de gestion des plugins de votre SPIP
  • soit récupérer la version svn ( version de développement ) sur la zone spip :
    svn co svn ://zone.spip.org/spip-zone/_plugins_/imagemap_departements
  • soit télécharger le zip de la dernière version sur https://files.spip.net/spip-zone/

Pour l’installation et l’activation, suivez la procédure standard : cf la documentation officielle

Lors de l’installation il sera créé dans votre base de données une table supplémentaire spip_imap_departements dans laquelle les données des 95 départements métropolitains seront intégrées.

Utilisation

L’ajout de la carte réactive dans un article ou un squelette se fait en utilisant un modèle SPIP : pour plus de précision sur leur fonctionnement, voir la page de documentation des modèles.

Le modèle departements.html mis à disposition dans ce plugin peut donc être appelé :

  • soit dans un article : <departements|parametre1=X|parametre2=Y...>
  • soit dans un squelette : [(#MODELE{departements, parametre1=X, parametre2=Y, ...})]

Ce modèle propose les paramètres suivants :

  • |redim=...  : le facteur de redimensionnement de la carte (par defaut = 1, ce qui correspond a une carte de 479x434 pixels). Pour une carte plus grande donner une valeur supérieure à 1, pour réduire la taille de la carte donner une valeur inférieure. (NB : les valeurs non-entière peuvent êtres passées indifféremment avec une virgule ou un point comme séparateur)
    Exemples : |redim=0.8 pour une carte réduite à 80% de sa taille par défaut, ou |redim=2 pour doubler la taille de la carte
  • |lien_base=... : l’url des liens sur les départements. Par défaut cette url sera celle de la page en cours (appel de la balise #SELF).
    Exemples : |lien_base=toto.html enverra vers la page toto.html lorsque l’on cliquera sur un département, |lien_base=spip.php ?page=contact permet d’envoyer vers la page contact.html de votre SPIP
  • |lien_param=... : le paramètre de l’url qui passe le numéro de département. Par défaut ce paramètre est depart=..., ce qui donne comme url du lien sur les Bouches du Rhône (si on place ce modèle dans l’article n°123) : .../spip.php ?article123&depart=13.
    Exemple : |lien_param=num donnera des url de liens du style .../spip.php ?article123&num=13
  • |param=nom : permet de passer le nom du département à la place du numéro comme valeur du paramètre |lien_param. On obtient donc par exemple : spip.php ?article123&depart=seine-et-marne à la place de spip.php ?article123&depart=77 (c’est la balise #NOM_WEB qui est utilisée, cf partie « Personnalisations »)
  • |mono=1 : par défaut la carte utilisée est en couleurs, ce paramètre permet d’utiliser une version de la carte en mono-teinte.
  • |aff_region=1 si on souhaite afficher la région en plus du nom du département dans l’info-bulle qui apparait au survol d’un département
  • |bullehtml=1 : par défaut l’info-bulle utilisée est générée par un script JavaScript (Cluetip de jQuery) qui ne permet pas son affichage lors de la navigation au clavier (= pas accessible pour les navigateurs vocaux par exemples). Cette option permet d’utiliser l’info-bulle native HTML qui elle apparait lors de la navigation au clavier.

Personnalisations

Ce plugin est essentiellement fait pour fournir un « fond de carte » à partir duquel on va pouvoir ajouter des données concernant les différents départements.

Les données intégrées lors de l’installation du plugin permettent de disposer des balises suivantes :

  • #NUM_DEPARTEMENT : le numéro du département
  • #NOM : son nom
  • #REGION : sa région de rattachement
  • #NOM_WEB : son nom modifié pour pouvoir être utilisé dans une URL (suppression des accents et des guillemets, remplacement des espaces par un tiret)
  • #COORDONNEES : les coordonnées de l'<area> HTML du département pour la carte à sa taille "par défaut"

Pour personnaliser ce modèle procédez comme pour n’importe quel fichier de squelette : une copie dans le répertoire /squelettes/modeles du fichier imagemap_departements/modeles/departements.html vous permettra de réaliser toutes les bidouilles que vous souhaitez en matière de données à afficher.

Pour ce qui est des infos-bulles, de nombreux paramètres d’affichages sont disponibles :
voir la documentation du plugin jQuery Cluetip

Chaleureux remerciements à Lionel Delvarre (http://www.lion1906.com/) pour avoir bien voulu diffuser sa carte de France avec son image-map sous licence GPL.

Discussion

22 discussions

  • 4

    Bon ben j’y arrive pas...

    Mes articles sont prêts. J’arrive à afficher la carte. Je veux juste associer un article à une entrée de la carte. Et puis là c’est pas clair. Ex : mon article 25=Marseille. Problème : l’associer à l’entrée 13. Je suis passé à côté sans doute...

    HELP !

    • C’est bon j’ai réussi tout seul (en m’inspirant du forum). En gros j’ai ajouté un champ SQL du type « num_art » en assignant à chaque occurrence le numéro de l’article correspondant au département concerné.

      Ensuite j’ai réussi (je n’y connais rien, paresse oblige) à faire le bon appel dans le sommaire et les articles. Du coup ça marche et on navigue bien mieux sur le site.

      Merci donc.

      Merci aussi à Stephanie de Nadaï pour ses améliorations. (http://www.webdesigneuse.net)

      Jean-Marie Falvet : www.crayghom.com

    • ce cas d’utilisation du plugin semble suffisamment intéressant/courant pour que vous puissiez peut être donner quelques explications sur le « branchement » des liens sur les départements avec ce champ num_art (code du modèle entre autre)...
      Merci d’avance !

    • Je veux bien mais je pense que quelques améliorations pourraient être faites préalablement à ce plugin (absolument génial au passage).

      1- Orthographier correctement les départements ou les régions (il manque pas mal de majuscules).

      2- Régler l’inversion entre 65 et 66 (déjà remarquée je crois).

      3- Permettre à l’utilisateur lambda de lier un article à une entrée via par exemple : |lien_art=...

      En attendant, dans « departements.html » ligne 33 j’ai inscrit :

      href=« #URL_SITE_SPIP/spip.php ?article#NUM_ART »

      En ayant, je le rappelle, ajouté un champ « num_art » à la base de données (voir plus haut).

      Les appels dans les squelettes ou dans les articles ne changent pas.

      Pour le reste j’avoue ma parfaite incompétence.

      Jean-Marie Falvet

    • Très bien de pouvoir lier des articles aux départements, mais on peut avoir besoin de liens propres au lieu de liens de type spip.php ?article123

      Petite précision pour ceux qui souhaitent avoir une URL « Propre » sur leurs liens des départements, il faut modifier la ligne 33 de departements.html comme suit :

      href=« #URL_ARTICLE#NUM_ART »

    Répondre à ce message

  • 2
    lesouriciergris

    Bonjour,

    j’ai eu des soucis avec IE7 qui m’affichait le contenu de ’title" en plus de l’infobulles. J’ai résolu le problème en passant sous IE8 et en utilisant la balise « alt » au lieu de « title ».

    Pourriez vous m’indiquer si d’autres que moi ont eu le problème ?

    Merci

    • lesouriciergris

      Sous IE7, j’ai trouvé une parade. Je n’utilise pas une balise HTML contenu dans la grammaire W3C.

      Dans le cas présent, j’ai remplacé le paramètre TITLE par TEXTE et modifier l’appel du plugin JQuery pour prendre en compte ce changement.

    • Bonjour

      Pourriez vous m’expliquer d’avantage l’astuce que vous avez trouvé pour ne pas afficher le title en plus de l’infobulles.
      car j’ai beau cherché je ne trouve pas

      Merci d’avance pour votre aide

      bonne soirée

    Répondre à ce message

  • Bonjour,

    il y a manifestement une inversion dans la base de données entre les numéros de départements des Pyrénées-Orientales (66) et des Hautes-Pyrénées (65).

    ... à corriger.

    Sinon très bon plugin, merci

    Répondre à ce message

  • 5
    Haqqtiviste

    bonjour

    erreur à l’install du plugin

    spip 210, Zpip, theme keepitsimple
    plugins divers et variés (gis, google map api, agenda, liste...)

    • Haqqtiviste

      mais apparement fonctionnement normal quand même.
      avec un signalement dans l’admin des plugins comme quoi il y a un echec à l’install...

    • Mais... quelquechose m’échappe... comment le fond de carte est il dessiné ? Ou bien : comment les départements sont ils colorés de différentes ciouleurs ??? Il faut fournir une carte de france sur laquelle les maps sont appliquées ? et on peut en changer sur un même site mais selon la carte ? La doc est silencieuse sur ce point pourtant essentiel...

    • Heu... je ne comprend pas vraiment la question là... Comme pour toute <map> HTML, celle générée par ce plugin s’applique sur une image (balise <img>) appelée dans le modèle.
      Ce plugin fourni donc 2 cartes de France avec le découpage en département (une avec les départements colorés en une 12aine de couleurs, l’autre en mono-teinte) : voir les fichiers france_departements.png et france_departements_mono.png à la racine du dossier du plugin. Tout est prévu pour que les utilisateurs (webmestre compris) n’aient rien d’autre à faire que de placer le modèle dans les articles ou squelettes...

    • pamillet

      ce qui serait génial, ce serait d’avoir un fonds de carte neutre qui se colore selon un tableau de chiffres.... (base pour analyses électorales....) Bon, ca change totalement de sujet ?

      pam

    • Non, ça ne change pas vraiment de sujet mais simplement de niveau de complexité...
      Pour préciser le problème :

      • tel que livré actuellement ça n’est pas possible (le HTML ne gère pas la coloration des zones d’une <map>)
      • pour arriver à cet objectif on peut en revanche envisager de passer par un fichier SVG (= format XML pour les dessins vectoriels, cf svg ) des départements, fichier généré via une BOUCLE qui permettrait de récupérer un code couleur associé au département.
        Éventuellement (si on veut être compatible tous navigateurs puisque Internet Explorer ne gère pas le SVG « nativement »), on peut même faire générer une image JPG (ou PNG) à partir du SVG en utilisant la bibliothèque ImageMagick (si installée sur le serveur...).

      Moralité : le code de ce plugin est sur la zone, si tu veux faire l’implémentation de cette fonctionnalité supplémentaire, pas de problème pour l’ajouter à l’existant !

    Répondre à ce message

  • dauphin

    Merci pour ce plugin.
    Je suis cependant béotien et je n’arrive pas à l’exploiter. En effet, quand on clique sur un département il renvoie une adresse du genre
    ... article10&deprt=83.
    Comment accéder à cette adresse et ou mettre les articles correspondant> à ce département ?Merci pour vos lumières...

    Répondre à ce message

  • 4
    Loic972

    Super plugin mis a part que nous « les dom-tom » sommes toujours oublié..... à croire que nous ne parlons pas français....

    • Oui, la carte que j’ai pu récupérer ne comprend malheureusement que les départements métropolitains... je suis bien conscient qu’elle est incomplète !
      Du coup je serais super-content que tu me fournisse une version complétée avec les DOM-TOM ...ou que tu la commit directement sur la zone : le développement de ce plugin est « ouvert » à tous :-)

    • Ok sans problème mais tu veux que je t’envoi sa de quel manière ? Car je ne sais pas trop comment ton plugin fonctionne et comment tu gère ta carte donnes moi un peu plus de précision stp et je serais ravi de t’aider si sa rentre dans mes compétence :) je ne suis pas un super pro de spip lol mais je me débrouille.

    • super simplement : tu récupère la carte france_departements.png à la racine du dossier de ce plugin, tu ajoute les 3 départements DOM dessus (par exemple à l’Ouest, dans le coin en bas à gauche) puis tu me l’envoie (cy.altern[chez]gmail).
      Attention : si on ne veux pas avoir à reprendre les coordonnées de tous les départements il est important que tu ne modifie pas les dimensions (hauteur x largeur) de cette image !

    • Je viens de télécharger le plugin (très pratique, merci !) mais il n’y a toujours pas les DOM.

      Alors j’ai mis un peu d’huile de coude et ajouté ça au CSV qui sert à l’installation.

      Une démo et les fichiers (CSV + Cartes PNG & SVG basées sur celle fournie avec le plugin)

    Répondre à ce message

  • Merci pour ce plugin !
    Je l’ai utilisé pour afficher le nombre d’auteurs (en réalité, de visiteurs inscrits) par département.

    Pour cela, j’ai utilisé champ extra pour mettre le numéro de département lors de l’inscription sur le site, et j’ai modifié le modèle comme cela (ligne 31) :

    title="#NOM[(#BULLEHTML|!={1}|oui)|][ (#AFF_REGION|=={1}|oui)[[(#BULLEHTML|=={1}|oui)- ](#REGION)]]<BOUCLE_candidats(AUTEURS){tout}{doublons}{departement=#NUM_DEPARTEMENT}></BOUCLE_candidats>#TOTAL_BOUCLE[(#TOTAL_BOUCLE|>{1}|?{' candidatures',' candidature'})] dans ce d&eacute;partement<//B_candidats>"

    Répondre à ce message

  • 2

    Bonjour cy_altern,
    Très intéressant ! Questions :

    -  Est-ce que l’installation du plugin va me charger Cluetip sur tous les pages du site ? Et si on met |bullehtml=1 est-ce que le chargement de Cluetip est évité ?
    -  As-tu des pistes pour étendre cela à d’autres pays (Allemagne, Italie, Polgne ...) ? Comment s’y prendre ?

    merci, Paolo

    • - Est-ce que l’installation du plugin va me charger Cluetip sur tous les pages du site ?
      -  Et si on met |bullehtml=1 est-ce que le chargement de Cluetip est évité ?

      L’appel du fichier js de cluetip n’est fait que dans le modèle departements.html
      et est conditionné par le paramètre bullehtml : si celui-ci est égal à 1, il n’y a pas intégration de la balise <script...>

      Pour plus de précisions sur ces 2 questions voire le code du modèle modeles/departements.html

      - As-tu des pistes pour étendre cela à d’autres pays (Allemagne, Italie, Pologne ...) ? Comment s’y prendre ?

      2 éléments sont à considérer pour rendre ce plugin utilisable pour d’autres pays :

      • le fichier image de la carte : actuellement il est appelé « en dur » dans le code du modèle
        <img alt="Departements"
            usemap="#departements"
            src="[(#CHEMIN{[(#MONO|==1}|?{france_departements_mono.png,france_departements.png})]})]"

        mais il semble peu compliqué de passer en paramètre du modèle le nom du pays pour récupérer la carte correspondante :

        <img alt="Departements"
            usemap="#departements"
            src="[(#CHEMIN{[(#MONO|==1}|?{#PAYS_departements_mono.png,#PAYS_departements.png})]})]"

        le raccourcis <departements|pays=pologne> donnerait donc dans le html de sortie : ... src="pologne_departements_mono.png"... ou ... src="pologne_departements.png"...

      • l’image-map qui rend la carte réactive (balise <map name="departements"> comportant autant de <area shape="poly".../> qu’il y a de départements) est générée via une BOUCLE dans la table spip_imap_departements.
        On peut donc envisager d’ajouter un champ pays dans cette table et d’y intégrer les paramètres nécessaires pour les « départements » (ou Länders ou autres subdivisions administratives) des différents pays pour lesquels on possède les données.
        La boucle serait alors modifiée pour ne sortir que les données du pays passé par el paramètre |pays=.... Ce qui donnerait : quelque chose du style
        <BOUCLE_departs(IMAP_DEPARTEMENTS){par id_departement}{pays = #PAYS}>

      A partir de là il me semble quand même que le plus long est de faire les tracés des zones cliquables pour chaque pays et l’intégration de ces données dans la table spip_imap_departements !

    • Merci de cette réponse tres exacte !
      J’imagine que des cartes pour les autres pays existent. On va voir un peu : si on peut les trouver et les adapter.

    Répondre à ce message

  • 1

    Bonjour,
    merci pour ce plugin. J’ai cependant un problème et je ne suis pas du tout calé en programmation. Comment faire pour que en cliquant sur chaque région et non pas département , cela renvoie vers une page spécifique (1 pour chaque région) ?
    En attendant une réponse charitable, je continue « mes essais de bricolage ».

    • Une solution possible pas trop compliquée :

      • créer un article par région et mettre le nom de la région (exactement tel qu’il est écrit dans l’info-bulle) dans un des champs (disons le champ titre par exemple) : on aurait donc Bretagne comme titre de l’article sur la Bretagne, Picardie pour celui de la Picardie, etc...
      • faire une page region.html dans ton dossier /squelettes qui soit une copie pure et simple de la page article.html du squelette que tu utilise (ou /squelettes-dist/article.html si tu utilise le squelette par défaut)
      • faire un sous-dossier /squelettes/modeles dans lequel tu place une copie du fichier plugins/imagemap_departements/modeles/departements.html
      • modifier ce fichier pour appeler la page region.html avec le nom de la région lorsque l’on clique sur un département, ce qui revient à modifier la ligne 33 pour avoir :
            href="[(#URL_PAGE{region}|parametre_url{region,[(#REGION)]})]"
      • dans la page region.html tu modifie la boucle principale pour que l’article choisi soit celui qui a dans son surtitre le numéro du département :
        <BOUCLE_principale(ARTICLES) {titre = #ENV{region} }>

      Ainsi tu aura sur chaque département un lien du style spip.php ?page=region&region=Bretagne qui ouvrira la page region.html avec l’article de la région Bretagne.

    Répondre à ce message

  • Rivereine2

    Bonjour

    J’ai découvert un petit problème

    lorsque l’on clique sur la carte des départements, sur le code département 02 Aisne (le n° de département étant dans le champ surtitre de l’article amicale dédié à ce département)

    3 pages sont ramenées à l’affichage :

    -  deux articles incorrects liés aux codes de la Corse 2A et 2B
    -  l’article correct lié au code département 02

    ce problème a-t-il déjà été signalé ? sachant que c’est la solution avec la page amicale
    et

    qui est appliquée

    merci d’avance pour l’aide

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom