chyang0107

Hide values in infoWindow

Discussion created by chyang0107 on Sep 18, 2013
Latest reply on Sep 24, 2013 by ryan.clark
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>

Outcomes