Limiting a popup to only launch when there is a result

3606
5
Jump to solution
09-16-2015 06:02 AM
Occasional Contributor

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>

Reply
0 Kudos
1 Solution

Accepted Solutions
MVP Esteemed Contributor

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

5 Replies
Occasional Contributor

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

Occasional Contributor

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).

Reply
0 Kudos
MVP Esteemed Contributor

Ben,

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

Reply
0 Kudos
MVP Esteemed Contributor

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

Occasional Contributor

Thanks Robert!

Reply
0 Kudos