unbinding eventhandler from mapview

RiccardoKlinger

As I am working with arcgis JS API 4.24. I want to bind an eventhandler to the view if a user clicks on the map:

mapStore.mapView?.on('click', (event) => {
            const point = `point: (${event.mapPoint.latitude}, ${event.mapPoint.longitude})`;
            console.log('click event1: ', point);
            }

This eventhandler shall stay active as long as a condition is true. If the condition is false I would like to remove exactly this handler and I would like to only use the standard view on-click handler. I can disable the eventhandle exactly during its execution but I want to leave it active for the duration of the condition... the ad-hoc removal would look like:

export const clickhandler = (active: boolean): void => {
    const { mapStore } = Stores.getInstance();
    if (active) {
        const handler = mapStore.mapView?.on('click', (event) => {
            const point = `point: (${event.mapPoint.latitude}, ${event.mapPoint.longitude})`;
            console.log('click event1: ', point);
            handler?.remove();
        });
    } else {
        console.log('click event1: ', 'disabled');
    }
};

I've seen some examples where they work with dojo/connect in arcgis JS API 3.x... Is there an equivalent in ArcGIS JS API 4?

RRubalcava

@RiccardoKlinger you're very close. You just need to adjust your handler declaration and how you handle it a bit.

https://codepen.io/odoe/pen/bGMaJPW?editors=1001

let handler;
function myChange() {
  if (document.getElementById("check").checked) {
    // check if null
    if (handler) {
      return;
    }
    handler = view.on("click", (event) => {
      const point = `point: (${event.mapPoint.latitude}, ${event.mapPoint.longitude})`;
      console.log(point);
    });
  } else {
    // remove and set to null
    handler?.remove();
    handler = null;
  }
}