Limiting a popup to only launch when there is a result

BenScott1 · ‎09-16-2015

By default, the javascript popup launches on any click regardless of whether there is resulting data or not. I am trying too develop a map in which a click on a location which has no data will not launch the popup. There is a thread on this (How to NOT SHOW/HIDE infowindow/popup if identify results = No Info Avai.? ) which shows how to do this using an event task but this is not a complete working sample so i am trying to fill in the blanks. I have my map working in the sandbox, but when I try to introduce an if (response.length > 0) { statement (line 118) to limit when the popup appears I get no popup regardless of where I click. Any ideas on what is wrong with the code below?

Cheers,

Ben

if (reasponse.length > 0) { if (response.length > 0) {

<!DOCTYPE html>
<html> 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Identify with Popup</title>


    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
    </style>


    <script src="http://js.arcgis.com/3.14/"></script>
    <script>
      require([
        "esri/map",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters",
        "esri/dijit/Popup",  
        "dojo/_base/array",
        "dojo/dom-construct",
        "dojo/domReady!",
        "esri/dijit/Search",
        "esri/dijit/HomeButton"  
        ], 
      function (
          Map,
          InfoTemplate,
          ArcGISDynamicMapServiceLayer,
          IdentifyTask,
          IdentifyParameters,
          Popup,
          arrayUtils, 
          domConstruct,    
          Search,
          HomeButton
          ) {
      
          var identifyTask, identifyParams;
          
          var popup = new Popup({}, domConstruct.create("div"));
      //popup.visibleWhenEmpty = false;
              //popup.hideDelay = 0;
     
          var map = new Map("map", {
            basemap: "topo",
         center: [147, -33.5],
            zoom: 6,
         logo:false,
         showAttribution: false,
            infoWindow: popup
          });            
      
          map.on("load", mapReady);


    var templateRivers = new InfoTemplate();
    templateRivers.setTitle("<b>${LocationUpper}</b>");
    templateRivers.setContent("<b>${River}</b><br><b>Flow:</b> ${Flow:NumberFormat(places:0)} ML/day<br><b>Level:</b> ${Level_:NumberFormat(places:2)} m<br><b>Status:</b> ${Status}<br><b>Updated on: </b> ${Last_Update}");


    var templateStorages = new InfoTemplate();
    templateStorages.setTitle("<b>${LocationUpper}</b>");
    templateStorages.setContent("<b>${River}</b><br><b>Storage:</b> ${Percentage:NumberFormat(places:0)} %<br><b>Level:</b> ${Level_:NumberFormat(places:2)} m<br><b>Status:</b> ${Status}<br><b>Updated on: </b> ${Last_Update}");


    var templateCatchment = new InfoTemplate();
    templateCatchment.setTitle("<b>Sydney's Drinking Water Catchment</b>");
    templateCatchment.setContent("<br/><a href='http://www.waternsw.com.au/supply/greater-sydneys-dam-levels' target='_blank'>Click here for detailed information about Sydney's drinking water storages</a>");




        var parcelsURL = "http://maps.waternsw.com.au:6080/arcgis/rest/services/Water/HydrometricService/MapServer";
        map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL,
          { opacity: 0.9 }));


        function mapReady () {
          map.on("click", executeIdentifyTask);
          //create identify tasks and setup parameters
          identifyTask = new IdentifyTask(parcelsURL);


          identifyParams = new IdentifyParameters();
          identifyParams.tolerance = 10;
          identifyParams.returnGeometry = false;
          identifyParams.layerIds = [0,1,2,3];
          identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
          identifyParams.width = map.width;
          identifyParams.height = map.height;
        }


        function executeIdentifyTask (event) {
          identifyParams.geometry = event.mapPoint;
          identifyParams.mapExtent = map.extent;


          var deferred = identifyTask
            .execute(identifyParams)
            .addCallback(function (response) {
              // response is an array of identify result objects
              // Let's return an array of features.


              if (response.length > 0) {   
           
                map.infoWindow.show(evt.mapPoint);  
                return arrayUtils.map(response, function (result) {
                  var feature = result.feature;
                  var layerName = result.layerName;
  
                  feature.attributes.layerName = layerName;
  
                  if (layerName === 'Hydrometric Service - Rivers') {
                    feature.setInfoTemplate(templateRivers);
                  }
                  else if (layerName === 'HydrometricService - Storage') {
                    feature.setInfoTemplate(templateStorages);
                  }
          
                  else if (layerName === 'Declared Catchment (WNSW)') {
                    feature.setInfoTemplate(templateCatchment);
                  }
                  return feature;
                });
              }
            });


            map.infoWindow.setFeatures([deferred]);
        }
      });
    </script>
  </head>
  
  <body>
    <div id="map"></div>
  </body>


</html>

RobertScheitlin__GISP · ‎09-16-2015

Ben,

Here are the missing pieces:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Identify with Popup</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css" />
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    require([
        "esri/map",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters",
        "esri/dijit/Popup",
        "dojo/_base/array",
        "dojo/dom-construct",
        "esri/dijit/Search",
        "esri/dijit/HomeButton",
        "dojo/Deferred",
        "dojo/_base/lang",
        "dojo/domReady!"
        ],
      function (
        Map,
        InfoTemplate,
        ArcGISDynamicMapServiceLayer,
        IdentifyTask,
        IdentifyParameters,
        Popup,
        arrayUtils,
        domConstruct,
        Search,
        HomeButton,
        deferred,
        lang
      ) {

        var identifyTask, identifyParams;

        var popup = new Popup({}, domConstruct.create("div"));

        var map = new Map("map", {
          basemap: "topo",
          center: [147, -33.5],
          zoom: 6,
          logo: false,
          showAttribution: false,
          infoWindow: popup
        });

        map.on("load", mapReady);

        var templateRivers = new InfoTemplate();
        templateRivers.setTitle("<b>${LocationUpper}</b>");
        templateRivers.setContent("<b>${River}</b><br><b>Flow:</b> ${Flow:NumberFormat(places:0)} ML/day<br><b>Level:</b>" +
                                  " ${Level_:NumberFormat(places:2)} m<br><b>Status:</b> ${Status}<br><b>Updated on: </b> ${Last_Update}");

        var templateStorages = new InfoTemplate();
        templateStorages.setTitle("<b>${LocationUpper}</b>");
        templateStorages.setContent("<b>${River}</b><br><b>Storage:</b> ${Percentage:NumberFormat(places:0)} %<br><b>Level:</b>" +
          "${Level_:NumberFormat(places:2)} m<br><b>Status:</b> ${Status}<br><b>Updated on: </b> ${Last_Update}");

        var templateCatchment = new InfoTemplate();
        templateCatchment.setTitle("<b>Sydney's Drinking Water Catchment</b>");
        templateCatchment.setContent("<br/><a href='http://www.waternsw.com.au/supply/greater-sydneys-dam-levels'" +
          "target='_blank'>Click here for detailed information about Sydney's drinking water storages</a>");

        var parcelsURL = "http://maps.waternsw.com.au:6080/arcgis/rest/services/Water/HydrometricService/MapServer";
        map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL, {
          opacity: 0.9
        }));

        function mapReady() {
          map.on("click", executeIdentifyTask);
          //create identify tasks and setup parameters
          identifyTask = new IdentifyTask(parcelsURL);
          identifyParams = new IdentifyParameters();
          identifyParams.tolerance = 10;
          identifyParams.returnGeometry = true;
          identifyParams.layerIds = [0, 1, 2, 3];
          identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
          identifyParams.width = map.width;
          identifyParams.height = map.height;
        }

        function executeIdentifyTask(event) {
          identifyParams.geometry = event.mapPoint;
          identifyParams.mapExtent = map.extent;

          var deferred = identifyTask
            .execute(identifyParams)
            .addCallback(lang.hitch(this, function (response) {
              // response is an array of identify result objects
              // Let's return an array of features.
              if (response.length > 0) {
                map.infoWindow.show(event.mapPoint);
                return arrayUtils.map(response, function (result) {
                  var feature = result.feature;
                  var layerName = result.layerName;

                  feature.attributes.layerName = layerName;

                  if (layerName === 'Hydrometric Service - Rivers') {
                    feature.setInfoTemplate(templateRivers);
                  } else if (layerName === 'HydrometricService - Storage') {
                    feature.setInfoTemplate(templateStorages);
                  } else if (layerName === 'Declared Catchment (WNSW)') {
                    feature.setInfoTemplate(templateCatchment);
                  }
                  return feature;
                });
              }
            }));
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.hide();
        }
      });
  </script>
