2

I am using a Leaflet map as an image viewer, and I'm trying to add a 'toggle crosshairs' function that will place a crosshair at the center of the image. I've got it working to a point where the crosshair appears correctly, and is 'coupled' to the image when doing pans/zooms, which is what I would expect to see.

The issue I'm having is that if I do the pan/zoom FIRST, and then toggle the crosshairs, the crosshairs appear in the center of the 'window', not in the center of the image.

The code I'm using for this is here:

    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]);
                }
            }
        }
    }
}

I've asked this question StackOverflow, but haven't gotten a response, so I figured I would try here.

  • I'm not sure I follow your logic completely. From your code it's obvious that at the time of crosshair creation you are always placing it at the center of the view. If at that time this is also center of the image, it works as desired, otherwise it cannot. – TomazicM Nov 21 at 6:45
  • Hi TomazicM...thanks for the response. I actually got this figured out...I ended up having to 'recenter' the image to a known location/zoom value...then add the crosshairs...and then move the image back to the original location/zoom value. I did this by using the 'SetView' method. One thing I had to do was to set the animation to 'false'...other wise the timing of the animation threw things off. – dave reid Nov 21 at 17:45
  • This sounds rather complicated. If you know the coordinates of the image (screen or geographic), you can always create crosshair at it's center. – TomazicM Nov 21 at 18:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.