Leaflet map layers (circle, polygon) not scaling properly during zoom

M Brian Dunson :

I can't figure out why the radiusmap layer (first map shown) and the isochronemap layer (second map shown) don't scale correctly when I zoom in and out. The third map, which has the exact same layers, works just fine.

Here's the code for a) creating the circle and polygon layers and then b) adding them to the radiusmap, the isochronemap and finally, the combined map.

        var isochrone = L.polygon(isochronedetails, {color: 'red'});
        var radius = L.circle([radiuslat, radiuslng], {fillColor: circleStyle.color[0], fillOpacity: circleStyle.opacity[0],radius: radiusmeters});
        radius.addTo(radiusmap);
        isochrone.addTo(drivetimemap);
        radius.addTo(combinedmap);
        isochrone.addTo(combinedmap);

The code that is creating / initializing the three maps is here:

        radiusmap = L.map('radiusmap').setView([radiuslat, radiuslng],10);
        radiusmap.addControl(new L.Control.Fullscreen());
        drivetimemap = L.map('drivetimemap').setView([isochronelat, isochronelng], 10);
        drivetimemap.addControl(new L.Control.Fullscreen());
        combinedmap = L.map('combinedmap').setView([isochronelat, isochronelng], 10);
        combinedmap.addControl(new L.Control.Fullscreen());

And here's a gif of what happens on zoom in/out for each map. You'll see that when the zoom happens for the first two maps, the circle or polygon moves away from the original drawing position. But, on the third map, it behaves correctly.

https://screencast-o-matic.com/watch/cYe1VQx6pZ

What am I doing wrong? I just want the first two maps to behave like the third map. :-)

ghybs :

Simply do not add your layers (namely isochrone and radius) to several maps, but create different layers (possibly with same parameters) for each separate map.

Leaflet makes the assumption for simplicity that when a layer is added to a map, it belongs only to that map.