Unselect On Click

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

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>

View solution in original post

Vakhtang_Zubiashvili
Occasional Contributor

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

0 Kudos