Identify not creating popup

381
8
Jump to solution
11-22-2019 11:58 AM
AaronNash1
Occasional Contributor II

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";
}
}

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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>

View solution in original post

8 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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.
0 Kudos
AaronNash1
Occasional Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Aaron,

   The right or left click should not matter. Does the apps view have multiple click event listeners?

0 Kudos
AaronNash1
Occasional Contributor II

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. 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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?

0 Kudos
AaronNash1
Occasional Contributor II
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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>
AaronNash1
Occasional Contributor II

Changing to a MapImageLayer resolved the issue. thank you for your help

0 Kudos