Idea: LayerGroups show/hide via grouped css display:none/block

I have an idea for how Leaflet could possibly be improved in order to increase performance for quickly showing/hiding LayerGroups:

I’ve had a hard time determining the best way to turn on/off LayerGroups, for maximizing speed and performance. In my mapping application, I have various markers on the map showing or hidden, depending on what zoom level the map is currently at. I simply hook the zoomend event and, based off of predefined values, LayerGroups are either added to the map or removed from the map, depending on if they should be visible or not for the current zoom level.

So the problem with this, is that myLayerGroup.addTo(map) and map.removeLayer(myLayerGroup), basically consists of Leaflet iterating through each layer in the group and individually adding to or removing from the map. I feel like this is potentially slow, especially if you have a lot of markers on a map.

So I had a bit of an idea today. Lets say I have 5 LayerGroups of markers. Each one of those markers is put in this DOM heirarchy:

<div class="leaflet-marker-pane">
    <div class="leaflet-marker-icon leaflet-zoom-animated"></div>
    <div class="leaflet-marker-icon leaflet-zoom-animated"></div>
    <div class="leaflet-marker-icon leaflet-zoom-animated"></div>
    <div class="leaflet-marker-icon leaflet-zoom-animated"></div>
    etc...
</div>

So all of the markers are put under the same div.leaflet-marker-pane, even though they are in different LayerGroups. So here is where my idea comes into play: What would happen if you grouped Layers under individual div’s, one for each LayerGroup? So you would have this:

<div class="leaflet-marker-pane">
    <div class='myLayerGroupContainer'>
        <div class="leaflet-marker-icon leaflet-zoom-animated"></div>
        <div class="leaflet-marker-icon leaflet-zoom-animated"></div>
    </div>
    <div class='someOtherLayerGroupContainer'>
        <div class="leaflet-marker-icon leaflet-zoom-animated"></div>
        <div class="leaflet-marker-icon leaflet-zoom-animated"></div>
    </div>
    etc...
</div>

So now, if someone wanted to show/hide a LayerGroup, it would simply be a matter of doing myLayerGroup.hide() or myLayerGroup.show(), which would simply change the css display to none or block. Now it’s just a basic css change to hide/show all the LayerGroup markers. No need to iterate through 100’s (or 1000’s) of individual markers/layers and adding/removing them. Seems like this would be MUCH faster. No more JavaScript overhead.

Also another advantage to this approach, is that if your LayerGroup consists of multiple types of layers (markers, polygons, popups, etc), each type of layer could still be grouped under a <div class='myLayerGroupContainer'> within each appropriate map pane. So the usage would be the same.

That being said, I don’t really know anything about the performance drawbacks of having a bunch of layers/markers on a map but simply having them hidden. I know that removing a LayerGroup actually removed the layers from the DOM. So if there were 1000’s of markers on the map, but simply hidden in the DOM, does it affect performance or not? I don’t really know the answer to this, but in this type of situation, map.remove(myLayerGroup) and myLayerGroup.addTo(map) is still an option.

What do you guys think about this? Would this be worth investigating? I haven’t tested this yet but it seems like it would be a great performance improvement if you have a mapping application that shows/hides markers a lot.

[thewebkid]

Ah thanks for telling me about panes. That’ll probably save me a lot of “pain”. Will check it out.

[Jakobud]

I was thinking about the best way to implement this in the code last night. Right now, map.panes consists of divs that are created with DomUtil. Maybe changes panes so that they are objects rather than DOM elements. This would allow you to add methods like add(layer) and remove(layer) instead of appendChild() and removeChild(). The advantage of this, is that you could allow an optional second argument to add() in order to place a new layer DOM element within a sub-div of the pane:

panes.markerPane.add(this._icon);
// results in:
<div class="leaflet-marker-pane">
    <div class="leaflet-marker-icon leaflet-zoom-animated"></div>
</div>

and

panes.markerPane.add(this._icon, 'someContainerName');
// results in:
<div class="leaflet-marker-pane">
    <div class='someContainerName'>
        <div class="leaflet-marker-icon leaflet-zoom-animated"></div>
    </div>
</div>

I’m not familiar enough with the src to know if that’s a good approach or not. It might not be a good approach because it might force any 3rd party layer plugins to change their code in order to support these LayerGroup divs.

Really looking forward to this feature being added!