Ella,
I am not sure on the otherwise issue but here is a way that works fine:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="[Access features with click events - 4.3]">
<!--
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/view-hittest/index.html
-->
<title>Access features with click events - 4.3</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.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/renderers/UniqueValueRenderer",
"esri/symbols/SimpleLineSymbol",
"esri/widgets/Popup",
"esri/PopupTemplate",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol",
"esri/Graphic",
"dojo/dom",
"dojo/domReady!"
], function(
Map,
MapView,
FeatureLayer,
UniqueValueRenderer,
SimpleLineSymbol,
Popup,
PopupTemplate,
Point,
SimpleMarkerSymbol,
Graphic,
dom
) {
var layer = new FeatureLayer({
url: "https://gis05s.hdrgateway.com/arcgis/rest/services/Arizona/I11_SegmentRecommendations/MapServer/0",
})
var commentPopupTemplate = new PopupTemplate({
content: "<button type='button' id='mapCommentBtn' class='btn btn-info' data-long='{long}' data-lat='{lat}'>Place Comment Here</button>"
});
var segmentPopupTemplate = new PopupTemplate({
content: "<button type='button' id='segmentCommentBtn' class='btn btn-info' data-id={Segment_ID}>Comment on Segment</button>"
});
var symbol = new SimpleMarkerSymbol({
style: "round",
color: "red",
size: "12px"
});
var map = new Map({
basemap: "dark-gray",
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-111.77215576168958, 32.872667054353876],
zoom: 10
});
view.ui.add("info", "top-right");
view.on("click", function(evt) {
var screenPoint = {
x: evt.x,
y: evt.y
};
view.hitTest(screenPoint)
.then(getGraphics)
});
function AddPointGraphic(event) {
view.graphics.removeAll();
var pointGeometry = view.toMap(event);
var commentPointAtt = {
long: pointGeometry.longitude,
lat: pointGeometry.latitude
}
var commentPoint = new Graphic({
geometry: pointGeometry,
symbol: symbol,
attributes: commentPointAtt,
popupTemplate: commentPopupTemplate
});
view.graphics.add(commentPoint);
view.popup.open({
features: [commentPoint],
location: pointGeometry
});
}
function getGraphics(response) {
if(response.results.length == 0){
console.info(response);
AddPointGraphic(response.screenPoint);
}else{
alert("hitTest");
}
}
view.then(function() {
layer.then(function() {
var renderer = layer.renderer.clone();
renderer.symbol.width = 4;
renderer.symbol.color = [128, 128, 128, 0.8];
renderer.symbol.cap = "round";
layer.renderer = renderer;
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="info">
<span id="name"></span><br>
<span id="category"></span><br>
<span id="wind"></span>
</div>
</body>
</html>