How To Terminate Map.on() Function For Mapbox?

I used the Mapbox JS API for showing coordinates. This is the link of the document: https://docs.mapbox.com/mapbox-gl-js/example/mouse-position/ I have two buttons. After I click t

Solution 1:

Immediately i can think of 2 options that might help you;

1.Change the html to equal ""

functionnotShowCor() {
 map.on('mousemove', function (e) {
            document.getElementById('coord-info-lat').innerHTML = "";
            document.getElementById('coord-info-lng').innerHTML = "";
        });
}

2. Set both elements to have opacity 0 (Though it would technically still be running) Assuming you had CSS styles as follows:

#coord-info-lat, #coord-info-lng {
   opacity:0;
}
#coord-info-lat.shown, coord-info-lng.shown {
   opacity: 1;
}

functionshowCor() {
        map.on('mousemove', function (e) {
            var lat = document.getElementById('coord-info-lat');
            var lng = document.getElementById('coord-info-lng');
            lat.innerHTML = JSON.stringify(e.lngLat.lat.toFixed(5));
            lng.innerHTML = JSON.stringify(e.lngLat.lng.toFixed(5));

            lat.className = "shown";
            lng.className = "shown";
        });
}

functionnotShowCor() { 
        document.getElementById('coord-info-lat').className = "";
        document.getElementById('coord-info-lng').className = "";
}

You could also do a combination of the 2

Solution 2:

I solved the problem by setting an 'isActive' flag. Here is my code.

let isActive = true;

//function to show the positionfunctionshowCor() {
    isActive = true;
    map.on('mousemove', function (e) {
        if (isActive) {
            document.getElementById('coord-info-lat').innerHTML =   
                JSON.stringify(e.lngLat.lat.toFixed(5));
            document.getElementById('coord-info-lng').innerHTML =
                JSON.stringify(e.lngLat.lng.toFixed(5));
        }

    });

}

//function to clear the info and terminate the function.functionnotShowCor() {
    isActive = false;
    document.getElementById('coord-info-lat').innerHTML = 'N/A';
    document.getElementById('coord-info-lng').innerHTML = 'N/A';
}

Please advise if you have better solutions. Thank you.