frendeitpt

mapael

carte

Cette action, basée sur le script jQuery Mapael de Vincent Brouté (neveldo), utilise le script Raphaël

C'est cette association qui nous permet d'afficher des cartes vectorielles dynamiques.

🆙 mapael : Affiche une carte vectorielle interactive

Cliquer pour lire la documentation

syntaxe
{up mapael=nom_carte}
{default-area | ...}
{default-plot | ...}
{default-link | ...}
{area=ID | value=X | ...}
{plot=ID | coord=lat,lon | value=[X1,X2] | text=... | ...}
{link=ID | between=lat1,lon1,lat2,lon2 | factor=0.5 | ...}
{link=ID | between=plot-ID-1, plot-ID-2 | factor=0.5 | ...}
{legend-area=TITRE | ...}
{legend-plot=TITRE | ...}
{legend-slice=LABEL | value=X | ...}
{legend-slice=LABEL | min=X | max=Y | ...}
{/up mapael}
# Options shortcode principal :
zoom=min,max | zoom-init=niv,lat,lon | csv-xxx | ...
# Options communes à tous les shortcodes secondaires :
bd-color | bd-color-hover | bd-dash | bd-width | bd-width-hover | bg-color | bg-color-hover
class | eventHandlers | href | target | transform-hover
text | text-attrs | text-attrs-hover | text-margin | text-position
tooltip | tooltip-class | tooltip-offset-left | tooltip-offset-top | tooltip-overflow-right | tooltip-overflow-bottom
options
# Options spécifiques à defaultPlot et plot
type | size | height | width | url | path
saisie rapide : circle=W,color | square=W,color | image=WxH,url | svg=WxH,path
# Options pour area
value
# Options pour plot
value | coord | plotsOn
# Options pour link
between | factor
# Options pour legend-area et legend-plot
mode | exclusive | display | legend-class
ml | mb | ml-label | ml-title |mb-title | color-title | color-label | color-label-hover
hide-enabled | hide-opacity | hide-animation
# Options pour legend-slice
value | min | max
legend-slice/label | clicked | display
legend-font-size | legend-bd-color | legend-bd-width
author LOMART version UP-2.3 license GNU/GPLv3 credit script xxx de xxx tags widget
  • mapael: nom de la carte (fichier .js)
  • zoom: valeur mini,maxi du zoom
  • zoom-init: niveau initial et coordonnées du centre
  • options: liste des options au format mapael. ex: default-area: {attrs:{fill:"#dda0dd"},attrsHover:{fill:"#FF00FF"}}
  • make-html = 1: par défaut, les blocs pour la ou les légendes sont crees au-dessous de celui pour la carte.
  • map-class = map: Nom de classe CSS du conteneur de la carte
  • csv-areas: fichier CSV pour définir les areas. Les sous-shortcodes 'area' sont ignores
  • csv-areas-model: modele pour construire la définition d'une zone
  • csv-plots: fichier CSV pour définir les plots. Les sous-shortcodes 'plot' sont ignores
  • csv-plots-model: modele pour construire la définition d'un point
  • csv-links: fichier CSV pour définir les links. Les sous-shortcodes 'link' sont ignores
  • csv-links-model: modèle pour construire la définition d'un lien
  • tooltip-class: Nom de classe CSS des infobulles
  • tooltip-style: Proprietes CSS pour les infobulles
  • before-init: voir demo
  • after-init: voir demo
  • class: classe(s) ajoutees au bloc principal
  • style: style inline ajoute au bloc principal
  • css-head (base-css): style ajoute dans le HEAD de la page

    Accrochez-vous, cette action offrant énormément de possibilités, la démo se doit d'être exhaustive.

    On va commencer par une démonstration des possibilités avec une utilisation basique. Les différentes options seront ensuite détaillées.

    Pour voir directement le résultat, allez sur la page exemples

    Un exemple simple pour commencer

    Alternative content for the map

    Ce simple shortcode affiche une carte des régions françaises qui changent de couleur au survol de la souris.

    {up mapael=france_regions_2016}

    Pour utiliser une autre carte, il suffit d'aller sur le dépôt Github du créateur du script mapael pour télécharger le fichier .js du pays désiré, puis le déposer dans le dossier maps de l'action.

    Il est possible d'utiliser un autre dossier en le spécifiant dans le shortcode.
    Exemple : /media/plg_content_up/maps/france_regions_2016.
    Il n'est pas utile de préciser l'extension.

    Personnaliser la carte

    Alternative content for the map

    Les principales options pour agir globalement sur la carte sont peu nombreuses.

    En dehors des habituels id, class, style et css-head, on dispose de 2 options pour configurer le zoom.

    • zoom affiche des petits boutons plus, moins et reset pour agrandir la carte. Il suffit d'indiquer les valeurs mini et maxi séparées par une virgule. (ex: zoom=0,15). Activer cette option permet également de zoomer avec la roulette d'une souris ou les doigts sur un mobile
    • zoom-init est le niveau de zoom initial ainsi que les coordonnées du centre de la carte. La position centrale peut être indiquée par la longitude/latitude ou la position x/y dans le fichier SVG. Dans cet exemple, nous centrons sur la ville de Rennes avec un grossissement de 2.
    {up mapael=france_regions_2016 | class=bg-bleuPale | zoom=0,15 | zoom-init=4,48.1138,-1.6778}

    Sur la carte ci-contre, la mer est en bleu

    La plupart des options disponibles pour le shortcode sont réservées à des usages avancés que nous verrons par la suite.

    Personnaliser les zones du SVG (areas)

    Le fichier javascript de la carte définit des zones (areas) qui sont des départements dans notre exemple.
    Il est possible de les enrichir globalement ou individuellement.

    Modifier toutes les areas

    Alternative content for the map

    Pour indiquer le comportement par défaut pour toutes les régions, nous utiliser un shortcode interne au shortcode principal.

    {up mapael=france_regions_2016 | class=bg-bleuPale | zoom=0,15}
      {default-area | bg-color=#9ACD32 | bg-color-hover=green | bd-color=#ced8d0 }
    {/up mapael}
    

    Maintenant les départements sont en vert clair (bg-color), et passent en vert plus foncé au survol de la souris (bg-color-hover). Les bordures sont en gris-vert (bd-color)

    Les options sont nombreuses. Je vous laisse les découvrir dans la section options des shortcodes de la démo

    Modifier une seule area

    Alternative content for the map

    La première étape est d'identifier le nom de la zone. Pour cela, il faut afficher le fichier de la carte, puis repérer le nom des zones qui sont les clés de la section elems.

    'elems': {
      "FR-BRE" : "M 119.49 146.68 C 117.31 147.65 ...

    Dans notre exemple, l'identifiant des zones est le code ISO de la région

    A l'aide d'un sous-shortcode area, nous allons configurer la région Bretagne (FR-BRE).

    {up mapael= france_regions_2016 | class=bg-bleuPale | zoom=0,15}
      {default-area | bg-color=#9ACD32 | bg-color-hover=green | bd-color=#ced8d0}
      {area=FR-BRE | text=Bretagne\nFR-BRE | tooltip=[b]Bretagne[/b][br]code iso : FR-BRE | bg-color=IndianRed}
    {/up mapael}
    

    Note : le contenu de l'infobulle peut-être du HTML (saisie en bbcode), par contre le texte est obligatoirement du texte simple. Pour insérer un saut de ligne, il faut utiliser le code \n

    Ajouter un point sur la carte

    Alternative content for the map

    Pour ajouter une ville sur la carte, nous utilisons un sous-shortcode Plot.

    L'argument principal plot est l'identifiant du point. Il est obligatoire d'indiquer ses coordonnées, soit géographique (latitude, longitude) ou celle sur SVG (y,x). Le point indiquant Paris est symbolisé par une petite Tour Eiffel avec le texte Paris à côté. Une infobulle est définie par l'option tooltip.

    {up mapael= france_regions_2016 | class=bg-bleuPale | zoom=0,15}
      {default-area | bg-color=#9ACD32 | bg-color-hover=green | bd-color=#ced8d0}
      {default-plot | bg-color=red | options=text:[attrs:[fill:"red","font-size":32]]}
      {area=FR-BRE | text=Bretagne | tooltip=[b]Bretagne[/b][br]code iso : FR-BRE | bg-color=IndianRed}
      {plot=Paris | coord=48.86,2.3444 | text=Paris | tooltip=[b]Paris[/b][br]Ville lumière  | image=40x70,/images/osmap/tour-eiffel.png}
    {/up mapael}
    

    Comme pour les areas, le sous-shortcode default-plot permet de définir les propriétés pour tous les points.

    Récupérer les coordonnées d'un point

    Pour obtenir la latitude et longitude d'un point, plus simple est d'utiliser GoogleMaps

    1. clic droit sur le point désiré
    2. clic sur les coordonnées pour les copier dans le presse-papier
    3. coller directement comme argument de l'option coord

    La méthode est similaire avec OpenStreetMap

    Ajouter un lien entre 2 points

    Alternative content for the map

    Pour tracer une ligne entre 2 points, on utilise un sous-shortcode link. L'argument principal est un identifiant qui doit être unique.

    Pour définir son emplacement, on peut indiquer les coordonnées géographiques des points de départ et d'arrivée ou les identifiants des plots impliqués

    {up mapael= france_regions_2016 | class=bg-bleuPale | zoom=0,15}
      {default-Area | bg-color=#9ACD32 | bg-color-hover=green | bd-color=#ced8d0}
      {default-Plot | bg-color=red | options=text:[attrs:[fill:"blue","font-size":32]]}
      {area=FR-BRE | text=Bretagne\nFR-BRE | tooltip=[b]Bretagne[/b][br]code iso : FR-BRE | bg-color=IndianRed}
      {plot=paris | coord=48.86,2.3444 | text=Paris | tooltip=[b]Paris[/b][br]Ville lumière}
      {plot=brest | coord=48.392,-4.492 | text=Brest | text-position=bottom}
      {default-Link | bd-width=8}
    {link=Nantes-Lyon | between=47.20989, -1.5840, 45.77291, 4.83199 | factor=0.1 | tooltip=de Nantes à Lyon | bd-dash=- } {link=2 | between=paris,brest| factor=-0.7 | tooltip=Liaison Paris-Brest | bd-color=red} {/up mapael}

    l'option factor indique l"amplitude de l'arrondi. Tooltip contient le texte de l'info-bulle. bd-dash permet l'utilisation de pointillés et bd-color définit la couleur

    Notez l'utilisation de default-link pour définir la largeur des traits à 8 (bd-width).

    Ajouter une légende

    Alternative content for the map
    Alternative content for the legend

    L'ajout d'une légende "dynamique" se fait avec quelques lignes.

    • la première (obligatoire) indique sa portée : legend-plot ou legend-area
    • les suivantes, legend-slice, contiennent les différentes tranches avec les valeurs attendues

    Il est possible d'avoir plusieurs groupes de légendes en répétant cette structure.

    {up mapael=france_regions_2016 | class=bg-bleuPale | zoom=0,15}
      {default-Area | bg=#9ACD32 | bg-color-hover=green | bd-color=#ced8d0}
      {default-Plot | bg-color=red | options=text:[attrs:[fill:"blue","font-size":32]]}
      {area=FR-BRE | text=Bretagne\nFR-BRE | tooltip=[b]Bretagne[/b][br]code iso : FR-BRE | bg-color=IndianRed}
      {plot=paris | value=2175601 | coord=48.86,2.3444 | text=Paris | tooltip=[b]Paris[/b][br]Ville lumière}
      {plot=brest | value=202060 | coord=48.392,-4.492 | text=Brest | text-position=bottom}
      {default-Link | bd-width=8}
      {link=1 | between=47.20989, -1.5840,45.77291, 4.83199 | factor=0.1 | tooltip=de Nantes à Lyon | bd-dash=-}
      {link=2 | between=paris,brest| factor=-0.7 | tooltip=Liaison Paris-Brest | bd-color=red}
      {legend-plot=Population en 2018}
      {legend-slice=plus d'un million | min=1000000}
      {legend-slice=moins d'un million | max=999999}
    {/up mapael}

    Données dans un fichier CSV

    Pour le dernier exemple, j'aurais pu saisir les informations pour les 18 régions à l'aide de sous-shortcodes area. Mais la méthode qui consiste à saisir les données dans un tableur présente beaucoup d'avantages :

    • la saisie est facilitée. On se concentre sur les données sans se préoccuper de la syntaxe du shortcode
    • en cas d'évolution ou de changement des données, seul le fichier CSV est modifié
    • dissocier contenu et présentation, facilite la mise en page.

    Sur cet exemple, la couleur des régions est définie par la légende en fonction de sa population. Un clic sur une légende modifie ses éléments reliés sur la carte.

    Alternative content for the map
    Alternative content for the legend
    {up mapael=france_regions_2016
    | class=bg-bleuPale  | zoom=0,15
    | csv-areas=france_regions_2016.csv
    | css-head=#id .mapTooltip img[max-height:80px]#id .mapTooltip[opacity:0.95]}
    
      {default-Area | bg-color=greenYellow| bg-color-hover=green | bd-color=grey | tooltip-overflow-bottom}
    
      {legend-area=Population en 2018 | mode=horizontal}
      {legend-slice=moins de 1 million | max=999999 | bg-color=blueViolet}
      {legend-slice=entre 1 et 2 | min=1000000 | max=3000000 | bg-color=orangeRed}
      {legend-slice=entre 2 et 5 | min=3000001 | max=5000000 | bg-color=indianRed}
      {legend-slice=plus de 5 | min=5000001 | bg-color=crimson}
    
    {/up mapael}

    Le shortcode principal :

    • csv-areas est le nom du fichier. Comme il est localisé dans le dossier maps de l'action, on ne précise pas son chemin.
    • css-head permet de définir des règles pour les infobulles

    Le shortcode secondaire pour les valeurs par défaut :

    • on définit les couleurs des régions, même si peu utile !
    • tooltip-overflow-bottom autorise le débordement des infobulles vers le bas. Indispensable pour la Corse !

    Les shortcodes secondaires pour la légende :

    • legend-area définit le titre et le mode de présentation (horizontal)
    • legend-slice définit le libellé et la tranche de population (min-max). La couleur (bg) est appliquée sur les régions concernées.

    Le fichier CSV et son modèle

    L'exemple ci-dessus concerne des areas (les régions), mais nous pourrions aussi définir des plots (csv-plots) ou des links (csv-links) de la même façon.

    Pour mettre en forme les données contenues dans le fichier CSV (csv-areas), il faut lui fournir un modèle. 

    1. la méthode la plus souple est d'utiliser un fichier texte de même nom que le fichier .csv, mais avec une extension .model
    2. utiliser l'option csv-areas-model, avec la chaîne modèle. A réserver aux configurations simples, car il faut remplacer les {} par des [] et les <> par les entités HTML &lt; &gt;

    Etudions les fichiers utilisés pour notre carte des régions françaises.

    Le fichier CSV avec les données : france_regions_2016.csv

    La première ligne doit obligatoirement contenir le titre des colonnes.
    Ce nom est utilisé comme variable par le fichier model pour construire la chaine paramétrée pour le script.

    id;nom;population;superficie
    FR-ARA;Auvergne-Rhône-Alpes ;7948287;69711
    FR-BFC;Bourgogne-Franche-Comté ;2811423;47784
    FR-BRE;Bretagne ;3318904;27209
    FR-CVL;Centre-Val de Loire ;2576252;39151
    FR-COR;Corse ;334938;8722
    FR-GES;Grand Est ;5549586;57441
    FR-HDF;Hauts-de-France ;6003815;31806
    FR-IDF;Île-de-France ;12174880;12011
    FR-NOR;Normandie ;3330478;29906
    FR-NAQ;Nouvelle-Aquitaine ;5956978;84036
    FR-OCC;Occitanie ;5845102;72724
    FR-PDL;Pays de la Loire ;3757600;32082
    FR-PAC;Provence-Alpes
    Côte d'Azur;5030890;31400
    FR-GUA;Guadeloupe ;390253;1628
    FR-GUF;Guyane (française) ;268700;83846
    FR-MTQ;Martinique ;372594;1128
    FR-LRE;La Réunion ;853659;2512
    FR-MAY;Mayotte;256518;376

    Le fichier pour la mise en forme : france_regions_2016.model

    "%id%":{
    value:"%population%"
    ,tooltip:{content:"<div class='tc'><img src='/images/flags-regions/%id%.png'><br><b>%nom%</b><br>(%id%)</div>Population : %population%<br>Superficie : %superficie%"}
    }

    On retrouve les titres des colonnes du fichier CSV entourés par des signes pourcentages. Ce sont nos variables qui une fois remplacées par les valeurs réelles nous donneras la chaine paramètres attendue par le script mapael. Exemple pour la première ligne de notre CSV.

    "FR-ARA":{
    value:"7948287"
    ,tooltip:{content:"<div class='tc'><img src='/images/flags-regions/FR-ARA.png'><br><b>Auvergne-Rhône-Alpes</b><br>(FR-ARA)</div>Population : 7948287<br>Superficie : 69711"}
    }

    Une astuce pour rédiger le modèle :

    1. ajoutez un shortcode area avec les options désirées. Testez le résultat et adaptez.
    2. une fois satisfait, affichez le source de la page pour copier le code généré par UP
    3. remplacer les valeurs par les noms des colonnes (sans oublier les %) pour avoir la chaine modèle

    A titre d'information, la chaine modèle pour l'option csv-areas-model serait :

     "%id%":[
    value:"%population%"
    ,tooltip:[content:"&lt;div class='tc'&gt;&lt;img src='/images/flags-regions/%id%.png'&gt;&lt;br&gt;&lt;b&gt;%nom%&lt;/b&gt;&lt;br&gt;(%id%)&lt;/div&gt;Population : %population%&lt;br&gt;Superficie : %superficie%"]
    ]

    Vous conviendrez que c'est délicat à relire et à saisir même si les éditeurs wysiwyg transforment automatiquement en entités HTML les signes <>

    Créer sa carte

    Si vous n'avez pas trouvé la carte dont vous avez besoin sur le site mapael-maps, il sera nécessaire de la créer en suivant le tuto create map sur le site de l'auteur.

    Ci-dessous, je vais résumer les étapes pour arriver à ce beau logo joomla.

    1 - récupération du logo SVG sur le site https://worldvectorlogo.com/fr/logo/joomla

    2 - si besoin, retouche du fichier SVG avec Inkscape. Enregistrer le fichier au format SVG Optimisé

    3 - conversion du SVG en fichier JS sur cette page

    4 - Ouvrir le fichier JS dans un éditeur texte pour modifier

    1. la taille de l'image. Perso, j'utilise la taille de la viewbox visible dans le code du SVG d'origine pour déterminer la hauteur et largeur.
    2. le nom des chemins (path). Sauf si vous avez modifié l'ID des paths sous Inkscape

    5 - Vu qu'il ne s'agit pas d'une carte, je n'ai pas besoin de calculer l'origine géographique sur la page getcoords

    6 - la dernière étape consiste à créer les shortcodes pour l'afficher.

    Alternative content for the map
    {up mapael=joomla.js}
      {default-area | bg=#f4f4e8 | stroke=#ced8d0 | bg-hover=#a4e100}
      {area=orange | bg=#F9A541| bg-hover=#EE901F | tooltip=Orange}
      {area=vert | bg=#7AC143| bg-hover=#6DAC19 | tooltip=Vert}
      {area=rouge | bg=#F44321 | bg-hover=#B91814 | tooltip=Rouge}
      {area=bleu | bg=#5091CD| bg-hover=#3968CA | tooltip=Bleu}
    {/up mapael}

    Attention : le nom de la carte dans le fichier .js doit être identique au nom du fichier.
    Seuls les lettres a-z, les chiffres 0-9 et le signe underscore sont autorisés pour le nom de la carte et (donc) du fichier.

    Les options des shortcodes

    Les options sont classées par shortcodes principal et secondaires. Certaines options, communes à plusieurs shorcodes secondaires, sont regroupées pour faciliter la lecture.

    Pour chaque option, il est indiqué

    • le nom de l'option à saisir dans le shortcode
    • le type de donnée attendue et sa valeur par défaut (en gras)
    • l'équivalent pour saisir directement le paramètre au format attendu par le script mapael
    • des informations et commentaires

    shortcode principal

    Option valeur attendue paramètre script mapael
    mapael nom du fichier de la carte map: {name:
    Si le chemin n'est pas précisé, elle est recherchée dans le sous-dossier maps de l'action
    zoom min,max map: {zoom:{enabled:true,minLevel:min,maxLevel:max}
    niveau mini-maxi pour le zoom
    zoom-init niv,lat,lon map: {zoom,init:{level:niv,latitude:lat,longitude:lon}
    niveau initial du zoom et coordonnées du centre de la carte
    csv-areas
    csv-plots
    csv-links
    nom du fichier csv (voir section CSV) --
    csv-areas-model
    csv-plots-model
    csv-links-model
    chaine ou nom fichier .model (voir section CSV) --
    options liste des options au format mapael. ex: ,defaultArea: {attrs:{fill:"#dda0dd"},attrsHover:{fill:"#FF00FF"}}
    Par défaut, l'action génère le code HTML pour accueillir la carte avec la ou les légendes définies au-dessous. Pour personnaliser la mise en page, il est possible d'écrire, à côté du shortcode, la structure HTML qui va accueillir la carte et ses légendes. Voir utiliser son template HTML
    map-class Nom de classe CSS du conteneur de la carte. voir structure HTML map:{cssClass:
    tooltip-class
    tooltip-style
    nom classe map:{tooltip:{cssClass:
    nom de la classe ou style css pour les infobulles
    after-init
    before-init
    chaine paramètre (voir site de l'auteur) map: {beforeInit : ...
    map: {afterInit : ...
    id --
    indispensable pour créer son template HTML
    class
    style
    nom classe(s) --
    classe(s) ou style pour le conteneur principal de la carte
    css-head code CSS --
    permet de définir des règles CSS (spécifiques à cette instance en utilisant #id dans les sélecteurs )

    Options communes

    Options générales

    Ces paramètres sont appliqués à l'élément appelant. Exemple href=//up.lomart.fr dans un shortcode default-plot produira defaultPlot{href:"//up.lomart.fr"}
    Toutes les dimensions sont exprimées en pixel. Il est inutile de préciser l'unité.

    Utilisé par tous les shortcodes secondaires : default-area, default-plot, default-link, area, plot, link, legend-area, legend-plot, legend-slice

    Option valeur attendue ajouté à l'élément parent du script mapael
    bd-color couleur d'une bordure attrs:{stroke:
    bd-color-hover couleur d'une bordure lors d'un survol attrsHover:{stroke:
    bd-dash motif d'un lien parmi : - | . | -. | -.. | -- | - . | --. | --.. attrs:{"stroke-dasharray":
    bd-width entier. largeur en pixel d'une bordure attrs:{"stroke-width":
    bd-width-hover entier. largeur en pixel d'une bordure lors d'un survol attrsHover:{"stroke-width":
    bg couleur de fond de l'élément attrs:{fill:
    bg-hover couleur de fond au survol d'un élément attrsHover:{fill:
    class nom de la classe attribuée à l'élément cssClass:
    eventHandlers fonction js exécutée lors d'un événement (voir exemple) eventHandler:
    href lien pour l'élément href:
    opacity opacité de l'élément de 0 à 1 attrs:{opacity:
    opacity-hover opacité de l'élément lors survol attrsHover:{opacity:
    target cible d'un lien (href) parmi _blank | _self target:
    text texte affiché dans l'élément text:{content:
    text-attrs attributs au format Raphael text:{attrs:{
    text-attrs-hover attributs lors survol au format Raphael text:{attrsHover:{
    text-margin marge en pixels text:{margin:
    text-position position du texte parmi : inner | right | left | top | bottom text:{position:
    tooltip contenu de l'infobulle en bbcode tooltip:{content:
    tooltip-class nom de la classe attribuée à l'infobulle tooltip:{class:
    tooltip-offset-left valeur (px) du décalage à gauche de l'infobulle tooltip:{offset:{left:entier
    tooltip-offset-top valeur (px) du décalage vers le haut de l'infobulle tooltip:{offset:{top:entier
    tooltip-overflow-right 1|0 autoriser le débordement à droite tooltip:{overflow:{right:true}}
    tooltip-overflow-bottom 1|0 autoriser le débordement vers le bas tooltip:{overflow:{bottom:true}}
    transform-hover transformation de l'élement au survol. voir Raphael. ex: r10t20 attrsHover:{transform:

    Options spécifiques aux plots

    Elles permettent de définir la forme, la taille et le contenu des plots sur la carte.

    Option valeur attendue ajouté à l'élément parent du script mapael
    type type du point parmi : circle | square | image | svg type:"xxx"
    size fct|get_size size:entier
    height déduit de size par UP height:entier
    width déduit de size par UP width:entier
    url fct|get_image_path url:"URL"
    path -- path:svg-path
    Forme condensée pour saisie rapide La taille peut être omise si elle est définie dans le shortcode default-plot
    circle diamètre et couleur du cercle. ex: circle=20,#F00 type="circle",size=20,attrs:{fill:{"#F00"}
    square coté et couleur du carré. ex: square=20,#F00 type="square",size=20,attrs:{fill:{"#F00"}
    image taille et chemin d'une image. ex: images=30x20,images/pin.png type="image",width=30,height:20,url:"images/pin.png"
    svg taille et path-svg. ex: svg=30x20,path-svg type="image",width=30,height:20,path:"path-svg"

    Option disponible pour tous les shortcodes secondaires

    Elle offre l'opportunité d'indiquer des paramètres non prévu par l'action UP, mais disponible dans le script MAPAEL ou RAPHAEL

    Son utilisation demande une bonne maitrise du javascript et des bibliothèques concernées. Aucun support ne sera fourni.

    Option valeur attendue ajouté à l'élément parent du script mapael
    options code au format mapael et Raphael. Les accolages {} sont à remplacer par des crochets [] le code tel que saisi est ajouté à l'élément concerné par le shortcode secondaire.

    Shortcodes secondaires valeurs par défaut

    default-area, default-plot, default-link

    Seules les Options générales sont utilisables.

    Pour default-plot, les options spécifiques aux plots sont également utilisables

    Shortcodes secondaires pour éléments sur la carte

    area

    les Options générales plus

    Option valeur attendue ajouté à l'élément parent du script mapael
    value valeur(s) utilisée(s) par les légendes. Ex : 100 ou [100,foo] value:

    plot

    les Options générales, les options spécifiques aux plots plus

    Option valeur attendue ajouté à l'élément parent du script mapael
    value valeur(s) utilisée(s) par les légendes. Ex : 100 ou [100,foo] value:
    coord latitude et longitude du point
    coordonnées y,x sur la carte
    latitude:float ,longitude:float
    y:entier , x:entier
    plotson le point sera ajouté au centre de la zone (area) définie par son ID (argument principal du shortcode area plotsOn:

    link

    Un shortcode link permet de tracer une ligne entre 2 points de la carte. Il accepte toutes les Options générales plus 2 options qui lui sont spécifiques.

    Option valeur attendue ajouté à l'élément parent du script mapael
    between latitude et longitude origine et destination. Ex: lat1,lon1,lat2,lon2
    ID des points origine et destination. Ex : paris,brest
    between:[{latitude:lat1,longitude: lon1},{latitude:lat2,longitude:lon2}]
    between:["paris","brest"]
    factor courbe de la ligne. Un facteur négatif inverse la courbe. 0.4 par défaut. factor:0.4

    Shortcodes secondaires pour les légendes

    La définition d'une légende se fait en 2 étapes :

    1. legend-plot ou legend-area définit sur quels éléments porte l'analyse, ainsi que les règles de présentation
    2. legend-slice pour définir les différentes tranches de valeurs

    legend-area & legend-plot

    Option valeur attendue ajouté à l'élément parent du script mapael
    legend-area
    legend-plot
    le titre de la légende legend:{area:{title:
    legend:{plot:{title:
    mode orientation de la légende : horizontal ou vertical (defaut) mode:vertical
    exclusive 1 pour permettre à l'utilisateur d'activer un seul élément de la légende à la fois. 0/false par défaut exclusive:true
    display Affiche la légende. 1/true par défaut display:true
    legend-class classe attribuée au bloc contenant la légende. Voir structure du html cssClass:nom
    ml
    mb
    marge gauche et marge basse pour le bloc légende marginLeft:x & marginBottom:x
    ml-label marge gauche devant chaque libellé marginLeftTitle:x & marginBottomTitle:x
    ml-title
    mb-title
    marge gauche et marge basse pour le titre marginLeftTitle:x
    marginBottomTitle:x
    color-title couleurs du titre titleAttrs:{fill:
    color-label
    color-label-hover
    couleurs des libellés au repos et lors survol labelAttrs:{fill:
    labelAttrsHover:{fill:
    hide-enabled cache les éléments de la carte lorsque l'utilisateur clique sur une étiquette de la légende. true par défaut hideElemsOnClick:{enabled:true
    hide-opacity opacité des éléments cachés. 0.2 par défaut hideElemsOnClick:{opacity:0.2
    hide-animation durée de l'animation lors du masquage des éléments correspondants de la carte (en millisecondes). 300 par défaut hideElemsOnClick:{animDuration:300

    legend-slice

    Option valeur attendue ajouté à l'élément parent du script mapael
    la tranche ou la valeur ciblée est définie à l'aide des options ci-dessous
    value valeur unique indiquée par l'option value d'une area ou d'un plot sliceValue:
    min
    max
    valeur minimale et maximale de la valeur d'une area ou d'un plot min:
    max:
    mise en forme de la tranche
    legend-slice
    label
    le libellé de la tranche label:
    clicked clicked:true
    display display=true
    legend-font-size taille de la police en px legendSpecificAttrs:{size:
    legend-bd-color couleur de la bordure legendSpecificAttrs:{stroke:
    legend-bd-width taille de la bordure en px legendSpecificAttrs:{stroke-width:

    Structure des paramètres

    Pour faciliter la compréhension des fichiers .model pour les CSS, mais aussi pour la recherche d'erreurs, vous trouverez ci-dessous un mémo pour la structure du script généré par UP pour le script mapael

    $("#up-xxx-yy").mapael({
    map: {
        name: "france_departments"
        ,defaultArea {}
        ,defaultPlot {}
        ,defaultLink {}
    }
    ,legend: {
        area / plot:{
            title:"titre"
            ,slices:[
                {label: "1"}
                {label: "2"}
            ]
        }
    }
    ,areas: {
        "zone-1" : {value: "1", …}
        ,"zone-2" : {value: "2", …}
    }
    ,plots: {
        "point-1": {value: "1", longitude:1.23, latitude:48.65}
        ,"point-2": {value: "2", plotOn:"zone-1"}
    }
    ,links: {
        "link-1": {between:[{latitude:24.70,longitude:-5.40} ,{x:560,y:280}], factor:1}
        ,"link-1": {between:["point-1","point-2"], factor:0.3}
    }
    });

     

    Structure du HTML

    Par défaut, l'action affiche la carte sur toute la largeur du conteneur parent avec l'éventuelle et unique légende au-dessous. Ceci est fait par la structure HTML ci-après.

    Si vous voulez modifier cette mise en page ou avoir plusieurs légendes, vous devez créer les blocs HTML pour les recevoir et ajouter l'option make-html=0 dans le shortcode principal.

    Consulter les différents exemples sur le site du créateur du script mapael et en particulier celui-ci : Map with multiple plotted cities legends that handle different criteria

    {up mapael=carte}
       {shortcodes secondaires}
    {/{up mapael}
    <div id="up-000-01" class="..."  style="...">
       <div class="map">
          <span>Alternative content for the map</span>
       </div>
       <div class="plotLegend">
          <span>Alternative content for the legend</span>
       </div>
    </div>

    1. shortcode principal de l'action

    2. les shortcodes secondaires

    3. fermeture du shortcode principal de l'action

    4. bloc div (optionnel) avec les attributs id, class et style définis dans le shortcode principal

    5. bloc div (obligatoire) pour contenir la carte. map est le nom par défaut de la classe. Vous pouvez modifier son nom avec l'option map-class

    6. texte alternatif si la carte ne peut-être affiché

    7. bloc div (éventuel) pour contenir une légende. Vous pouvez modifier son nom avec l'option legend-class du shortcode secondaire legend-plot ou legend-area. Il est possible d'avoir plusieurs blocs légende en leur attribuant des noms de classes différents.

    8. texte alternatif si la légende ne peut-être affiché

    Attention : la structure HTML doit être en dehors du shortcode qui définit son contenu. La relation est faite grâce au nom des classes qui doivent être uniques pour une carte.

    Erreurs courantes

    • Aucune carte ne s'affiche
    • Un shortcode secondaire n'est pas reconnu
    • Un fichier CSV semble ne pas être reconnu

    si la page contient plusieurs cartes, une seule avec une erreur bloque l'affichage de toutes les autres

    N'auriez-vous pas oublié le tiret ? les shortcodes internes sont :
    default-area, default-plot, default-link, area, plot, link, legend-area, legend-plot, legend-slice

    • Vérifiez qu'il est bien au format UTF-8. Préférez LibreOffice pour créer les CSV
    • la syntaxe du fichier .model est-elle correcte ? N'oubliez pas les guillemets pour les chaines.

    Références

    Bravo à ceux qui sont arrivés au bas de cette page. Vous trouverez les informations qui peuvent vous manquer directement sur le site de l'auteur sur script mapael

    • MAPAEL: librairie js Javascript réaliser des cartes
    • RAPHAEL : librairie Javascript Open Source, qui permet de manipuler des objets SVG
    • Cartes : une liste de cartes directement utilisables
    • Création de cartes

    d'autres exemples avec les fichiers utilisés en téléchargement.

    Les fichiers utilisés pour les démos

    La carte des régions françaises

    Le logo Joomla