SVG on top of synced map returning to center upon drag

[bernardoct]

Hi,

I'm using D3.js to add an SVG on top of the first of two synced maps. When I zoom in and out, the SVG zooms in and out as well, just as expected. However, when I drag the map around, the SVG moves with the map until I release the mouse's left button, when the SVG ends up snapped back to the center of the screen. If I comment the lines in which the maps are synced this doesn't happen on the map with the SVG (zooming and dragging work fine), but then the maps are obviously no longer synchronized. What should I do? I added breakpoints to my function that projects the data on the map but the only time when execution was stopped there was when I first loaded the page, which makes me believe this is either a bug on leaflet.Sync or a feature not yet added to it.

Below is the code I'm using to create the SVG:

let osmLayer1 = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', { // Can get others from https://leaflet-extras.github.io/leaflet-providers/preview/
        attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
        maxZoom: 16
    }); 

    let osmLayer2 = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', { // Can get others from https://leaflet-extras.github.io/leaflet-providers/preview/
        attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
        maxZoom: 16
    }); 

    map1 = L.map('map1', {
        layers: [osmLayer1],
        center: map_center,
        zoom: 11
    }); // initializes the map, sets zoom & coordinates
    map2 = L.map('map2', {
        layers: [osmLayer2],
        center: map_center,
        zoom: 11,
        zoomControl: false
    }); // initializes the map, sets zoom & coordinates

    map1.sync(map2);
    map2.sync(map1);

    // Initialize svg to add to map
    L.svg({clickable:true}).addTo(map1);
    // Create selection using D3
    const overlay = d3.select(map1.getPanes().overlayPane);
    const svg = overlay.select('svg').attr("pointer-events", "auto");
    // create a group that is hidden during zooming
    const g = svg.append('g').attr('class', 'leaflet-zoom-hide');

I managed to solve the problem but manually handling Leaflet's moveend event, though this may hurt performance---feel free to disagree, I'm almost a beginner. Is there a cleaner solution?

Thanks, Bernardo

[abjardim]

Hi @bernardoct,

I'm having the same problem with a geojson layer on top of the map. Would you mind sharing how you solved it handling the moveend event?

Thanks a lot, Amanda

[bhupinders]

Hi @bernardoct,

I'm having the same problem with a geojson layer on top of the map. Would you mind sharing how you solved it handling the moveend event?

Thanks a lot, Amanda

Hi @abjardim

I am having the same issue. When adding a geojson layer to both the maps, the geojson layer in the first map doesn't move at all. Were you able to solve this?

Thanks, Bhupinder

[bhupinders]

For geojson Layer, I was able to solve it using creating two different geojson layers and then adding.

The following doesn't work:

geojson = L.geoJson(data);

geojson.addTo(map1);
geojson.addTo(map2);

But this works:

geojson1 = L.geoJson(data);
geojson2 = L.geoJson(data);

geojson1.addTo(map1);
geojson2.addTo(map2);

Thanks a lot, Bhupinder