Tengo un Leaflet Map en una aplicación web Shiny. Tengo 3 grupos base que contienen diferentes círculos y 1 grupo superpuesto que contiene polilíneas que se cruzan entre sí. Las polilíneas se ordenan de modo que las líneas más importantes estén encima de las menos importantes. Los círculos se agregan después para estar encima de las líneas. El problema es: al desmarcar y luego marcar el grupo superpuesto, las líneas se colocan encima de los círculos. El círculo se puede colocar encima de las líneas cuando se cambia la capa base. Sin embargo, me gustaría evitar que la línea se superponga a los círculos. Para hacer eso, utilicé la función OnRender de htmltools:

 output$map <- renderLeaflet( leaflet() %>% addProviderTiles(providers$CartoDB.Positron) %>% setView( lng = 48.80, lat = 2.30, zoom = 10 ) %>% addControl("Title", position = "bottomleft", className = "map-title") %>% onRender( "function(el, x) { this.on('overlayadd', function(e) { e.layer.bringToBack(); }) }" )

Y bueno, sí, pone la línea detrás de los círculos, pero lo que también hace es invertir el orden de las líneas (de todo el FeatureGroup), por lo que ahora las líneas menos importantes están encima de las más importantes. Por lo que obtengo, traerToBack() toma la primera línea dibujada, la lleva hacia atrás, luego la segunda línea dibujada, la pone hacia atrás (debajo de la primera) y así sucesivamente, hasta que la primera línea dibujada (la menos importante) se colocará al frente mientras que el último dibujado (el más importante) se colocará al reverso.

Así que probé algunas modificaciones de la función:

 function(el, x) { this.on('overlayadd', function(e) { var layers = e.layer.getLayers(); e.layer.clearLayers(); layers.reverse(); layers.forEach(l => e.layer.addLayer(l)); e.layer.bringToBack(); })

Y no funcionó. Así que ahora no lo entiendo, porque técnicamente ahora el primer dibujado es el que quiero que sea el último dibujado, y por lo tanto, la inversión de traerToBack debería hacerlo. Pero no, el orden sigue siendo el mismo que la otra función. Y probé sin el reverso, sigue siendo el mismo resultado. También probé setZIndex, colocando la capa base en un índice Z alto, mientras que la superposición se devolvió a un índice Z bajo, pero no tuvo ningún efecto (líneas en la parte superior de los círculos).

Y traté de cambiar las opciones autoZIndex y sortLayers de layerControlOptions y no tuvo ningún efecto (líneas en la parte superior de los círculos).

Entonces, lo que me gustaría es: una explicación de la magia detrás de traerToBack, o una función js que hará el truco, o una solución R que mantendrá el orden como lo quiero.