topic Re: turn view click on and off in ArcGIS JavaScript Maps SDK Questions

turn view click on and off

jaykapalczynski — Sat, 11 Dec 2021 19:53:48 GMT

I have a map that I want the user to interface with.

Right now the below code works great but the map is ALWAYS active.

I need to be able to activate the clicks after a button is clicked.

Until the user clicks a button the viewright.on("click"...... is not enabled.

On page reload the button should have to be clicked again to register the clicks in the map

Any thoughts?

viewright.on("click", function (evt) {
    viewright.hitTest(evt.screenPoint).then(function (response) {
  
         // Do a bunch of stuff
   
    });

}‍‍‍‍‍);‍‍‍‍‍‍‍‍

Re: turn view click on and off

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:53:51 GMT

Jay,

So you would just add the on event listener in the on click event of a button then.

Here is an example of how to toggle view mouse events with a button:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Access features with pointer events - 4.15</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #info {
        background-color: black;
        opacity: 0.75;
        color: orange;
        font-size: 18pt;
        padding: 8px;
        visibility: hidden;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.15/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer"
      ], function(Map, MapView, FeatureLayer) {
        const hurricanesLayer = new FeatureLayer({
          url:
            "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Hurricanes/MapServer/1",
          outFields: ["*"]
        });

        const map = new Map({
          basemap: "dark-gray",
          layers: [hurricanesLayer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-61.125537, 35.863534],
          zoom: 4,
          highlightOptions: {
            color: "orange"
          }
        });
        
        let mouseEvtHandler;

        view.ui.add("info", "top-right");
        view.ui.add("btn", "bottom-right");

        view
          .when()
          .then(function() {
            
            return hurricanesLayer.when();
          })
          .then(function(layer) {
            const renderer = layer.renderer.clone();
            renderer.symbol.width = 4;
            renderer.symbol.color = [128, 128, 128, 0.8];
            layer.renderer = renderer;

            // Set up an event handler for pointer-down (mobile)
            // and pointer-move events (mouse)
            // and retrieve the screen x, y coordinates

            return view.whenLayerView(layer);
          })
          .then(function(layerView) {
            let myBtn = document.getElementById("btn");
            myBtn.addEventListener("click", function(){
              if(mouseEvtHandler){
                mouseEvtHandler.remove();
                mouseEvtHandler = null;
              }else{
                mouseEvtHandler = view.on("pointer-move", eventHandler);
              }
            });
            view.on("pointer-down", eventHandler);

            function eventHandler(event) {
              // the hitTest() checks to see if any graphics in the view
              // intersect the x, y coordinates of the pointer
              view.hitTest(event).then(getGraphics);
            }

            let highlight, currentYear, currentName;

            function getGraphics(response) {
              // the topmost graphic from the hurricanesLayer
              // and display select attribute values from the
              // graphic to the user
              if (response.results.length) {
                const graphic = response.results.filter(function(result) {
                  return result.graphic.layer === hurricanesLayer;
                })[0].graphic;

                const attributes = graphic.attributes;
                const category = attributes.CAT;
                const wind = attributes.WIND_KTS;
                const name = attributes.NAME;
                const year = attributes.YEAR;
                const id = attributes.OBJECTID;

                if (
                  highlight &&
                  (currentName !== name || currentYear !== year)
                ) {
                  highlight.remove();
                  highlight = null;
                  return;
                }

                if (highlight) {
                  return;
                }

                document.getElementById("info").style.visibility = "visible";
                document.getElementById("name").innerHTML = name;
                document.getElementById("category").innerHTML =
                  "Category " + category;
                document.getElementById("wind").innerHTML = wind + " kts";

                // highlight all features belonging to the same hurricane as the feature
                // returned from the hitTest
                const query = layerView.createQuery();
                query.where = "YEAR = " + year + " AND NAME = '" + name + "'";
                layerView.queryObjectIds(query).then(function(ids) {
                  if (highlight) {
                    highlight.remove();
                  }
                  highlight = layerView.highlight(ids);
                  currentYear = year;
                  currentName = name;
                });
              } else {
                // remove the highlight if no features are
                // returned from the hitTest
                if (highlight) {
                  highlight.remove();
                  highlight = null;
                }
                document.getElementById("info").style.visibility = "hidden";
              }
            }
          });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="info">
      <span id="name"></span> <br />
      <span id="category"></span> <br />
      <span id="wind"></span>
    </div>
    <button id="btn">Toggle Mouse Events</button>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: turn view click on and off

jaykapalczynski — Mon, 11 May 2020 12:55:31 GMT

It is my assumption that this solution forces the user to click the button and then click in the map.

That if the user chooses to select a different feature they would have to click the button again and then select a feature in the map? Or am I wrong?

The workflow I need is:

The map is inactive for selecting

Click a "Start" button to activate map clicks (multiple map clicks)

The user can click as many times as they choose

After clicking a separate "submit" button (disable the ability to click the map until the "start" button is clicked)

Re: turn view click on and off

RobertScheitlin__GISP — Mon, 11 May 2020 13:05:53 GMT

Jay,

It is my assumption that this solution forces the user to click the button and then click in the map.
That if the user chooses to select a different feature they would have to click the button again and then select a feature in the map? Or am I wrong?

In The sample above, yes you would have to click the button before the mouse move would start operating. But no you would not have to click the button again until you wanted to turn off the mouse move functionality.

If you want the app to have the mouse move (in the sample case) from the beginning then you just have to have this line again outside the button click event handler:

mouseEvtHandler = view.on("pointer-move", eventHandler);

Re: turn view click on and off

jaykapalczynski — Mon, 11 May 2020 13:08:47 GMT

Looking at it closer I think that is what I am after .... instead of converting to a mouse over or pointer-move I would need someway to cancel the map click ability...that is the part I am not sure of

This example seems to be active in both cases....click or hover...I need click not active at all. I want to disable the ability to click after clicking a submit button ... Is there a specific code that disables a the view onClick?

Re: turn view click on and off

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:53:54 GMT

mouseEvtHandler = viewright.on("click", function (evt) {
...‍‍

and just like the sample.

if(mouseEvtHandler){
  mouseEvtHandler.remove();
  mouseEvtHandler = null;
}‍‍‍‍

To remove the click event handler

Re: turn view click on and off

jaykapalczynski — Sat, 11 Dec 2021 19:53:57 GMT

So if I am reading this correct

Click the button....

If should allow the user to click

Click the button again and it should set the MouseEvtHandler to NOT allow a click.

Click the button again and it should allow the user to click....

let myBtn = document.getElementById("btn");            

myBtn.addEventListener("click", function(){
   if(mouseEvtHandler){
      mouseEvtHandler.remove();
      mouseEvtHandler = null;
   }else{
      mouseEvtHandler = view.on("pointer-down", eventHandler);
   }
});
‍‍‍‍‍‍‍‍‍‍

Re: turn view click on and off

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:54:00 GMT

Correct. Just a small correction though.

let myBtn = document.getElementById("btn");            

myBtn.addEventListener("click", function(){
   if(mouseEvtHandler){
      mouseEvtHandler.remove();
      mouseEvtHandler = null;
   }else{
      mouseEvtHandler = view.on("click", eventHandler);
   }
});‍‍‍‍‍‍‍‍‍‍

eventHandler would be the function portion of your original post:

function eventHandler(evt){
  viewright.hitTest(evt.screenPoint).then(function (response) {
    // Do a bunch of stuff
  });‍‍‍
)‍‍‍‍‍

Re: turn view click on and off

jaykapalczynski — Mon, 11 May 2020 13:33:53 GMT

Yea I got that....just left that out.....THANKS

Re: turn view click on and off

jaykapalczynski — Sat, 11 Dec 2021 19:54:02 GMT

I am doing this and never getting the alert "1"

I get the "start" alert everytime which I should

I then get the "2" alert EVERY time....never the "1" alert

So that tells me its not setting the mouseEvtHandler to null....

Do I have something wrong?

<div id="select-by-Testing" style="height: 20px; width: 100%; padding: 10px 10px 10px 10px;" class="esri-widget esri-widget--button esri-widget esri-interactive" title="identify features">
       <span>Click Testing</span>
</div> ‍‍‍

        var mapright = new Map({
            basemap: "dark-gray",
            //: [countyLayerWebMercator]
            layers: [countyLayerWebMercator, resultsLayer3, resultsLayer2, resultsLayer4]   
        });
        var viewright = new MapView({
            container: "viewDivright",
            map: mapright,
            center: [-77.05, 37.53308],
            zoom: 7
        }); 


        let mouseEvtHandler;
        var selectButton2 = document.getElementById("select-by-Testing");
        selectButton2.addEventListener("click", function() {

            alert("start");

            if (mouseEvtHandler) {
                alert("1");
                mouseEvtHandler.remove();
                mouseEvtHandler = null;
            } else {
                alert("2");
                // mouseEvtHandler = viewright.on("click", eventHandler);
            }
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: turn view click on and off

jaykapalczynski — Mon, 11 May 2020 14:31:52 GMT

Oh wait I am never setting the mouseEvtHandler to anything to test against......ahhahahahah....one seond

Re: turn view click on and off

jaykapalczynski — Mon, 11 May 2020 14:35:32 GMT

duh.....yep that was it...my error....THANKS AGAIN