topic Re: Hide values in infoWindow in ArcGIS JavaScript Maps SDK Questions

Hide values in infoWindow

Chang-HengYang — Sat, 11 Dec 2021 08:56:04 GMT

Hi all,

I have the same problem as the post (Hide values in infoWindow / Popup if value = null). I have my popup working fine for my features. When you click, it queries the featurelayer and gets the 7 attributes "name", "lat", "Map_id", "long", "Topo_URL", "Web_URL", "mrc". Not every feature has a value for "Topo_URL" and " Web_URL" and I want to "hide" it in the infowindow if it's null. I tried to modify the script I mentioned (the post). However, it failed to work. Please let me know if you all have any suggestion.

Thanks,
Hank

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>QueryTask with geometry, results as an InfoWindow onClick</title>
     <link rel="stylesheet"  href="http://granite.nmt.edu/~hyang/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.6/js/dojo/dojox/layout/resources/ExpandoPane.css">
 
  <script>var dojoConfig = { parseOnLoad:true };</script>
 
   <script src="http://js.arcgis.com/3.6/"></script>
 
 
    <script type="text/javascript" language="Javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.query");
   dojo.require("esri.dijit.Popup");
       var map;

      function init() {
         var popup = new esri.dijit.Popup(null, dojo.create("div"));
         map = new esri.Map("map", {
          basemap: "oceans",
          center: [-106.9048, 34.0665],
    infoWindow: popup,
          zoom: 7
    });

    
        dojo.connect(map, "onLoad", initFunctionality);

        //create and add new layer
       //var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer");
        //map.addLayer(layer);
      }

      function initFunctionality(map) {
        //build query task
        function executeQueryTask(evt) {
         query.geometry = evt.mapPolygon;   
   queryTask.execute(query, showResults);
      }
  
  function showResults(featureSet) {
     
     map.graphics.clear();

     
     dojo.forEach(featureSet.features, dojo.hitch (this, function(f) {
      
       var graphic = f;
       //var infoTemplate = new esri.InfoTemplate();
       graphic.setSymbol(symbol);
      var content = "";
      if(dojo.trim(f.attributes["Topo_URL"])!=null&&dojo.trim(f.attributes["Web_URL"])!=null){
         content+="<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>"
                       + "<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>";
      }
      if(dojo.trim(f.attributes["Topo_URL"])== null&&dojo.trim(f.attributes["Web_URL"])!=null){
         content+="<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>";
      }
      if(dojo.trim(f.attributes["Topo_URL"])!=null&&dojo.trim(f.attributes["Web_URL"])== null){
         content+="<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>";
      }
      infoTemplate = new esri.InfoTemplate("<b>ID: </b>${Map_id}<br/>"
                             + "<b>Name: </b>${name}<br/>"
                             + "<b>Coordinates: </b>(${lat}, ${long})<br/>"
                             + "<b>mrc: </b>: ${mrc}<br/>"
        + "<b>Product: </b> ${name} 7.5' topo map <br/>",content);
      
       //Set the infoTemplate.
       graphic.setInfoTemplate(infoTemplate);

       //Add graphic to the map graphics layer.
       map.graphics.add(graphic);
     }));
      
      
      }
             
                dojo.connect(map, "onClick", executeQueryTask);
         
     //build query task
        var queryTask = new esri.tasks.QueryTask("http://129.138.12.83:6080/arcgis/rest/services/index_24k_web_w_urls/MapServer/0");
        //build query filter
   dojo.connect(queryTask, "onComplete", showResults);
      var query = new esri.tasks.Query();
         query.returnGeometry = true;
      query.outFields = ["name", "lat", "Map_id", "long", "Topo_URL", "Web_URL", "mrc"];
      
   var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,255,0.35]), 1),new dojo.Color([109,146,155,0.35]));
          
        
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    Single click a county in New Mexico to get more information.
    <div id="map" style="width:1200px; height:800px; border:1px solid #000;"></div>
  </body>
</html>

Re: Hide values in infoWindow

BetsySchenck-Gardner — Wed, 18 Sep 2013 16:29:40 GMT

