Added element not showing on full screen

[f-batiri-zz]

I am trying to add a legend to the map using instructions in here. It works great, but as soon as I use full screen, the legend disappears.

I understand it is probably the legend code which should be modified but since it relays deeply on how full screen works, I would appreciate any help. Also, this is most likely the issue with any other method which adds elements to the map via html. It would be very nice to have a way around it.

Here is a simple code snippet to reproduce the problem in jupyter lab:

import folium
from folium.plugins import Fullscreen
m = folium.Map([32, -96], zoom_start=12, control_scale = True)

legend_html = '''
     <div style="position: fixed; 
     bottom: 50px; left: 50px; width: 100px; height: 90px; 
     border:2px solid grey; z-index:9999; font-size:14px;
     ">&nbsp; Cool Legend <br>
     &nbsp; East &nbsp; <i class="fa fa-map-marker fa-2x"
                  style="color:green"></i><br>
     &nbsp; West &nbsp; <i class="fa fa-map-marker fa-2x"
                  style="color:red"></i>
      </div>
     '''
m.get_root().html.add_child(folium.Element(legend_html))

Fullscreen().add_to(m)
  

Another method to add legend via branca elements is available here which results in the same issue.
folium version: 0.11.0

[Conengmo]

That's because your custom div is not under Leaflets control, so it the Fullscreen plugin doesn't know about its existence. This can be solved by putting the legend on the map as a Leaflet Control object. Here's a folium class you can use for this:

class CustomControl(MacroElement):
    """

    Based on https://leafletjs.com/examples/extending/extending-3-controls.html

    """

    _template = Template("""
        {% macro script(this, kwargs) %}
        
        L.Control.CustomControl = L.Control.extend({
            onAdd: function(map) {
                let div = L.DomUtil.create('div');
                
                div.innerHTML = `{{ this.html }}`;
                
                return div;
            },
        
            onRemove: function(map) {
                // Nothing to do here
            }
        });
        
        L.control.customControl = function(opts) {
            return new L.Control.CustomControl(opts);
        }
        
        L.control.customControl(
            { position: "{{ this.position }}" }
        ).addTo({{ this._parent.get_name() }});
    
        {% endmacro %}
    """)

    def __init__(self, html, position='bottomleft'):
        super().__init__()
        self.html = escape_backticks(html)
        self.position = position

Then use it like this:

legend_html = '''
     <div style="position: fixed; 
     bottom: 50px; left: 50px; width: 100px; height: 90px; 
     border:2px solid grey; z-index:9999; font-size:14px;
     ">&nbsp; Cool Legend <br>
     &nbsp; East &nbsp; <i class="fa fa-map-marker fa-2x"
                  style="color:green"></i><br>
     &nbsp; West &nbsp; <i class="fa fa-map-marker fa-2x"
                  style="color:red"></i>
      </div>
     '''
CustomControl(legend_html).add_to(m)