</head>

<body>
  <div id="map"></div>
</body>

</html>

View solution in original post

MahtabAlam1 · ‎09-16-2015

It will work if you change change evt to event in line 120.

BenScott1 · ‎09-16-2015

Thanks - this was a silly mistake. With that fixed, however it still doesn't hide when I click elsewhere, so clicking on a point to launch the popup and then clicking elsewhere causes the popup to still display "no information available". Robert's answer below fixes that problem by adding map.infoWindow.hide(); to the bottom of the code (line 131).

RobertScheitlin__GISP · ‎09-16-2015

Ben,

Besides that your requires needed work. "dojo/domReady!" always needs to the last one and you did not have "dojo/Deferred"

RobertScheitlin__GISP · ‎09-16-2015

Ben,

Here are the missing pieces:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Identify with Popup</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css" />
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    require([
        "esri/map",
        "esri/InfoTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters",
        "esri/dijit/Popup",
        "dojo/_base/array",
        "dojo/dom-construct",
        "esri/dijit/Search",
        "esri/dijit/HomeButton",
        "dojo/Deferred",
        "dojo/_base/lang",
        "dojo/domReady!"
        ],
      function (
        Map,
        InfoTemplate,
        ArcGISDynamicMapServiceLayer,
        IdentifyTask,
        IdentifyParameters,
        Popup,
        arrayUtils,
        domConstruct,
        Search,
        HomeButton,
        deferred,
        lang
      ) {

        var identifyTask, identifyParams;

        var popup = new Popup({}, domConstruct.create("div"));

        var map = new Map("map", {
          basemap: "topo",
          center: [147, -33.5],
          zoom: 6,
          logo: false,
          showAttribution: false,
          infoWindow: popup
        });

        map.on("load", mapReady);

        var templateRivers = new InfoTemplate();
        templateRivers.setTitle("<b>${LocationUpper}</b>");
        templateRivers.setContent("<b>${River}</b><br><b>Flow:</b> ${Flow:NumberFormat(places:0)} ML/day<br><b>Level:</b>" +
                                  " ${Level_:NumberFormat(places:2)} m<br><b>Status:</b> ${Status}<br><b>Updated on: </b> ${Last_Update}");

        var templateStorages = new InfoTemplate();
        templateStorages.setTitle("<b>${LocationUpper}</b>");
        templateStorages.setContent("<b>${River}</b><br><b>Storage:</b> ${Percentage:NumberFormat(places:0)} %<br><b>Level:</b>" +
          "${Level_:NumberFormat(places:2)} m<br><b>Status:</b> ${Status}<br><b>Updated on: </b> ${Last_Update}");

        var templateCatchment = new InfoTemplate();
        templateCatchment.setTitle("<b>Sydney's Drinking Water Catchment</b>");
        templateCatchment.setContent("<br/><a href='http://www.waternsw.com.au/supply/greater-sydneys-dam-levels'" +
          "target='_blank'>Click here for detailed information about Sydney's drinking water storages</a>");

        var parcelsURL = "http://maps.waternsw.com.au:6080/arcgis/rest/services/Water/HydrometricService/MapServer";
        map.addLayer(new ArcGISDynamicMapServiceLayer(parcelsURL, {
          opacity: 0.9
        }));

        function mapReady() {
          map.on("click", executeIdentifyTask);
          //create identify tasks and setup parameters
          identifyTask = new IdentifyTask(parcelsURL);
          identifyParams = new IdentifyParameters();
          identifyParams.tolerance = 10;
          identifyParams.returnGeometry = true;
          identifyParams.layerIds = [0, 1, 2, 3];
          identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
          identifyParams.width = map.width;
          identifyParams.height = map.height;
        }

        function executeIdentifyTask(event) {
          identifyParams.geometry = event.mapPoint;
          identifyParams.mapExtent = map.extent;

          var deferred = identifyTask
            .execute(identifyParams)
            .addCallback(lang.hitch(this, function (response) {
              // response is an array of identify result objects
              // Let's return an array of features.
              if (response.length > 0) {
                map.infoWindow.show(event.mapPoint);
                return arrayUtils.map(response, function (result) {
                  var feature = result.feature;
                  var layerName = result.layerName;

                  feature.attributes.layerName = layerName;

                  if (layerName === 'Hydrometric Service - Rivers') {
                    feature.setInfoTemplate(templateRivers);
                  } else if (layerName === 'HydrometricService - Storage') {
                    feature.setInfoTemplate(templateStorages);
                  } else if (layerName === 'Declared Catchment (WNSW)') {
                    feature.setInfoTemplate(templateCatchment);
                  }
                  return feature;
                });
              }
            }));
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.hide();
        }
      });
  </script>
</head>

<body>
  <div id="map"></div>
</body>

</html>

BenScott1 · ‎09-16-2015

Thanks Robert!