DualMap with incorrect drawing

[Qweaper]

Describe the bug
After trying combine DualMap with Draw I get incorrect work of rectangles displaying. If I draw a rectangle on the left viewport(Map) it displays on right display instead of the original one.

To Reproduce

1. Create DualMap
2. Fill base layer
3. Add Draw controls on each map
4. Save to html
5. Try to draw a rect (or another figure)

import folium
import folium.plugins
m = folium.plugins.DualMap(location=(52.1, 5.1), tiles=None, zoom_start=8)

folium.TileLayer("cartodbpositron").add_to(m.m1)
folium.TileLayer("cartodbpositron").add_to(m.m2)

folium.LayerControl(collapsed=False).add_to(m)

folium.plugins.draw.Draw().add_to(m.m2)
folium.plugins.draw.Draw().add_to(m.m1)

m.save('map.html')

Expected behavior
I wanted that I can draw rects on each viewpotrs. I get rects that draw on right viewport only independently of place where i draw.

Environment (please complete the following information):

• Browser: firefox
• HTML
• Python version 3.8
• folium version '0.14.0'
• branca version '0.6.0'

Possible solutions
I solved it locally by changing name generating in class Draw in the template. Original code generates a single drawnItems name, which use for every map in DualMap, that is why it rewrites after first usage and cause drawing figures on the last layer that have been created.

Attach my code as solution, because I'm not sure about codestyle, but its works.

here original code:

_template = Template(
        """
        {% macro script(this, kwargs) %}
            var options = {
              position: {{ this.position|tojson }},
              draw: {{ this.draw_options|tojson }},
              edit: {{ this.edit_options|tojson }},
            }
            // FeatureGroup is to store editable layers.
            var drawnItems = new L.featureGroup().addTo(
                {{ this._parent.get_name() }}
            );
            options.edit.featureGroup = drawnItems;
            var {{ this.get_name() }} = new L.Control.Draw(
                options
            ).addTo( {{this._parent.get_name()}} );
            {{ this._parent.get_name() }}.on(L.Draw.Event.CREATED, function(e) {
                var layer = e.layer,
                    type = e.layerType;
                var coords = JSON.stringify(layer.toGeoJSON());
                {%- if this.show_geometry_on_click %}
                layer.on('click', function() {
                    alert(coords);
                    console.log(coords);
                });
                {%- endif %}
                drawnItems.addLayer(layer);
             });
            {{ this._parent.get_name() }}.on('draw:created', function(e) {
                drawnItems.addLayer(e.layer);
            });
            {% if this.export %}
            document.getElementById('export').onclick = function(e) {
                var data = drawnItems.toGeoJSON();
                var convertedData = 'text/json;charset=utf-8,'
                    + encodeURIComponent(JSON.stringify(data));
                document.getElementById('export').setAttribute(
                    'href', 'data:' + convertedData
                );
                document.getElementById('export').setAttribute(
                    'download', {{ this.filename|tojson }}
                );
            }
            {% endif %}
        {% endmacro %}
        """
    )

my fixed code:

    _template = Template(
        """
        {% macro script(this, kwargs) %}
            var options = {
              position: {{ this.position|tojson }},
              draw: {{ this.draw_options|tojson }},
              edit: {{ this.edit_options|tojson }},
            }
            // FeatureGroup is to store editable layers.
            var drawnItems_{{ this.get_name() }} = new L.featureGroup().addTo(
                {{ this._parent.get_name() }}
            );
            options.edit.featureGroup = drawnItems_{{ this.get_name() }};
            var {{ this.get_name() }} = new L.Control.Draw(
                options
            ).addTo( {{this._parent.get_name()}} );
            {{ this._parent.get_name() }}.on(L.Draw.Event.CREATED, function(e) {
                var layer = e.layer,
                    type = e.layerType;
                var coords = JSON.stringify(layer.toGeoJSON());
                {%- if this.show_geometry_on_click %}
                layer.on('click', function() {
                    alert(coords);
                    console.log(coords);
                });
                {%- endif %}
                drawnItems_{{ this.get_name() }}.addLayer(layer);
             });
            {{ this._parent.get_name() }}.on('draw:created', function(e) {
                drawnItems_{{ this.get_name() }}.addLayer(e.layer);
            });
            {% if this.export %}
            document.getElementById('export').onclick = function(e) {
                var data = drawnItems_{{ this.get_name() }}.toGeoJSON();
                var convertedData = 'text/json;charset=utf-8,'
                    + encodeURIComponent(JSON.stringify(data));
                document.getElementById('export').setAttribute(
                    'href', 'data:' + convertedData
                );
                document.getElementById('export').setAttribute(
                    'download', {{ this.filename|tojson }}
                );
            }
            {% endif %}
        {% endmacro %}
        """
    )

[Conengmo]

Great issue description. Though we generally don’t support different plugins working together, I think here it’s clear that drawn_items shouldn’t be a single global variable. Your solutions looks good to me and is in line with how things work more commonly in Folium. Would you mind creating a PR?

[Qweaper]

Yes, I will do it as soon as possible

[Qweaper]

Added PR: #1776

Hope it will be correct