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
Solved! Go to Solution.
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,
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>
Thank you Robert, this is exactly it what i wanted. You are great as always. Happy new year.