Unselect On Click

1282
2
Jump to solution
12-26-2019 03:09 AM
Vakhtang_Zubiashvili
Occasional Contributor II

Hi guys,

Need your help.

I have code, Anne Fitz‌ helped me. I make selection (highlight) of features on click and clear highlights when click on "Clear highlights" button. Now i want to unselect selected feature when click on Right mouse button, so others have to stay selected. I make some changes, but it became funny map, it does job vice versa, i cant select (highlight) when click on left button of mouse, but i can select when click Right one. You can see on my uploaded code.  

Help please

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
     ArcGIS API for JavaScript, https://js.arcgis.com
     For more information about the view-hittest sample,
     read the original sample description at developers.arcgis.com.
     https://developers.arcgis.com/javascript/latest/sample-code/view-hittest/index.html
     -->
    <title>Access features with pointer events - 4.14</title>

    <style>
      html,
      body,
      #viewDiv {
        padding0;
        margin0;
        height100%;
        width100%;
      }

      #clearHighlights {
        background-colorblack;
        opacity0.75;
        colororange;
        font-size12pt;
        padding8px;
        cursorpointer;
      }
    </style>

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

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer"
      ], function(MapMapViewFeatureLayer) {
        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.12553735.863534],
          zoom: 4,
          highlightOptions: {
            color: "orange"
          }
        });

        view.ui.add("clearHighlights""top-right");

        view
          .when()
          .then(function() {
            return hurricanesLayer.when();
          })
          .then(function(layer) {
            const renderer = layer.renderer.clone();
            renderer.symbol.width = 4;
            renderer.symbol.color = [1281281280.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) {
            //view.on("pointer-move", eventHandler);
            view.on("pointer-down"eventHandler);
            const clearBtn = document.getElementById("clearHighlights")
            clearBtn.addEventListener("click"clearHighlights);
            let highlightedObjs = [];
            let highlight;

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

            let currentYearcurrentName;

            function getGraphics(response) {
              console.log(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 name = attributes.NAME;
                const year = attributes.YEAR;

                // 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) {

                    
                  // remove highlight if already defined
                  if (highlight) {
                    highlight.remove();
                  }
                  // create array from existing highlighted objs + items returned from query
                  var arr = highlightedObjs.concat(ids);
                  console.log(arr);
                  // highlight all objs in array
                  highlight = layerView.highlight(arr);
                  highlightedObjs = arr;
                });
              }
            }

            view.on("click"eventHandler);

            function eventHandler(event) {
                    if (event.button === 2) {
                       view.hitTest(event).then(function (evt) {
                        getGraphics(evtevent);
           });
        }  
              
              if (highlight) {
                highlight.remove();
                highlight = null;
              }
            
          }


            function clearHighlights(){
              // clear array of highlighted objs and remove highlights
              highlightedObjs = [];
              highlight.remove();
            }
          });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="clearHighlights">
      Clear Highlights
    </div>
  </body>
</html>
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Vakhtang,

   Here is what you are after:

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <!--
     ArcGIS API for JavaScript, https://js.arcgis.com
     For more information about the view-hittest sample,
     read the original sample description at developers.arcgis.com.
     https://developers.arcgis.com/javascript/latest/sample-code/view-hittest/index.html
     -->
  <title>Access features with pointer events - 4.14</title>

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

    #clearHighlights {
      background-color: black;
      opacity: 0.75;
      color: orange;
      font-size: 12pt;
      padding: 8px;
      cursor: pointer;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.14/"></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"
        }
      });

      view.ui.add("clearHighlights", "top-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) {
          view.on("pointer-down", eventHandler);
          const clearBtn = document.getElementById("clearHighlights")
          clearBtn.addEventListener("click", clearHighlights);
          let highlightedObjs = [];
          let highlight;

          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 currentYear, currentName;

          function getGraphics(response, addRemove) {
            // 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 name = attributes.NAME;
              const year = attributes.YEAR;

              // 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) {
                // remove highlight if already defined
                if (highlight) {
                  highlight.remove();
                }
                var arr;
                if(addRemove === 'remove'){
                  //Remove the clicked object id from the highlightedObjs array
                  ids.map(function(id){
                    var index = highlightedObjs.indexOf(id);
                    if (index !== -1) highlightedObjs.splice(index, 1);
                  });
                  arr = highlightedObjs;
                }else{
                  //Add the clicked object id(s) to the highlightedObjs array
                  arr = highlightedObjs.concat(ids);
                }
                // highlight all objs in array
                highlight = layerView.highlight(arr);
                highlightedObjs = arr;
              });
            }
          }

          view.on("click", eventHandler);

          function eventHandler(event) {
            if (event.button === 2) {
              view.hitTest(event).then(function (evt) {
                getGraphics(evt, 'remove');
              });
            }else{
              view.hitTest(event).then(function (evt) {
                getGraphics(evt, 'add');
              });
            }
          }

          function clearHighlights() {
            // clear array of highlighted objs and remove highlights
            highlightedObjs = [];
            highlight.remove();
          }
        });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="clearHighlights">
    Clear Highlights
  </div>
</body>

</html>

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Vakhtang,

   Here is what you are after:

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <!--
     ArcGIS API for JavaScript, https://js.arcgis.com
     For more information about the view-hittest sample,
     read the original sample description at developers.arcgis.com.
     https://developers.arcgis.com/javascript/latest/sample-code/view-hittest/index.html
     -->
  <title>Access features with pointer events - 4.14</title>

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

    #clearHighlights {
      background-color: black;
      opacity: 0.75;
      color: orange;
      font-size: 12pt;
      padding: 8px;
      cursor: pointer;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.14/"></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"
        }
      });

      view.ui.add("clearHighlights", "top-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) {
          view.on("pointer-down", eventHandler);
          const clearBtn = document.getElementById("clearHighlights")
          clearBtn.addEventListener("click", clearHighlights);
          let highlightedObjs = [];
          let highlight;

          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 currentYear, currentName;

          function getGraphics(response, addRemove) {
            // 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 name = attributes.NAME;
              const year = attributes.YEAR;

              // 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) {
                // remove highlight if already defined
                if (highlight) {
                  highlight.remove();
                }
                var arr;
                if(addRemove === 'remove'){
                  //Remove the clicked object id from the highlightedObjs array
                  ids.map(function(id){
                    var index = highlightedObjs.indexOf(id);
                    if (index !== -1) highlightedObjs.splice(index, 1);
                  });
                  arr = highlightedObjs;
                }else{
                  //Add the clicked object id(s) to the highlightedObjs array
                  arr = highlightedObjs.concat(ids);
                }
                // highlight all objs in array
                highlight = layerView.highlight(arr);
                highlightedObjs = arr;
              });
            }
          }

          view.on("click", eventHandler);

          function eventHandler(event) {
            if (event.button === 2) {
              view.hitTest(event).then(function (evt) {
                getGraphics(evt, 'remove');
              });
            }else{
              view.hitTest(event).then(function (evt) {
                getGraphics(evt, 'add');
              });
            }
          }

          function clearHighlights() {
            // clear array of highlighted objs and remove highlights
            highlightedObjs = [];
            highlight.remove();
          }
        });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="clearHighlights">
    Clear Highlights
  </div>
</body>

</html>
Vakhtang_Zubiashvili
Occasional Contributor II

Thank you Robert, this is exactly it what i wanted. You are great as always. Happy new year.

0 Kudos