Questions / Réponses realisées avec Copilot
var catalog = new ol.control.Catalog({
position: "top-left",
collapsed : false,
draggable : true
});
catalog.on("catalog:loaded", (e) => {
console.log(e);
});
catalog.on("catalog:layer:add", (e) => {
console.log(e);
});
catalog.on("catalog:layer:remove", (e) => {
console.log(e);
});
var catalog = new ol.control.Catalog({
});
Affichage de la barre de recherche globale avec un critère de recherche sur le nom des services.
Par défaut, les critère sont : ["name","title","description"]
var catalog = new ol.control.Catalog({
search : {
display : true,
label : "Rechercher une donnée sur un service",
criteria : [
"service"
]
}
});
La recherche est active à partir du 3eme caractère saisi dans la barre de recherche.
Le filtre sur les catégories permet de regrouper et d’afficher dynamiquement les couches selon un critère, rendant la navigation plus claire et adaptée à chaque besoin utilisateur.
Le filtre sur les catégories dans le widget Catalog permet d’afficher uniquement les couches qui correspondent à un critère précis dans chaque onglet (catégorie).
Chaque catégorie peut définir une propriété filter :
filter: {
field: "service",
value: "WMTS"
}
Seules les couches dont la propriété service vaut "WMTS" seront affichées dans cette catégorie.
Le filtre peut porter sur n’importe quel champ des couches (ex : service, thematic, producer, etc.).
La valeur peut être une chaîne ("WMTS"), un tableau (["Hydrologie", "Agriculture"]), ou "*" pour tout afficher.
var catalog = new ol.control.Catalog({
categories : [
{
title : "Données",
id : "data"
},
{
title : "WMTS",
default : false,
filter : {
field : "service",
value : "WMTS"
}
},
{
title : "WMS",
filter : {
field : "service",
value : "WMS"
}
},
{
title : "TMS",
default : true,
filter : {
field : "service",
value : "TMS"
}
},
{
title : "WFS",
default : false,
filter : {
field : "service",
value : "WFS"
}
}
]
});
Les sous-catégories dans le widget Catalog sont des regroupements à l’intérieur d’une catégorie principale.
Elles apparaissent généralement sous forme de boutons radio ou de sections dans l’interface du catalogue.
Chaque catégorie peut contenir un tableau items qui représente ses sous-catégories.
Une sous-catégorie possède des propriétés comme :
title : le nom affiché.id : identifiant unique.default : indique si elle est sélectionnée par défaut.section : si true, la sous-catégorie est divisée en sections thématiques.icon et iconJson : pour afficher des icônes spécifiques aux sections.filter : permet de filtrer les couches selon un critère (ex : thématique, producteur…).Les sous-catégories permettent de structurer et de filtrer l’affichage des couches dans le catalogue.
Elles facilitent la navigation et la recherche par regroupement thématique ou fonctionnel.
var catalog = new ol.control.Catalog({
categories : [
{
title : "Données",
id : "data",
items : [
{
title : "WMTS",
default : true,
filter : {
field : "service",
value : "WMTS"
}
},
{
title : "WMS",
filter : {
field : "service",
value : "WMS"
}
},
{
title : "TMS",
filter : {
field : "service",
value : "TMS"
}
},
{
title : "Tout",
filter : null
}
]
}
]
});
Les sections dans le widget Catalog sont des regroupements dynamiques à l’intérieur d’une sous-catégorie, souvent utilisés pour organiser les couches par thème (ex : "Hydrologie", "Agriculture", "Transports").
section: true et un filter sur un champ (ex : thematic) va créer automatiquement une section pour chaque valeur trouvée dans ce champ parmi les couches.iconJson.var catalog = new ol.control.Catalog({
categories : [
{
title : "Données",
id : "data",
items : [
{
title : "Thème",
default : true,
section : true,
filter : {
field : "thematic",
value : ["Hydrologie", "Agriculture", "Transports"]
},
icon: true,
iconJson: [
{ id: "hydro", name: "Hydrologie", icon: "fr-icon-water-fill" },
{ id: "agri", name: "Agriculture", icon: "fr-icon-leaf-fill" },
{ id: "trans", name: "Transports", icon: "fr-icon-bus-fill" }
]
},
{
title : "Producteur",
section : true,
filter : {
field : "producer",
value : "*"
}
}
]
}
]
});
title : Titre affiché dans l’onglet.id : Identifiant unique (utilisé pour la gestion interne).default : Si true, cette catégorie est sélectionnée par défaut à l’ouverture.search : Si true, affiche une barre de recherche spécifique à la catégorie.filter : Permet de filtrer les couches selon un champ et une valeur (ex : { field: "thematic", value: "Hydrologie" }).items : Tableau de sous-catégories.Exemple :
categories: [
{
title: "Données",
id: "data",
default: true,
search: true,
filter: null,
items: [ ... ] // sous-catégories
}
]
title : Titre de la sous-catégorie.id : Identifiant unique.default : Si true, sélectionnée par défaut.section : Si true, la sous-catégorie est divisée en sections thématiques.icon : Si true, affiche une icône pour chaque section.iconJson : Tableau d’icônes (DSFR ou SVG) pour les sections.filter : Filtre appliqué à la sous-catégorie (ex : { field: "thematic", value: ["Agriculture", "Transports"] }).sections : Liste des sections (remplie dynamiquement selon le filtre).Exemple :
items: [
{
title: "Toutes les données",
id: "all",
default: true,
section: false,
filter: null
},
{
title: "Par thématique",
id: "thematic",
section: true,
icon: true,
filter: { field: "thematic", value: "*" }
}
]
section: true et un filter est défini, le widget va regrouper les couches selon la valeur du champ du filtre (ex : toutes les couches dont thematic vaut "Hydrologie" seront dans la section "Hydrologie").iconJson (mapping entre nom et icône).Exemple :
{
title: "Par thématique",
id: "thematic",
section: true,
icon: true,
iconJson: [
{ id: "hydro", name: "Hydrologie", icon: "fr-icon-water-fill" },
{ id: "agri", name: "Agriculture", icon: "fr-icon-leaf-fill" }
],
filter: { field: "thematic", value: "*" }
}
Catégorie ("Données")
└─ Sous-catégorie ("Toutes les données")
└─ Sous-catégorie ("Par thématique")
├─ Section "Hydrologie" (icône)
├─ Section "Agriculture" (icône)
└─ Section "Transports" (icône)
configurationL’option configuration permet de définir comment et où le widget Catalog va récupérer la liste des couches à afficher.
Elle peut contenir :
"json" ou "service"configuration: {
type: "json",
urls: [
"https://raw.githubusercontent.com/IGNF/cartes.gouv.fr-entree-carto/main/public/data/layers.json",
"https://raw.githubusercontent.com/IGNF/cartes.gouv.fr-entree-carto/main/public/data/edito.json"
]
}
urls (ou utiliser l’objet data si fourni)."json" est le plus courant, "service" permettrait d’interroger une API distante (non implémenté dans l’exemple).configuration est le cœur du widget Catalog : elle détermine la source et le format des données affichées.Les Topics sont des listes de valeurs thématiques, de producteurs ou de services utilisées pour enrichir et organiser les couches du catalogue.
Ils servent à :
topics.json) ou inclus dans la configuration du catalogue (data.topics).Topics importé dans le code :import Topics from "./topics.json";
Exemple pour les thématiques :
{
"thematic": [
{ "id": "hydro", "name": "Hydrologie", "icon": "fr-icon-water-fill" },
{ "id": "agri", "name": "Agriculture", "icon": "fr-icon-leaf-fill" },
{ "id": "trans", "name": "Transports", "icon": "fr-icon-bus-fill" }
],
"producer": [
{ "id": "IGN", "name": "IGN", "icon": "fr-icon-map-fill" },
{ "id": "BRGM", "name": "BRGM", "icon": "fr-icon-earth-fill" }
],
"service": [
{ "id": "wmts", "name": "WMTS", "icon": "fr-icon-earth-line" },
{ "id": "wms", "name": "WMS", "icon": "fr-icon-earth-fill" }
]
}
icon: true), le widget va chercher dans les Topics le mapping entre le nom et l’icône.getInformationsCatalog("producer", ...) ou getInformationsCatalog("thematic", ...) utilisent les Topics pour construire des URLs ou des fiches détaillées.// Recherche d’une icône pour une thématique
const thematicIcon = Topics.thematic.find(t => t.name === "Hydrologie")?.icon;
// Génération d’un lien vers la fiche producteur
const producerInfo = Topics.producer.find(p => p.name === "IGN");
const url = "https://cartes.gouv.fr/catalogue/search?organization=" + producerInfo.id;