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: cf cet exemple http://galactron.org/Utilisation-du...

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.

updated on 2 October 2019

Discussion

16 discussions

  • 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) :

    1. 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>"

    Reply to this 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
        1. <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.

    Reply to this 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:
        1.     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:
        1. <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.

    Reply to this 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

    Reply to this message

  • Laurent Ozp

    Je livre l’adaptation que j’ai faite du plug-in :
    ce que je voulais, c’est qu’en cliquant sur un département de la carte, le lien ouvre une page rassemblant les informations classées géographiquement par académie.

    Dans mon site, j’ai créé les mots clé : un par académie, et j’ai affecté le mot clé adéquat aux articles du site.

    Dans la base de données avec PhpMyAdmin j’ai changé pour chaque département la valeur du champ REGION pour y mettre le numéro du mot clé de l’académie.

    Dans le squelette departements.html , j’ai modifié la ligne 33 de la façon suivante :
    href=“#URL_SITE_SPIP/spip.php?mot#REGION”

    Pour l’Outre Mer, je me suis contenté de liens sous la carte.

    Y avait-il plus simple comme méthode ? En tout cas, ca fonctionne.
    Merci pour le plug in.

    Pour voir le résultat : http://www.association-ozp.net

    Reply to this message

  • 4
    chantal.a.lefeuvre@orange.fr

    Bonjour

    Bravo et merci pour ce nouveau plugin fort utile et très attendu

    j’affiche parfaitement la carte après appel dans un article

    le lien_param affiche bien le département sur lequel on a cliqué
    cependant je ne sais pas comment coder lien_base pour afficher une page “amicale”
    différente par département (j’ai 1 fiche amicale par département)

    le code suivant que j’utilise est ok pour 1 seul département car j’indique le n° de l’article correspondant

    1. <departements|lien_base=http://127.0.0.1/farlcl/spip/spip.php?article137|lien_param=depart|aff_region=1>

    pouvez-vous m’aider merci d’avance

    • Plusieurs méthodes sont possibles pour gérer cette situation mais toutes nécessitent un minimum de création de fichiers de squelettes...
      A priori une solution simple pourrait être:

      • dans les articles qui constituent les fiches amicales mettre le numéro du département dans un des champs (disons surtitre par exemple): on aurait donc 77 dans le surtitre de l’article de l’amicale de Seine et Marne
      • faire une page amicale.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)
      • dans l’appel du modèle tu fera donc:
        1. <departements|lien_base=spip.php?page=amicale|lien_param=depart|aff_region=1>
      • dans la page amicale.html tu modifie la boucle principale pour que l’article choisi soit celui qui a dans son surtitre le numéro du département:
        1. <BOUCLE_principale(ARTICLES) {surtitre = #ENV{depart} }>

      Ainsi tu aura sur chaque département un lien du style spip.php?page=amicale&depart=XX qui ouvrira la page amicale.html avec l’article du département numéro XX.

      Pour plus de précisions voir les documentations des modèles et des squelettes sur http://spip.net

      PS: de toute façon il ne faut pas mettre l’adresse complète du site dans le paramètre |lien_base sous peine d’avoir un lien qui ne fonctionnera pas lorsque tu passera sur un autre serveur que ton 127.0.0.1... Dans ton exemple il serait nettement préférable de faire:

      1. <departements|lien_base=spip.php?article137|lien_param=depart|aff_region=1>
    • un grand merci pour ton retour
      j’avais tenté aussi la page amicale mais sans parvenir à relier l’article approprié (ta proposition est très simple)

      entre temps, j’ai trouvé une autre solution :

      j’ai ajouté 2 champs à la table departements (“n° page_article”, “nom_président” dans la perspective d’afficher le nom du president dans l’infobulle pour chaque département )

      j’ai complété les deux champs des informations appropriées

      j’appelle la carte France depuis un seul article ou une seule rubrique

      j’ai modifé le modèle “departements.html” que j’ai déplacé dans mon dossier squelettes
      href="[(#LIEN_BASE|sinon{[(#URL_PAGE{article, id_article=#PAGE_ARTICLE})]...le reste est inchangé

      lorsque l’on clique sur chaque departement, on a bien l’article amicale correspondant

      mais dans la mesure où j’ai ajouté 2 champs supplémentaires à la table qu’est-ce qui va se passer lors d’une actualisation du plugin ?

    • A priori, vu que ce plugin est exactement conçu pour ce genre d’usage (ajout de champs, bidouilles des modèles...) tout devrait bien se passer lors des mises à jour si tu as bien mis ta version du squelette departements.html dans le répertoire /squelettes (et non pas modifié directement le fichier du plugin!).

    • merci pour tout
      finalement, ne sachant pas ce qui allait se passer en cas de mise à jour du plugin je me suis ralliée à ta solution qui fonctionne parfaitement aussi
      il me reste à évaluer les performances en terme de temps de réponse des deux solutions
      bien cordialement

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom