mapael

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.

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.

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

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

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.

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).

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}

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.

{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.

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.

{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}