Unselect On Click

Vakhtang_Zubiashvili · ‎12-26-2019

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

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"

/>

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

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(evt, event);

});

}

if (highlight) {

highlight.remove();

highlight = null;

}

function clearHighlights(){

// clear array of highlighted objs and remove highlights

highlightedObjs = [];

highlight.remove();

}

});

</script>

</head>

<body>

Clear Highlights

</div>

</body>

</html>

RobertScheitlin__GISP · ‎12-26-2019

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

RobertScheitlin__GISP · ‎12-26-2019

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 · ‎12-26-2019

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