With value Departments not null B_Name = "Ellison" B_Number = "563" Departments = "Geography" Infowindow should show (result): Building Name: Ellison Building #: 563 Department: Geography With NO VALUE SET in "Department" attribute B_Name = "Phelps" B_Number = "492" Departments = "" Infowindow should show (result): Building Name: Ellison Building #: 563
Solved! Go to Solution.
It's my understanding that ${B_Number} is not a recognized variable... how do I grab ${B_Name} and set it to a javascript variable after the query?
<!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" /> <!--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>UCSB Interactive Campus Map</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" type='text/css' href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/esri/dijit/css/Popup.css'/> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script type="text/javascript"> var djConfig = { parseOnLoad: true }; </script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script> <script type="text/javascript"> dojo.require("dijit.dijit"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("esri.dijit.Popup"); var map; function init() { initExtent = new esri.geometry.Extent({ "xmin":-119.86100, "ymin":34.40856, "xmax":-119.83553, "ymax":34.41913, "spatialReference":{"wkid":4326} }); var popup = new esri.dijit.Popup(null, dojo.create("div")); map = new esri.Map("map", { infoWindow: popup }); //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://ags2.geog.ucsb.edu/ArcGIS/rest/services/icmBaseMap20120411/MapServer"); map.addLayer(basemap); //Add Building Layer var layerCampusBuildings = new esri.layers.ArcGISDynamicMapServiceLayer("http://ags2.geog.ucsb.edu/ArcGIS/rest/services/Buildings_120404/MapServer"); map.addLayer(layerCampusBuildings); //*********************************** //START Buildings Popup/Highlight Code function executeQueryTask(evt) { //onClick event returns the evt point where the user clicked on the map. //This is contains the mapPoint (esri.geometry.point) and the screenPoint (pixel xy where the user clicked). //set query geometry = to evt.mapPoint Geometry query.geometry = evt.mapPoint; //Execute task and call showResults on completion queryTask.execute(query, showResults); } function showResults(featureSet) { //remove all graphics on the maps graphics layer map.graphics.clear(); //QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map. dojo.forEach(featureSet.features, dojo.hitch (this, function(f) { //Get the current feature from the featureSet. //Feature is a graphic var graphic = f; graphic.setSymbol(symbol); var content = ""; if(dojo.trim(f.attributes["B_Number"])!=""&&dojo.trim(f.attributes["B_Number"])!=null){ content+="<b>Bldg:</b>"+ f.attributes["B_Number"]+"<br />"; } if(dojo.trim(f.attributes["Department"])!=""&&dojo.trim(f.attributes["Department"])!=null){ content+="<b>Department:</b>"+ f.attributes["Department"]; } infoTemplate = new esri.InfoTemplate(f.attributes["B_Name"]+"<br />",content); //Set the infoTemplate. graphic.setInfoTemplate(infoTemplate); //Add graphic to the map graphics layer. map.graphics.add(graphic); })); } //Listen for click event on the map, when the user clicks on the map call executeQueryTask function. dojo.connect(map, "onMouseMove", executeQueryTask); dojo.connect(map, "onClick", executeQueryTask); //build query task queryTask = new esri.tasks.QueryTask("http://earth.geog.ucsb.edu/ArcGIS/rest/services/icmBasemap10/MapServer/16"); //Can listen for onComplete event to process results or can use the callback option in the queryTask.execute method. //dojo.connect(queryTask, "onComplete", showResults); //build query filter query = new esri.tasks.Query(); query.returnGeometry = true; query.outFields = ["B_Name", "B_Number", "Department"]; symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([25,25,112]), 3), new dojo.Color([0,0,128,1])); //END BUILDINGS POPUP/HIGHLIGHT CODE //*********************************** dojo.connect(map, "onLoad", function(map) { //resize the map when the browser resizes dojo.connect(dijit.byId('map'), 'resize', map,map.resize); }); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;"> <div id="header" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="top"> <span> This is the header section </span> </div> <div id="leftPane" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="left" style="width:275px;"> This is the left section </div> <div id="centerPane" dojotype="dijit.layout.BorderContainer" class="roundedCorners" region="center" gutters="false"> <div id="map" dojotype="dijit.layout.ContentPane" class="shadow" region="center" style="position:relative; overflow:hidden;"> <div id="ovWin" class="shadow" style="position:absolute; right:35px; top:5px; z-Index:998; width:100px;height:100px; "> <div id="overviewDiv" style="width:100%;height:100%;"> </div> </div> </div> <div id="footer" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom"> This is the footer section </div> </div> </div> </body> </html>
var content = getContent(); //get json content from whereever you are getting it //loop through json for (var key in p) { //remove nulls if (p[key]==null){ delete p.key; } } //set content infoWindow.setContent(content);
//create the infoTemplate to be used in the infoWindow. //All ${attributeName} will be substituted with the attribute value for current feature. infoTemplate = new esri.InfoTemplate("${B_Name}<br />", "<b>Bldg:</b> ${B_Number}<br /><b>Department:</b> ${Department}");
var content = ""; if(${B_Number}){ content+="<b>Bldg:</b>"+ ${B_Number}+"<br />"; } if(${Department}){ content+="<b>Department:</b>"+ ${Department}; } infoTemplate = new esri.InfoTemplate("${B_Name}<br />",content); }
Nice map
in your code//create the infoTemplate to be used in the infoWindow. //All ${attributeName} will be substituted with the attribute value for current feature. infoTemplate = new esri.InfoTemplate("${B_Name}<br />", "<b>Bldg:</b> ${B_Number}<br /><b>Department:</b> ${Department}");
i would change it tovar content = ""; if(${B_Number}){ content+="<b>Bldg:</b>"+ ${B_Number}+"<br />"; } if(${Department}){ content+="<b>Department:</b>"+ ${Department}; } infoTemplate = new esri.InfoTemplate("${B_Name}<br />",content); }
It's my understanding that ${B_Number} is not a recognized variable... how do I grab ${B_Name} and set it to a javascript variable after the query?
<!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" /> <!--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>UCSB Interactive Campus Map</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" type='text/css' href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/esri/dijit/css/Popup.css'/> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script type="text/javascript"> var djConfig = { parseOnLoad: true }; </script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script> <script type="text/javascript"> dojo.require("dijit.dijit"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("esri.dijit.Popup"); var map; function init() { initExtent = new esri.geometry.Extent({ "xmin":-119.86100, "ymin":34.40856, "xmax":-119.83553, "ymax":34.41913, "spatialReference":{"wkid":4326} }); var popup = new esri.dijit.Popup(null, dojo.create("div")); map = new esri.Map("map", { infoWindow: popup }); //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://ags2.geog.ucsb.edu/ArcGIS/rest/services/icmBaseMap20120411/MapServer"); map.addLayer(basemap); //Add Building Layer var layerCampusBuildings = new esri.layers.ArcGISDynamicMapServiceLayer("http://ags2.geog.ucsb.edu/ArcGIS/rest/services/Buildings_120404/MapServer"); map.addLayer(layerCampusBuildings); //*********************************** //START Buildings Popup/Highlight Code function executeQueryTask(evt) { //onClick event returns the evt point where the user clicked on the map. //This is contains the mapPoint (esri.geometry.point) and the screenPoint (pixel xy where the user clicked). //set query geometry = to evt.mapPoint Geometry query.geometry = evt.mapPoint; //Execute task and call showResults on completion queryTask.execute(query, showResults); } function showResults(featureSet) { //remove all graphics on the maps graphics layer map.graphics.clear(); //QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map. dojo.forEach(featureSet.features, dojo.hitch (this, function(f) { //Get the current feature from the featureSet. //Feature is a graphic var graphic = f; graphic.setSymbol(symbol); var content = ""; if(dojo.trim(f.attributes["B_Number"])!=""&&dojo.trim(f.attributes["B_Number"])!=null){ content+="<b>Bldg:</b>"+ f.attributes["B_Number"]+"<br />"; } if(dojo.trim(f.attributes["Department"])!=""&&dojo.trim(f.attributes["Department"])!=null){ content+="<b>Department:</b>"+ f.attributes["Department"]; } infoTemplate = new esri.InfoTemplate(f.attributes["B_Name"]+"<br />",content); //Set the infoTemplate. graphic.setInfoTemplate(infoTemplate); //Add graphic to the map graphics layer. map.graphics.add(graphic); })); } //Listen for click event on the map, when the user clicks on the map call executeQueryTask function. dojo.connect(map, "onMouseMove", executeQueryTask); dojo.connect(map, "onClick", executeQueryTask); //build query task queryTask = new esri.tasks.QueryTask("http://earth.geog.ucsb.edu/ArcGIS/rest/services/icmBasemap10/MapServer/16"); //Can listen for onComplete event to process results or can use the callback option in the queryTask.execute method. //dojo.connect(queryTask, "onComplete", showResults); //build query filter query = new esri.tasks.Query(); query.returnGeometry = true; query.outFields = ["B_Name", "B_Number", "Department"]; symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([25,25,112]), 3), new dojo.Color([0,0,128,1])); //END BUILDINGS POPUP/HIGHLIGHT CODE //*********************************** dojo.connect(map, "onLoad", function(map) { //resize the map when the browser resizes dojo.connect(dijit.byId('map'), 'resize', map,map.resize); }); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;"> <div id="header" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="top"> <span> This is the header section </span> </div> <div id="leftPane" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="left" style="width:275px;"> This is the left section </div> <div id="centerPane" dojotype="dijit.layout.BorderContainer" class="roundedCorners" region="center" gutters="false"> <div id="map" dojotype="dijit.layout.ContentPane" class="shadow" region="center" style="position:relative; overflow:hidden;"> <div id="ovWin" class="shadow" style="position:absolute; right:35px; top:5px; z-Index:998; width:100px;height:100px; "> <div id="overviewDiv" style="width:100%;height:100%;"> </div> </div> </div> <div id="footer" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom"> This is the footer section </div> </div> </div> </body> </html>
function layerTabContent(layerResults, layerName) { var content = ""; switch (layerName) { case "ownerLayerResults": for (var i=0, il=layerResults.features.length; i<il; i++) { content += "<b>Grantee Deed: </b><a target='_blank' href=" +layerResults.features.attributes['GRANTEE_DEED_1']+">Click here</a><br/>" content += if( +layerResults.features.attributes['GRANTEE_DEED_2']+ == null ) {return "";} else {return "<b>Additional Grantee Deed: </b><a target='_blank' href=" +layerResults.features.attributes['GRANTEE_DEED_2']+">Click here</a><br/>"} } break; case "censusLayerResults": //and so on and so forth....