¿Ordenar los elementos del control del plugin Leaflet List Markers?

Question

Estoy leyendo shapefiles con la biblioteca de folletos. Imprimo la lista de marcadores de la izquierda en una lista a través del Lista de folletos Biblioteca de marcadores . Debo ordenar la lista de marcadores del mapa que se me muestra en la pantalla desde la biblioteca. Intenté trabajar en el archivo leaflet-list-markers-js pero no encontré la forma de ordenar los valores en el array o de ordenar el array una vez compuesto.

Este trozo de código lo uso para crear la lista, markersLayer es un LayerGroup:

var list = new L.Control.ListMarkers({layer: markersLayer, itemIcon: null, maxItems: 30, maxZoom: 25});

    list.on('item-mouseover', function (e) {
        e.layer.setIcon(redSelectMarker)
    }).on('item-mouseout', function (e) {
        e.layer.setIcon(transparentIcon)
    });

    myMap.addControl(list);

Las siguientes líneas en la prueba a los métodos que la biblioteca utiliza para actualizar la lista de contenido de la página leaflet-list-markers.min.js, he estado trabajando en esta página. _updateList: añade el

• elementos html que se crean con el método _createItem a la lista a._list:

   _updateList: function () {
             var a = this, b = 0;
             this._list.innerHTML = "ELENCO PUNTI: ", this._layer.eachLayer(function (c) {
                 c instanceof L.Marker && a._map.getBounds().contains(c.getLatLng()) && ++b < a.options.maxItems && a._list.appendChild(a._createItem(c))
             });
         },
  
  _createItem: function (a) {
             var b = L.DomUtil.create("li", "list-markers-li"), c = L.DomUtil.create("a", "", b),
                 d = this.options.itemIcon ? '<img src="' + this.options.itemIcon + '" />' : "", e = this;
             return c.href = "#", L.DomEvent.disableClickPropagation(c).on(c, "click", L.DomEvent.stop, this).on(c, "click", function (b) {
                 this._moveTo(a.getLatLng())
             }, this).on(c, "mouseover", function (b) {
                 e.fire("item-mouseover", {layer: a})
             }, this).on(c, "mouseout", function (b) {
                 e.fire("item-mouseout", {layer: a})
             }, this), a.options.hasOwnProperty(this.options.label) ? c.innerHTML = d + '<span style="opacity: 1">' + a.options[this.options.label] + "</span> <b>" + this.options.itemArrow + "</b>" : console.log("propertyName '" + this.options.label + "' not found in marker"), b
         },

Answer 1

Puede utilizar .include para modificar ._updateList método de L.Control.ListMarkers control añadiendo la ordenación de los elementos antes de mostrarlos en el control.

El código modificador podría tener este aspecto (debe ejecutarse antes de utilizar el control):

L.Control.ListMarkers.include({
  _updateList: function() {
    var that = this;
    var n = 0;
    var markers = [];

    this._list.innerHTML = '';
    this._layer.eachLayer(function(layer) {
      if(layer instanceof L.Marker)
        if( that._map.getBounds().contains(layer.getLatLng()) )
          if(++n < that.options.maxItems) {
            markers.push(layer);
          }
    });
    markers.sort(function(a, b) {
      var diff;
      if (a.options[that.options.label] > b.options[that.options.label])
        diff = 1;
      else if (a.options[that.options.label] < b.options[that.options.label])
        diff = -1;
      else {
        diff = 0;
      }
      return diff;
    });
    markers.forEach(function(marker) {
      that._list.appendChild(that._createItem(marker));
    });
  }
});

Para que el código anterior funcione, label debe utilizarse explícitamente al definir el control, aunque tenga el valor por defecto 'title' :

var list = new L.Control.ListMarkers({
  layer: markersLayer,
  label: 'title',
  itemIcon: null,
  maxItems: 30,
  maxZoom: 25
});