diff --git a/library/ui/add_hard_coded_legend_at_map_bottom2/add_legend.js b/library/ui/add_hard_coded_legend_at_map_bottom2/add_legend.js new file mode 100644 index 0000000..7a3568a --- /dev/null +++ b/library/ui/add_hard_coded_legend_at_map_bottom2/add_legend.js @@ -0,0 +1,110 @@ +/* +# Afficher un panneau de légende fixe en bas de la carte + +Ce script génère dynamiquement une petite fenêtre affichant une légende définie par l'utilisateur en bas de l'interface de la carte. +La légende peut présenter divers éléments cartographiques tels que des lignes, des images ou des rectangles, chacun représentant différentes caractéristiques ou catégories de la carte. + +## Configuration +Vous pouvez configurer les éléments de légende et les classes qui seront affichés en modifiant le tableau `my_legend_items`. +Cette flexibilité permet d'obtenir une légende hautement personnalisable adaptée aux besoins spécifiques du projet. + +## Mise en œuvre + +- Ajoutez ce script sous le nom `add_hard_coded_legend_at_map_bottom.js` dans votre dossier `media/js/nom_du_projet`. + +C'est une petite amélioration de : +https://github.com/m2cci-gakoum/lizmap-javascript-scripts/blob/master/library/ui/add_hard_coded_legend_at_map_bottom/add_hard_coded_legend_at_map_bottom.js + +Voici la configuration des variables de la légende, que vous pouvez adapter selon les besoins de votre projet : +*/ + +// Initialisation des variables de configuration de la légende +var my_legend_title = "Légende"; // Titre de la légende +var my_legend_toggle_label = "Montrer/Cacher la légende"; // Texte pour le bouton de basculement pour montrer/cacher la légende +var my_legend_hide_button_label = "Cacher"; // Texte pour le bouton pour cacher la légende + +// Définition des éléments à afficher dans la légende +var my_legend_items = [ + { + code: "categorie", + title: "", + items: [ + { + type: "line", + title: "Titre", + code: "line", + color: "orange", // Couleur de l'élément ligne + }, + { + type: "image", + title: "Titre1", + code: "", + image: "http://localhost/lizmap36/lizmap/www/index.php/view/media/getMedia?repository=projetnomDuRepertoire&project=nomDuProjet&path=/media/image/image.png", // Chemin vers l'image + }, + { + type: "image", + title: "Titre2", + code: "", + image: "http://localhost/lizmap36/lizmap/www/index.php/view/media/getMedia?repository=projetnomDuRepertoire&project=nomDuProjet&path=/media/image/image.png", + }, + { + type: "image", + title: "Titre3", + code: "3", + image: "http://localhost/lizmap36/lizmap/www/index.php/view/media/getMedia?repository=projetnomDuRepertoire&project=nomDuProjet&path=/media/image/image.png", + }, + { + type: "rectangle", + title: "Agglomération Ville Franche", + code: "5", + color: "white", + background: "orange", // Couleur de fond pour l'élément rectangle + }, + ], + }, +]; + +// Écouteur d'événements pour la création de l'interface utilisateur +lizMap.events.on({ + uicreated: function (e) { + // Construction du HTML pour la légende + var legend_html = '
";
+ if (item.type === "image") {
+ legend_html += ' '; + } + legend_html += " | " + item.title + " |