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>
Solved! Go to Solution.
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>
It will work if you change change evt to event in line 120.
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).
Ben,
Besides that your requires needed work. "dojo/domReady!" always needs to the last one and you did not have "dojo/Deferred"
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>
Thanks Robert!