Leaflet : L.Control.Layers trier la liste d'overlayMaps à partir d'un élément donné

Bonjour à vous toutes et tous,

Leaflet : L.Control.Layers trier la liste d’overlayMaps à partir d’un élément donné

Codage classique bouton radio pour les cartes case à cocher pour polyline et/ marker:

var layerControl = new L.Control.Layers(baseMaps, overlayMaps, { sortLayers: false }).addTo(map);

Cahier des charges envisagé pour l’affichage de la liste overlayMaps :

1. Conserver en tête de liste 9 éléments préétablis fixe, ensuite.
2. Enrichir cette liste des noms de fichiers locaux importés (format AAAA-MM-JJ.gpx ou .geojson) via API load HTML5.
3. Les présenter trié y compris en cas de nouvel import. (2001–12–06.gpx, 2023–02–22.geojson, 2023–03–10.gpx etc…)

Sans réinventer la roue, le plugin leaflet.filelayer.js exploitant l’API Load HTML5 importe des fichiers locaux, tant en sélection multiple qu’en sélection individuelle, reste que la liste d’overlayMaps s’enrichie dans l’ordre des chargements.

Options de tri prévues avec L.Control:

• sortLayers: > true va trier baseMaps ET overlayMaps
• sortFunction: function (a, b) > Ne semble pas convenir. (Seul exemple trouvé : https://stackoverflow.com/questions/51194461/sort-order-of-layers-in-leaflet-layer-control) A moins d’incompréhension de ma part !

J’ai donc développé cette fonction pour un tri débutant à un numéro donné (StartLine) :

// ==========================================================================
// Trier un objet overlayMaps leaflet L.Control à partir d'une ligne donnée
// ==========================================================================
function sortLabels(StartLine) {
    var overlayMaps = {};
    layerControl._layers.forEach(function (x) {
        if (x.overlay) {
            overlayMaps[x.name] = x.layer;
        }
    });
    // Débuter le tri à partir de ligne précisée dans StartLine
    names = Object.keys(overlayMaps)
        .slice(StartLine)
        .sort(function (a, b) {
            // Tri sans tenir compte du code HTML
            return a.replace(/<[^>]*>/g, "").localeCompare(b.replace(/<[^>]*>/g, ""));
        });
    // Actualiser affichage de la liste overlayMaps
    names.forEach((x) => layerControl.removeLayer(overlayMaps[x]));
    names.forEach((x) => layerControl.addOverlay(overlayMaps[x], x));
}

Problèmatique :

Concession, faute de comprendre le fonctionnement de "sortFunction", tri manuel à la demande via double clic dans la zone L.Control :

// Tri sur double clic dans la zone L.Control
L.DomEvent.on(layerControl.getContainer(), "dblclick", function (e) {
    L.DomEvent.stopPropagation(e);
    L.DomEvent.preventDefault(e);
    sortLabels();
});

Merci par avance de vos remarques et autres idées ou solution de code plus simple !

Amitiés à toutes et tous,