Légende

• Configurations de la légende
• Légende dans le panneau latéral
• Légende dans la fenêtre de dialogue
• Variables du style de la légende dialogue
• Légende HTML

Configurations de la légende

Configuration	Description
hasLegendButton	true : (défaut) affiche le bouton de légende sur la carte false : n'affiche pas le bouton sur la carte
legendInPanel	true : (défaut) affiche la légende dans le panneau latéral en mode bureau et mobile false : affiche la légende dans une fenêtre de dialogue en mode bureau (permet l'interaction dans la carte) et dans le panneau inférieur en mode mobile

Le contenu de la légende se met à jour selon l'affichage des couches au zoom actuel de la carte.

Légende dans le panneau latéral

Légende dans la fenêtre de dialogue

Selon la configuration générale de la carte, il faut ajuster la hauteur et la longueur de la fenêtre de dialogue. Il suffit d'utiliser les variables déjà définies dans \src\app\pages\portal*portal.variables.scss*. La variable $map-buttons-height devrait être ajustée selon la configuration des boutons sélectionnée. Les fichiers à modifier sont :

• src\app\pages\portal*portal.component.scss*

• src\app\pages\menu\menu-pages\map*map.component.scss*

  ::ng-deep #legendDialog {
      top: $top-legend-dialog-hasHeader;
      max-height: calc($portal-height-hasFooter-hasHeader - $map-buttons-height);
  }
  

Variables du style de la légende dialogue

hasFooter	hasHeader	hasMenu	portal.component	map.component
true	false	false	top: $top-legend-dialog; max-height: $portal-height-hasFooter;
true	true	false	top: $top-legend-dialog-hasHeader; max-height: $portal-height-hasFooter-hasHeader;
false	true	false	top: $top-legend-dialog-hasHeader; $portal-height-hasHeader;
false	false	true		top: $top-legend-dialog-hasMenu; $portal-height-hasMenu;
true	false	true		top: $top-legend-dialog-hasMenu; $portal-height-hasFooter-hasMenu;
true	true	true		top: $portal-height-hasMenu-hasHeader; $portal-height-hasFooter-hasHeader-hasMenu

Par exemple, pour une carte qui a un pied de page (footer) sans entête (header) ni menu, dans le fichier portal.complnent.scss uniquement, il faut remplacer le style de ::ng-deep #legendDialog par :

::ng-deep #legendDialog {
        top: $top-legend-dialog;
        max-height: calc($portal-height-hasFooter - $map-buttons-height);
}

Légende HTML

Pour développer une légende HTML il suffit d'insérer la source de votre fichier sous legendOptions dans le contexte :

{
    "title": "Titre de la couche",
    "id": "1",
    "legendOptions": {
        "html": "<iframe src='assets/legends/legend-layer/legend-layer.html'></iframe>"
}

Un modèle de fichiers html et css se trouve dans le projet, sous : src\assets\legends