Trying to help a friend with some code and I can't seem to figure this out, when i am trying to identify something in a webservice the popup box does not appear with a left click, if I right click it does. Has the same issue with a different layers or map services from their server. I watched the traffic in Fiddler and same request is being sent with a right click and a left click. Just no pop-up with a left click. Maybe 1 out of 20 I will get a popup with a left click.
Code works great when I use a map service from my server.
view.when(function()
{
view.on("click", executeIdentifyTask);
identifyTask = new IdentifyTask(parcelURL);
// Set the parameters for the Identify
params = new IdentifyParameters();
params.tolerance = 1;
params.layerIds = [0];
params.layerOption = "visible";
params.returnGeometry = true;
params.width = view.width;
params.height = view.height;
});// Executes each time the view is clicked
function executeIdentifyTask(event) {
// Set the geometry to the location of the view click
params.geometry = event.mapPoint;
params.mapExtent = view.extent;
document.getElementById("viewDiv").style.cursor = "wait";
identifyTask
.execute(params)
.then(function(response)
{
var results = response.results;
return results.map(function(result)
{
var feature = result.feature;
var layerName = result.layerName;
feature.attributes.layerName = layerName;
feature.popupTemplate = {
// autocasts as new PopupTemplate()
title: "<b>Your property is elligible for sanitation service: Day Week",
content:
"<b>Pickup Day:</b> {DayA_B}"
};
return feature;
});
})
.then(showPopup); // Send the array of features to showPopup()
// Shows the results of the Identify in a popup once the promise is resolved
function showPopup(response)
{
if (response.length > 0)
{
view.popup.dockOptions =
{
buttonEnabled: false,
breakpoint: false,
position: "bottom-right"
};
view.popup.open({
features: response,
location: event.mapPoint,
});
}
document.getElementById("viewDiv").style.cursor = "auto";
}
}
Solved! Go to Solution.
Aaron,
This seems to work fine for me. I just took the IdentifyTask sample online and changed the layer type to MapImageLayer and then added your url and your code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>IdentifyTask - 4.13</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.13/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/tasks/IdentifyTask",
"esri/tasks/support/IdentifyParameters"
], function(Map, MapView, MapImageLayer, IdentifyTask, IdentifyParameters) {
var identifyTask, params;
// URL to the map service where the identify will be performed
var parcelURL =
"https://gis.easthartfordct.gov:6443/arcgis/rest/services/Sanitation_Routes/MapServer";
// Add the map service as a TileLayer for fast rendering
// Tile layers are composed of non-interactive images. For that reason we'll
// use IdentifyTask to query the service to add interactivity to the app
var parcelsLayer = new MapImageLayer({
url: parcelURL,
opacity: 0.85
});
var map = new Map({
basemap: "osm"
});
map.add(parcelsLayer);
var view = new MapView({
map: map,
container: "viewDiv",
center: [-72.6537, 41.7569],
zoom: 14
});
view.when(function(){
view.on("click", executeIdentifyTask);
identifyTask = new IdentifyTask(parcelURL);
// Set the parameters for the Identify
params = new IdentifyParameters();
params.tolerance = 1;
params.layerIds = [0];
params.layerOption = "visible";
params.returnGeometry = true;
params.width = view.width;
params.height = view.height;
});
// Executes each time the view is clicked
function executeIdentifyTask(event) {
// Set the geometry to the location of the view click
params.geometry = event.mapPoint;
params.mapExtent = view.extent;
document.getElementById("viewDiv").style.cursor = "wait";
identifyTask
.execute(params)
.then(function(response){
var results = response.results;
return results.map(function(result){
var feature = result.feature;
var layerName = result.layerName;
feature.attributes.layerName = layerName;
feature.popupTemplate = {
// autocasts as new PopupTemplate()
title: "<b>Your property is elligible for sanitation service: Day Week",
content:
"<b>Pickup Day:</b> {DayA_B}"
};
return feature;
});
})
.then(showPopup); // Send the array of features to showPopup()
// Shows the results of the Identify in a popup once the promise is resolved
function showPopup(response){
if (response.length > 0){
view.popup.dockOptions = {
buttonEnabled: false,
breakpoint: false,
position: "bottom-right"
};
view.popup.open({
features: response,
location: event.mapPoint,
});
}
document.getElementById("viewDiv").style.cursor = "auto";
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Aaron,
I would never be using 1 as the identify tolerance. One pixel tolerance is not enough, especially for point data, but really all data types. 3 or more is a better value there.
The distance in screen pixels from the specified geometry within which the identify should be performed.
Hi Robert,
I tried different tolerances up to 10 pixels with the same behavior. Right click to identify works as expected, left click does nothing.
thank you for the suggestion
Aaron,
The right or left click should not matter. Does the apps view have multiple click event listeners?
No, that is what is confusing. I originally wrote the application for a project I was working on, with my webservices a left click to identify works as expected. Using the other individuals webservices has different behavior with the same code.
Aaron,
I have never heard of, or seen that behavior... Not sure what is going on. Are those services public where you can provide a sample for me to test?
Aaron,
This seems to work fine for me. I just took the IdentifyTask sample online and changed the layer type to MapImageLayer and then added your url and your code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>IdentifyTask - 4.13</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.13/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/tasks/IdentifyTask",
"esri/tasks/support/IdentifyParameters"
], function(Map, MapView, MapImageLayer, IdentifyTask, IdentifyParameters) {
var identifyTask, params;
// URL to the map service where the identify will be performed
var parcelURL =
"https://gis.easthartfordct.gov:6443/arcgis/rest/services/Sanitation_Routes/MapServer";
// Add the map service as a TileLayer for fast rendering
// Tile layers are composed of non-interactive images. For that reason we'll
// use IdentifyTask to query the service to add interactivity to the app
var parcelsLayer = new MapImageLayer({
url: parcelURL,
opacity: 0.85
});
var map = new Map({
basemap: "osm"
});
map.add(parcelsLayer);
var view = new MapView({
map: map,
container: "viewDiv",
center: [-72.6537, 41.7569],
zoom: 14
});
view.when(function(){
view.on("click", executeIdentifyTask);
identifyTask = new IdentifyTask(parcelURL);
// Set the parameters for the Identify
params = new IdentifyParameters();
params.tolerance = 1;
params.layerIds = [0];
params.layerOption = "visible";
params.returnGeometry = true;
params.width = view.width;
params.height = view.height;
});
// Executes each time the view is clicked
function executeIdentifyTask(event) {
// Set the geometry to the location of the view click
params.geometry = event.mapPoint;
params.mapExtent = view.extent;
document.getElementById("viewDiv").style.cursor = "wait";
identifyTask
.execute(params)
.then(function(response){
var results = response.results;
return results.map(function(result){
var feature = result.feature;
var layerName = result.layerName;
feature.attributes.layerName = layerName;
feature.popupTemplate = {
// autocasts as new PopupTemplate()
title: "<b>Your property is elligible for sanitation service: Day Week",
content:
"<b>Pickup Day:</b> {DayA_B}"
};
return feature;
});
})
.then(showPopup); // Send the array of features to showPopup()
// Shows the results of the Identify in a popup once the promise is resolved
function showPopup(response){
if (response.length > 0){
view.popup.dockOptions = {
buttonEnabled: false,
breakpoint: false,
position: "bottom-right"
};
view.popup.open({
features: response,
location: event.mapPoint,
});
}
document.getElementById("viewDiv").style.cursor = "auto";
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Changing to a MapImageLayer resolved the issue. thank you for your help