Ritika,
Here is a sample that shows how in 4.12.
<!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.12</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.12/esri/themes/light/main.css" />
<link rel="stylesheet" href="https://js.arcgis.com/4.12/dijit/themes/claro/claro.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"dijit/Menu", "dijit/MenuItem",
"dijit/popup"
], function (Map, MapView, FeatureLayer,
Menu, MenuItem, popup) {
let ctxMenuForGraphics, attributes, category, tname, wind, tyear;
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("info", "top-right");
view
.when()
.then(function () {
return hurricanesLayer.when();
})
.then(function (layer) {
createFeatureMenu();
const renderer = layer.renderer.clone();
renderer.symbol.width = 4;
renderer.symbol.color = [128, 128, 128, 0.8];
layer.renderer = renderer;
return view.whenLayerView(layer);
})
.then(function (layerView) {
view.on("click", eventHandler);
function eventHandler(event) {
if (event.button === 2) {
view.hitTest(event).then(function (evt) {
getGraphics(evt, event);
});
} else {
document.getElementById("info").style.visibility = "hidden";
popup.close(ctxMenuForGraphics);
if (highlight) {
highlight.remove();
highlight = null;
}
}
}
let highlight, currentYear, currentName;
function getGraphics(response, mevent) {
if (response.results.length) {
const graphic = response.results.filter(function (result) {
return result.graphic.layer === hurricanesLayer;
})[0].graphic;
attributes = graphic.attributes;
category = attributes.CAT;
wind = attributes.WIND_KTS;
tname = attributes.NAME;
tyear = attributes.YEAR;
id = attributes.OBJECTID;
if (highlight && (currentName !== tname || currentYear !== tyear)) {
highlight.remove();
highlight = null;
}
const query = layerView.layer.createQuery();
query.where = "YEAR = " + tyear + " AND NAME = '" + tname + "'";
layerView.queryObjectIds(query).then(function (ids) {
highlight = layerView.highlight(ids);
currentYear = tyear;
currentName = tname;
});
popup.open({
popup: ctxMenuForGraphics,
x: mevent.x,
y: mevent.y
});
document.getElementById("info").style.visibility = "hidden";
} else {
document.getElementById("info").style.visibility = "hidden";
popup.close(ctxMenuForGraphics);
highlight.remove();
highlight = null;
}
}
});
function createFeatureMenu() {
ctxMenuForGraphics = new Menu({});
ctxMenuForGraphics.addChild(new MenuItem({
label: "Track info...",
onClick: function () {
document.getElementById("info").style.visibility = "visible";
document.getElementById("name").innerHTML = tname;
document.getElementById("category").innerHTML =
"Category " + category;
document.getElementById("wind").innerHTML = wind + " kts";
popup.close(ctxMenuForGraphics);
}
}));
ctxMenuForGraphics.startup();
}
});
</script>
</head>
<body class="claro">
<div id="viewDiv"></div>
<div id="info">
<span id="name"></span> <br />
<span id="category"></span> <br />
<span id="wind"></span>
</div>
</body>
</html>