My thought is you aren't coming back with a null value for those two attributes. What if instead you looked at the length of the text string coming back ... assuming the URL is a text string. If it's 0, there is no value and you can go from there.

Re: Hide values in infoWindow

Chang-HengYang — Sat, 11 Dec 2021 08:56:07 GMT

Hi Betsy,

Thank you for the information. It still failed to work after I have the "length" following the (dojo.trim(f.attributes["Topo_URL"]). Please let me know if you all have any suggestion. I also attached a picture to show these two fields values.

Thanks,
Hank

The part code listed below

dojo.forEach(featureSet.features, dojo.hitch (this, function(f) {
      
       var graphic = f;
       //var infoTemplate = new esri.InfoTemplate();
       graphic.setSymbol(symbol);
      var content = "";
      if(dojo.trim(f.attributes["Topo_URL"]).length > 4&&dojo.trim(f.attributes["Web_URL"]).length > 4){
         content+="<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>"
                       + "<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>";
      }
      if(dojo.trim(f.attributes["Topo_URL"]).length <= 4 && dojo.trim(f.attributes["Web_URL"]).length > 4){
         content+="<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>";
      }
      if(dojo.trim(f.attributes["Topo_URL"]).length >4&&dojo.trim(f.attributes["Web_URL"]).length <= 4){
         content+="<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>";
      }
      infoTemplate = new esri.InfoTemplate("<b>ID: </b>${Map_id}<br/>"
                             + "<b>Name: </b>${name}<br/>"
                             + "<b>Coordinates: </b>(${lat}, ${long})<br/>"
                             + "<b>mrc: </b>: ${mrc}<br/>"
        + "<b>Product: </b> ${name} 7.5' topo map <br/>",content);

Re: Hide values in infoWindow

YungKaiChin — Wed, 18 Sep 2013 19:22:22 GMT

Try to use both null and "undefined" and see if that works.

Re: Hide values in infoWindow

Chang-HengYang — Wed, 18 Sep 2013 20:02:49 GMT

Hi YungKai,

Thank you for the information. Unfortunately, it still failed to work.

Thanks,
Hank

Re: Hide values in infoWindow

YungKaiChin — Wed, 18 Sep 2013 21:28:30 GMT

What did you see in the infoWindow if a field was null?

Re: Hide values in infoWindow

VinayBansal — Sat, 11 Dec 2021 08:56:10 GMT

Try with these checks. And if still not work then tell us what you are actually getting in the output

      if((f.attributes["Topo_URL"] !=null && f.attributes["Topo_URL"] !=undefined &&  f.attributes["Topo_URL"]  !="") && (f.attributes["Web_URL"] !=null && f.attributes["Web_URL"] !=undefined && f.attributes["Web_URL"]  !="")){
         content+="<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>"
                       + "<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>";
      }

Re: Hide values in infoWindow

JasonZou — Sat, 11 Dec 2021 08:56:13 GMT

Try to change:

var content = "";
if (dojo.trim(f.attributes["Topo_URL"]) != null && dojo.trim(f.attributes["Web_URL"]) != null) {
    content += "<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>" + "<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>";
}
if (dojo.trim(f.attributes["Topo_URL"]) == null && dojo.trim(f.attributes["Web_URL"]) != null) {
    content += "<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>";
}
if (dojo.trim(f.attributes["Topo_URL"]) != null && dojo.trim(f.attributes["Web_URL"]) == null) {
    content += "<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>";
}

To:

var content = "";
var hasTopoUrl = f.attributes["Topo_URL"] && dojo.trim(f.attributes["Topo_URL"]);
var hasWebUrl = f.attributes["Web_URL"] && dojo.trim(f.attributes["Web_URL"]);
content += hasTopoUrl ? "<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>" : "";
content += hasWebUrl ? "<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>" : "";

Re: Hide values in infoWindow

KenBurcham — Sat, 11 Dec 2021 08:56:15 GMT

Hi guys,

What I do is define a function "is_empty" that helps in these situations:

function is_empty(obj) {

    // null and undefined are empty
    if (obj == null) return true;
    // Assume if it has a length property with a non-zero value
    // that that property is correct.
    if (obj.length && obj.length > 0) return false;
    if (obj.length === 0) return true;

    //if an object, does it have any values in any of its properties?
    for (var key in obj) {
        if (hasOwnProperty.call(obj, key)) return false;
    }

    // Doesn't handle toString and toValue enumeration bugs in IE < 9

    return true;
}

Then you can:

if(!is_empty(f.attributes["Topo_URL"]) && !is_empty(f.attributes["Web_URL"]))

It doesn't add in dojo.trim, but that's easy enough to add if you want.

Re: Hide values in infoWindow

JasonZou — Thu, 19 Sep 2013 14:21:19 GMT

Actually, all these values are considered falsy in javascript: null, undefined, false, "", 0. So instead of using if statement to evaluate for each case, just use the value itself should suffice to evaluate it's true value or falsy value. We do need to consider the case where " " is true, but "" is falsy. So using dojo.trim would be needed in some cases.

Here is a blog to explain that.

Re: Hide values in infoWindow

Chang-HengYang — Thu, 19 Sep 2013 14:51:20 GMT

Hi guys,

I appreciate your valuable information. I have tried everyone's code; however, it still failed to work. I mean I only can see the basemap without the feature layer I want. In these two fields, either "Null" or a link (like "http://geoinfo.nmt.edu/publications/openfile/details.cfml?Volume=53") appear in these two fields. Again, I appreciate your information. Please let me know if you have any idea.

Thanks,
Hank

Re: Hide values in infoWindow

JasonZou — Thu, 19 Sep 2013 15:11:31 GMT

Hi Hank,

Can you get the results back from the query? The reason why I am asking is that you set

query.geometry = evt.mapPolygon;

which I believe should be

query.geometry = evt.mapPoint;

In addition, I don't know why you construct the infoTemplate that way. The first parameter to new InfoTemplate should be for the title, like new InfoTemplate(title,content). The first parameter set in your code seems to be the content you like to display in the popup. Am I right?

Re: Hide values in infoWindow

Chang-HengYang — Sat, 11 Dec 2021 08:56:18 GMT

Hi Zou,

Thank you for the updating. My feature is the polygon not a point. I feel the code "query.geometry = evt.mapPolygon" should be on the right track. In addition, I agree with you the point "InfoTemplate(title,content)". I did assign variable "title" equal to the code listed below. However, it still failed to work. Please let me know if you all have any suggestion.

Thanks,
Hank

var title = "<b>ID: </b>${Map_id}<br/>"
                             + "<b>Name: </b>${name}<br/>"
                             + "<b>Coordinates: </b>(${lat}, ${long})<br/>"
                             + "<b>mrc: </b>: ${mrc}<br/>"
        + "<b>Product: </b> ${name} 7.5' topo map <br/>"

Re: Hide values in infoWindow

RyanClark — Sat, 11 Dec 2021 08:56:21 GMT

Its difficult to debug without access to the service that you're working with. Is it possible to access this service from outside your office?

http://129.138.12.83:6080/arcgis/rest/services/index_24k_web_w_urls/MapServer/0

Generally, it is a very good idea to keep your conditionals simple. Right now you have some complex concatenation of "is it null?" checks, which can often be confusing. It looks to me like you simply want to check:

if (f.attributes.Topo_URL !== "") {
  content += "<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>";    
}
            
if (f.attributes.Web_URL !== "") {
  content += "<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>";
}

Reading further through the post, it appears that perhaps you are not getting any query results. That is what you need to verify first. Can you access the URL that I pasted above in your web browser? If so, you need to look at your web browser's developer tools and inspect the HTTP requests that are being sent on the "Net" or "Network" tabs. When you click a point, there should be a request sent to that URL. You need to see if that request returns anything, or if there are any other errors that appear in the console.

If you cannot access the data, it is likely that you're encountering a cross-domain access restriction. If you can confirm that you are not receiving any results, then you'll need to look into solving those issues. Read this post to get started: http://blogs.esri.com/esri/arcgis/2011/09/29/cross-origin-resource-sharing-cors-with-the-arcgis-api-for-javascript/.