Hide values in infoWindow

Chang-HengYang · ‎09-18-2013

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>

Chang-HengYang · ‎09-19-2013

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

JasonZou · ‎09-19-2013

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?

Chang-HengYang · ‎09-19-2013

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/>"

RyanClark · ‎09-24-2013

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