mapael - exemples

Sommaire :

Le monde

{up mapael=world_countries | zoom=12
  | class=bg-bleuPale
  | css-head=#id .mapTooltip[opacity:.95 !important]#id .mapTooltip img[width:50%]
  | csv-areas=/files/mapael/world_countries.csv
}
  {default-Area | bg=#D2B48C | bg-hover=#CD853F | bd-color=grey | bd-width=1 | tooltip-overflow-bottom}
{/up mapael}

Le shortcode commenté :

1. on définit la carte utilisée (sans chemin, elle est recherchée dans le dossier maps de l'action) et le niveau de zoom maxi
2. une classe pour ajouter un fond bleu clair
3. des règles CSS pour contrôler l'opacité des infobulles et la taille des drapeaux. Notez l'utilisation de #id pour limiter la portée de ces règles à cette instance.
4. le fichier CSV pour définir les informations de chaque pays
5. le fichier modèle pour le CSV
6. fin du shortcode principal
7. un shortcode secondaire pour définir les attributs des capitales

* je ne précise pas les noms des fichiers model pour les CSV puisqu'ils sont de même nom avec une extension .model

Le fichier european_union_2021_pays.model

"%id%":{attrs:{fill:"%color%"},href:"#",tooltip:{content:"<img src='/images/flags/%id%.png'><br><b>nom : %nom%</b> (%id%)"}}

Le fichier CSV définit 3 colonnes :

• id :utilisé comme identifiant de la zone, mais également comme nom du fichier PNG pour le drapeau et dans le texte de la bulle
• nom : le nom du pays
• color : la couleur du pays, blue ou grey selon l'appartenance du pays à l'UE

Le fichier european_union_2021_capitales.model

"%ville%":{longitude:%longitude%,latitude:%latitude%,text:{content:"%ville%",position:"%position%"}}

Le fichier CSV définit 5 colonnes :

• ville : le nom de la capitale
• latitude & longitude : pour situer la ville sur la carte
• pays : nom repris, juste pour faciliter la relecture du CSV
• position : right, left, top ou bottom pour indiquer la position du texte et éviter les chevauchements disgracieux

L'Union Européenne

{up mapael=european_union_2021.js | zoom=12
  | class=w9 mcenter bg-bleuPale
  | css-head=#id .mapTooltip[opacity:.95 !important].mapTooltip img[width:50%]
  | csv-areas=european_union_2021_pays.csv
  | csv-plots=european_union_2021_capitales.csv
}
  {default-Plot | circle=5,yellow | options=text:[attrs:[fill:"orangered","font-size":12]]}
{/up mapael}

Le shortcode commenté :

1. on définit la carte utilisée (sans chemin, elle est recherchée dans le dossier maps de l'action) et le niveau de zoom maxi
2. quelques classes pour limiter la largeur de la carte, la centrer et ajouter un fond bleu clair
3. des règles CSS pour contrôler l'opacité des infobulles et la taille des drapeaux. Notez l'utilisation de #id pour limiter la portée de ces règles à cette instance.
4. le fichier CSV pour définir le nom des pays *
5. le fichier CSV pour définir le nom des capitales de l'Union Européenne *
6. fin du shortcode principal
7. un shortcode secondaire pour définir les attributs des capitales

* je ne précise pas les noms des fichiers model pour les CSV puisqu'ils sont de même nom avec une extension .model

Le fichier european_union_2021_pays.model

"%id%":{attrs:{fill:"%color%"},href:"#",tooltip:{content:"<img src='/images/flags/%id%.png'><br><b>nom : %nom%</b> (%id%)"}}

Le fichier CSV définit 3 colonnes :

• id :utilisé comme identifiant de la zone, mais également comme nom du fichier PNG pour le drapeau et dans le texte de la bulle
• nom : le nom du pays
• color : la couleur du pays, blue ou grey selon l'appartenance du pays à l'UE

Le fichier european_union_2021_capitales.model

"%ville%":{longitude:%longitude%,latitude:%latitude%,text:{content:"%ville%",position:"%position%"}}

Le fichier CSV définit 5 colonnes :

• ville : le nom de la capitale
• latitude & longitude : pour situer la ville sur la carte
• pays : nom repris, juste pour faciliter la relecture du CSV
• position : right, left, top ou bottom pour indiquer la position du texte et éviter les chevauchements disgracieux

Les départements français

{up mapael=/files/mapael/france_departments_domtom.js | zoom=12
  | csv-areas=/files/mapael/france_departments_domtom.csv
  | class=w6 ws12 mcenter bg-bleuPale
}
  {legend-area=Population en 2018}
  {legend-slice=moins de 500 000 habitants | max=500000 | bg-color=lightsalmon}
  {legend-slice=entre 500 000 et 1 million | min=500001 | max=1000000 | bg-color=salmon}
  {legend-slice=entre 1 et 2 millions | min=1000001 | max=2000000 | bg-color=indianRed}
  {legend-slice=plus de 2 millions | min=2000001 | bg-color=firebrick}
{/up mapael}

Le shortcode commenté :

1. on définit la carte utilisée (sans chemin, elle est recherchée dans le dossier maps de l'action) et le niveau de zoom maxi
2. le fichier CSV pour définir le nom des départements et population *
3. des classes pour limiter la largeur de la carte, la centrer et ajouter un fond bleu clair
4. fin du shortcode principal
5. un shortcode secondaire pour ajouter une légende par zones
6. les différentes tranches de population. bg-color est utilisées pour colorer le département en fonction de sa population

Le fichier france_departments_domtom.model

"%id%":{value:"%population%",href:"#",tooltip:{content:"<b>%label%</b><br>Population: %population%"}}

Le fichier CSV définit 3 colonnes :

• id : l'identifiant du département : exemple : department-01 pour l'Ain
• population : le nombre d'habitants
• label : le nom et code du département