Ulotka / JS: Dodawanie polilinii po przesunięciu / powiększeniu

Używam mapy Ulotka jako przeglądarki obrazów i próbuję dodać funkcję „przełączania krzyżyków”, która umieści celownik na środku obrazu. Sprawiłem, że działa do punktu, w którym celownik pojawia się poprawnie i jest „sprzężony” z obrazem podczas wykonywania panoram / zoomów, czyli tego, czego bym się spodziewał.

Problem polega na tym, że jeśli NAJPIERW wykonam panoramowanie / powiększanie, a następnie przełączę krzyżyki, krzyżyki pojawią się na środku „okna”, a nie na środku obrazu.

Kod, którego do tego używam, jest tutaj:

toggleCrosshair(toggleVal) {      
    let map = this.map;              

    if (toggleVal == true) {
        var north = map.getBounds().getNorth(); // these are in lat, lng
        var south = map.getBounds().getSouth();
        var east = map.getBounds().getEast();
        var west = map.getBounds().getWest();

        var center = map.getCenter();

        var latlngHorizontalLeft = new L.latLng(center.lat, west);
        var latlngHorizontalRight = new L.latLng(center.lat, east); 

        var horizLineList = [latlngHorizontalLeft, latlngHorizontalRight];
        let horizLine = new L.Polyline(horizLineList, {
            color: 'red',
            weight: 2,
            opacity: 0.5,
            smoothFactor: 1
        });

        var latlngVerticalTop = new L.latLng(north, center.lng);
        var latlngVerticalBottom = new L.latLng(south, center.lng);

        var vertLineList = [latlngVerticalTop, latlngVerticalBottom];
        let vertLine = new L.Polyline(vertLineList, {
            color: '#A5CE3A',
            weight: 2,
            opacity: 0.5,
            smoothFactor: 1
        });

        horizLine.addTo(map);
        vertLine.addTo(map);

    } else {
        var i;
        for (i in map._layers) {
            if (map._layers[i].options.color == '#A5CE3A') {
                try {
                    map.removeLayer(map._layers[i]);
                } catch (e) {
                    console.log("problem with " + e + map._layers[i]);
                }
            } else if (map._layers[i].options.color == 'red') {
                try {
                    map.removeLayer(map._layers[i]);
                } catch (e) {
                    console.log("problem with " + e + map._layers[i]);
                }
            }
        }
    }
}

Czy ktoś ma jakieś wskazówki, jak uzyskać zachowanie, na które mam nadzieję? Dzięki!