I have a dialog popup with a hyperlink. I want the popup to close when the link is clicked. I've tried "nboLink.on("click", closeDialog);" but the console says that this is not a function. Here is my code: Layer . on ( "click" , function ( evt ) { var name = evt . graphic . attributes . NAME ; var nameNoDot = name . replace ( /\./g , "" ) ; var nameDash = nameNoDot . replace ( /_/g , "-" ) ; var nameLower = nameDash . toLowerCase ( ) ; var nboLink = " ${NAME} http://website/profiles/ " + nameLower + "'> Profile " ; var popupContent = esriLang . substitute ( evt . graphic . attributes , nboLink ) ; dialog . setContent ( popupContent ) ; domStyle . set ( dialog . domNode , "opacity" , 0.70 ) ; dijitPopup . open ( { popup : dialog , x : evt . pageX , y : evt . pageY , } ) ; function closeDialog ( ) { map . graphics . clear ( ) ; dijitPopup . close ( dialog ) ; } ; } ) ;

Levi, Here is your code working. Your issue was you were recreating the TooltipDialog digit multiple time based on its placement in your code and the on function had to be after the TooltipDialog was opened so that the dom.byId could find the anchor tag: dialog ! DOCTYPE html > html > head > meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" > meta name = "viewport" content = "initial-scale=1, maximum-scale=1,user-scalable=no" > title > Neighborhood Pulse / title > link rel = "stylesheet" href = " https://js.arcgis.com/3.21/dijit/themes/claro/claro.css " / > link rel = "stylesheet" href = " https://js.arcgis.com/3.21/esri/css/esri.css " / > link rel = "stylesheet" href = " https://fonts.googleapis.com/css?family=Open Sans" > style > html , body { height : 100 % ; width : 100 % ; margin : 0 ; padding : 0 ; margin : 0 ; font - family : "Open Sans" ; } #leftPane { background - color : whitesmoke ; width : 20 % ; border : solid 1px # 000 ; } #photoPane { background - color : whitesmoke ; width : 20 % ; border : solid 1px # 000 ; //bottom: 700px; height : 65 % ; } #map { padding : 0 ; border : solid 1px # 000 ; } . nav { padding : 5px 10px ; background : #4479BA ; color : #FFF ; border - radius : 5px ; border : solid 1px #20538D ; text - shadow : 0 - 1px 0 rgba ( 0 , 0 , 0 , 0.4 ) ; - webkit - box - shadow : inset 0 1px 0 rgba ( 255 , 255 , 255 , 0.4 ) , 0 1px 1px rgba ( 0 , 0 , 0 , 0.2 ) ; - moz - box - shadow : inset 0 1px 0 rgba ( 255 , 255 , 255 , 0.4 ) , 0 1px 1px rgba ( 0 , 0 , 0 , 0.2 ) ; box - shadow : inset 0 1px 0 rgba ( 255 , 255 , 255 , 0.4 ) , 0 1px 1px rgba ( 0 , 0 , 0 , 0.2 ) ; } #header { text - align : center ; height : 8 % ; border : solid 1px # 000 ; background - color : whitesmoke ; font - size : 19 ; } #HomeButton { position : absolute ; top : 95px ; left : 245px ; z - index : 50 ; } #search { display : block ; position : absolute ; z - index : 2 ; top : 20px ; left : 290px ; } . dijitDialogPaneContent { width : 200px ! important ; height : 100px ! important ; } / style > script src = " https://js.arcgis.com/3.21/ " > / script > script > var map , timer ; require ( [ "esri/lang" , "dojo/on" , "dojo/dom" , "dijit/registry" , "dojo/dom-construct" , "dojo/dom-style" , "dojo/parser" , "dijit/layout/BorderContainer" , "esri/layers/FeatureLayer" , "esri/dijit/PopupTemplate" , "esri/dijit/HomeButton" , "esri/dijit/Search" , "esri/dijit/BasemapGallery" , "esri/graphic" , "dijit/layout/ContentPane" , "esri/map" , "esri/arcgis/utils" , "esri/domUtils" , "dijit/TooltipDialog" , "esri/dijit/Popup" , "dijit/popup" , "dijit/Dialog" , "dojo/domReady!" ] , function ( esriLang , on , dom , registry , domConstruct , domStyle , parser , BorderContainer , FeatureLayer , PopupTemplate , HomeButton , Search , BasemapGallery , Graphic , ContentPane , Map , arcgisUtils , domUtils , TooltipDialog , Popup , dijitPopup , Dialog ) { parser . parse ( ) ; map = new Map ( "map" , { showLabels : false , basemap : "gray" , center : [ - 122.650 , 45.52 ] , zoom : 11 } ) ; var home = new HomeButton ( { map : map } , "HomeButton" ) ; home . startup ( ) ; var search = new Search ( { map : map , showInfoWindowOnSelect : false , enableLabel : false , enableHighlight : false } , "search" ) ; search . startup ( ) ; var template = new PopupTemplate ( { title : "{NAME}" , description : " White Population : {WhiteAlone_not_Hisp}" + " Total Population 2010 : {TotPOP_2010}" + " Neighborhood Coalition : {LABEL_NAME_COALITION}" } ) ; var neighborhoodsLayer = new FeatureLayer ( " http://arcgis.research.pdx.edu/arcgis/rest/services/IMS_Services/Neighborhoods_Complete_nolabels/MapServer/29 " , { infoTemplate : template , outFields : [ "*" ] , maxScale : 0 , minScale : 0 , opacity : . 60 } ) ; map . addLayer ( neighborhoodsLayer ) ; on ( neighborhoodsLayer , "mouse-over" , function ( evt ) { clearTimeout ( timer ) ; displayPopupContent ( evt . graphic ) ; } ) ; on ( neighborhoodsLayer , "mouse-out" , function ( evt ) { timer = setTimeout ( function ( ) { map . infoWindow . clearFeatures ( ) ; } , 100 ) } ) ; map . infoWindow . set ( "popupWindow" , false ) ; initializeSidebar ( map ) ; dialog = new TooltipDialog ( { style : "position: absolute; width: 200px; font: normal normal normal 10pt Arial;z-index:100" } ) ; function initializeSidebar ( map ) { var popup = map . infoWindow ; //when the selection changes update the side panel to display the popup info for the //currently selected feature. on ( popup , "selection-change" , function ( ) { displayPopupContent ( popup . getSelectedFeature ( ) ) ; } ) ; //When features are associated with the map's info window update the sidebar with the new content. on ( popup , "set-features" , function ( ) { displayPopupContent ( popup . getSelectedFeature ( ) ) ; } ) ; } function displayPopupContent ( feature ) { if ( feature ) { var photoSRC = " https://images.trvl-media.com/media/content/shared/images/travelguides/destination/178299/Portland-20917.jpg " ; var photo = ' + photoSRC + '"width=200 height=125/> ' ; var content = feature . getContent ( ) ; registry . byId ( "leftPane" ) . set ( "content" , content , photo ) ; registry . byId ( "photoPane" ) . set ( "content" , photo ) ; } neighborhoodsLayer . on ( "click" , function ( evt ) { var name = evt . graphic . attributes . NAME ; var nameNoDot = name . replace ( /\./g , "" ) ; var nameDash = nameNoDot . replace ( /_/g , "-" ) ; var nameLower = nameDash . toLowerCase ( ) ; var nboLink = " ${NAME} http://neighborhoodpulsepdx.org/profiles/ " + nameLower + "'> Profile " ; var popupContent = esriLang . substitute ( evt . graphic . attributes , nboLink ) ; dialog . setContent ( popupContent ) ; domStyle . set ( dialog . domNode , "opacity" , 0.70 ) ; dijitPopup . open ( { popup : dialog , x : evt . pageX , y : evt . pageY } ) ; on ( dom . byId ( "myLink" ) , "click" , closeDialog ) ; function closeDialog ( ) { map . graphics . clear ( ) ; dijitPopup . close ( dialog ) ; } ; } ) ; } } ) ; / script > / head > body class = "claro" > div id = "mainWindow" data - dojo - type = "dijit/layout/BorderContainer" data - dojo - props = "design:'headline',gutters:false" style = "width:100%; height:100%;" > div data - dojo - type = "dijit/layout/BorderContainer" data - dojo - props = "gutters:false" region = "left" style = "width:225px;height:100%;font-size:13;" > div id = "leftPane" data - dojo - type = "dijit/layout/ContentPane" data - dojo - props = "region:'center'" > / div > div id = "photoPane" data - dojo - type = "dijit/layout/ContentPane" data - dojo - props = "region:'bottom'" > / div > div id = "header" data - dojo - type = "dijit/layout/ContentPane" data - dojo - props = "region:'top'" style = "width:200px;height:10%;" > div id = "featureCount" style = "margin-bottom:10px;" > b > Portland br > Neighborhoods / b > / div > / div > / div > div id = "map" data - dojo - type = "dijit/layout/ContentPane" data - dojo - props = "region:'center'" > / div > div id = "search" > / div > span id = "info" style = "font-family:arial;position:absolute;left:250px; bottom:5px; background-color:lightgray; opacity: 0.70; z-index:50;" > / span > div id = "HomeButton" > / div > div style = "position:absolute; left:250px; bottom:40px; z-Index:999;" > / div > / body > / html >

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Close Dialog Popup on Hyperlink Click

deleted-user-1_r2dgYuILKY

I have a dialog popup with a hyperlink. I want the popup to close when the link is clicked. I've tried "nboLink.on("click", closeDialog);" but the console says that this is not a function. Here is my code:

Layer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> name <SPAN class="operator token">=</SPAN> evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>NAME<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> nameNoDot <SPAN class="operator token">=</SPAN> name<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="regex token">/\./g</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> nameDash <SPAN class="operator token">=</SPAN> nameNoDot<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="regex token">/_/g</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"-"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> nameLower <SPAN class="operator token">=</SPAN> nameDash<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toLowerCase</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> nboLink <SPAN class="operator token">=</SPAN> <SPAN class="string token"><SPAN>"<b>${NAME}</b><hr><a target='_blank' href='</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwebsite%2Fprofiles%2F" target="_blank">http://website/profiles/</A><SPAN>"</SPAN></SPAN> <SPAN class="operator token">+</SPAN> nameLower <SPAN class="operator token">+</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"'><b>Profile</b></a>"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> popupContent <SPAN class="operator token">=</SPAN> esriLang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">substitute</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">,</SPAN>nboLink<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dialog<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setContent</SPAN><SPAN class="punctuation token">(</SPAN>popupContent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domStyle<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN>dialog<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"opacity"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.70</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dijitPopup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">open</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; popup<SPAN class="punctuation token">:</SPAN> dialog<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; x<SPAN class="punctuation token">:</SPAN> evt<SPAN class="punctuation token">.</SPAN>pageX<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; y<SPAN class="punctuation token">:</SPAN> evt<SPAN class="punctuation token">.</SPAN>pageY<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">function</SPAN> <SPAN class="token function">closeDialog</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clear</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dijitPopup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">close</SPAN><SPAN class="punctuation token">(</SPAN>dialog<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Find more posts tagged with

Accepted answers

rscheitlin

Levi,

Here is your code working. Your issue was you were recreating the TooltipDialog digit multiple time based on its placement in your code and the on function had to be after the TooltipDialog was opened so that the dom.byId could find the anchor tag:

dialog<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>meta http<SPAN class="operator token">-</SPAN>equiv<SPAN class="operator token">=</SPAN><SPAN class="string token">"Content-Type"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/html; charset=utf-8"</SPAN><SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1, maximum-scale=1,user-scalable=no"</SPAN><SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Neighborhood Pulse<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F3.21%2Fdijit%2Fthemes%2Fclaro%2Fclaro.css" target="_blank">https://js.arcgis.com/3.21/dijit/themes/claro/claro.css</A><SPAN>"</SPAN></SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F3.21%2Fesri%2Fcss%2Fesri.css" target="_blank">https://js.arcgis.com/3.21/esri/css/esri.css</A><SPAN>"</SPAN></SPAN> <SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DOpen" target="_blank">https://fonts.googleapis.com/css?family=Open</A><SPAN> Sans"</SPAN></SPAN><SPAN class="operator token">></SPAN>

&nbsp; <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; html<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp; body <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font<SPAN class="operator token">-</SPAN>family<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Open Sans"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp; #leftPane <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> whitesmoke<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">20</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border<SPAN class="punctuation token">:</SPAN> solid 1px #<SPAN class="number token">000</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp; #photoPane <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> whitesmoke<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">20</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border<SPAN class="punctuation token">:</SPAN> solid 1px #<SPAN class="number token">000</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//bottom: 700px;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">65</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>


&nbsp;&nbsp;&nbsp; #map <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border<SPAN class="punctuation token">:</SPAN> solid 1px #<SPAN class="number token">000</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">.</SPAN>nav <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding<SPAN class="punctuation token">:</SPAN> 5px 10px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background<SPAN class="punctuation token">:</SPAN> #4479BA<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color<SPAN class="punctuation token">:</SPAN> #FFF<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border<SPAN class="operator token">-</SPAN>radius<SPAN class="punctuation token">:</SPAN> 5px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border<SPAN class="punctuation token">:</SPAN> solid 1px #20538D<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text<SPAN class="operator token">-</SPAN>shadow<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="operator token">-</SPAN>1px <SPAN class="number token">0</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token">-</SPAN>webkit<SPAN class="operator token">-</SPAN>box<SPAN class="operator token">-</SPAN>shadow<SPAN class="punctuation token">:</SPAN> inset <SPAN class="number token">0</SPAN> 1px <SPAN class="number token">0</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN> 1px 1px <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token">-</SPAN>moz<SPAN class="operator token">-</SPAN>box<SPAN class="operator token">-</SPAN>shadow<SPAN class="punctuation token">:</SPAN> inset <SPAN class="number token">0</SPAN> 1px <SPAN class="number token">0</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN> 1px 1px <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; box<SPAN class="operator token">-</SPAN>shadow<SPAN class="punctuation token">:</SPAN> inset <SPAN class="number token">0</SPAN> 1px <SPAN class="number token">0</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.4</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN> 1px 1px <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp; #header <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text<SPAN class="operator token">-</SPAN>align<SPAN class="punctuation token">:</SPAN> center<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">8</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border<SPAN class="punctuation token">:</SPAN> solid 1px #<SPAN class="number token">000</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> whitesmoke<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font<SPAN class="operator token">-</SPAN>size<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">19</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp; #HomeButton <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position<SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top<SPAN class="punctuation token">:</SPAN> 95px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left<SPAN class="punctuation token">:</SPAN> 245px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; z<SPAN class="operator token">-</SPAN>index<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">50</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp; #search <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display<SPAN class="punctuation token">:</SPAN> block<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position<SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; z<SPAN class="operator token">-</SPAN>index<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; top<SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left<SPAN class="punctuation token">:</SPAN> 290px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">.</SPAN>dijitDialogPaneContent <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width<SPAN class="punctuation token">:</SPAN> 200px <SPAN class="operator token">!</SPAN>important<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height<SPAN class="punctuation token">:</SPAN> 100px <SPAN class="operator token">!</SPAN>important<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>

&nbsp; <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F3.21%2F" target="_blank">https://js.arcgis.com/3.21/</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> map<SPAN class="punctuation token">,</SPAN> timer<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/lang"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/on"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/dom"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dijit/registry"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/dom-construct"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/dom-style"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/parser"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dijit/layout/BorderContainer"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/dijit/PopupTemplate"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/dijit/HomeButton"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/dijit/Search"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/dijit/BasemapGallery"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/graphic"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dijit/layout/ContentPane"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/arcgis/utils"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/domUtils"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dijit/TooltipDialog"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"esri/dijit/Popup"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dijit/popup"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dijit/Dialog"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"dojo/domReady!"</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; esriLang<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; on<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dom<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; registry<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domConstruct<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domStyle<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; parser<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; BorderContainer<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; FeatureLayer<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; PopupTemplate<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HomeButton<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Search<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; BasemapGallery<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Graphic<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ContentPane<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Map<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arcgisUtils<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domUtils<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; TooltipDialog<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Popup<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dijitPopup<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Dialog
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; parser<SPAN class="punctuation token">.</SPAN><SPAN class="token function">parse</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; showLabels<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"gray"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">122.650</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">45.52</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">11</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> home <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">HomeButton</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">:</SPAN> map
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"HomeButton"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; home<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> search <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; showInfoWindowOnSelect<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; enableLabel<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; enableHighlight<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"search"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; search<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> template <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PopupTemplate</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"{NAME}"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; description<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"<b>White Population</b>: {WhiteAlone_not_Hisp}"</SPAN> <SPAN class="operator token">+</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"<br><b>Total Population 2010</b>: {TotPOP_2010}"</SPAN> <SPAN class="operator token">+</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"<br><b>Neighborhood Coalition</b>: {LABEL_NAME_COALITION}"</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> neighborhoodsLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Farcgis.research.pdx.edu%2Farcgis%2Frest%2Fservices%2FIMS_Services%2FNeighborhoods_Complete_nolabels%2FMapServer%2F29" target="_blank">http://arcgis.research.pdx.edu/arcgis/rest/services/IMS_Services/Neighborhoods_Complete_nolabels/MapServer/29</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; infoTemplate<SPAN class="punctuation token">:</SPAN> template<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; maxScale<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; minScale<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; opacity<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="number token">60</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayer</SPAN><SPAN class="punctuation token">(</SPAN>neighborhoodsLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>neighborhoodsLayer<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"mouse-over"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">clearTimeout</SPAN><SPAN class="punctuation token">(</SPAN>timer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">displayPopupContent</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>neighborhoodsLayer<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"mouse-out"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; timer <SPAN class="operator token">=</SPAN> <SPAN class="token function">setTimeout</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clearFeatures</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">100</SPAN><SPAN class="punctuation token">)</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"popupWindow"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">initializeSidebar</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dialog&nbsp; <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">TooltipDialog</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"position: absolute; width: 200px; font: normal normal normal 10pt Arial;z-index:100"</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">function</SPAN> <SPAN class="token function">initializeSidebar</SPAN><SPAN class="punctuation token">(</SPAN>map<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> popup <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//when the selection changes update the side panel to display the popup info for the</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//currently selected feature.</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>popup<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"selection-change"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">displayPopupContent</SPAN><SPAN class="punctuation token">(</SPAN>popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getSelectedFeature</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">//When features are associated with the&nbsp; map's info window update the sidebar with the new content.</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>popup<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"set-features"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">displayPopupContent</SPAN><SPAN class="punctuation token">(</SPAN>popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getSelectedFeature</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">function</SPAN> <SPAN class="token function">displayPopupContent</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> photoSRC <SPAN class="operator token">=</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fimages.trvl-media.com%2Fmedia%2Fcontent%2Fshared%2Fimages%2Ftravelguides%2Fdestination%2F178299%2FPortland-20917.jpg" target="_blank">https://images.trvl-media.com/media/content/shared/images/travelguides/destination/178299/Portland-20917.jpg</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> photo <SPAN class="operator token">=</SPAN> <SPAN class="string token">'<a><IMG SRC="'</SPAN> <SPAN class="operator token">+</SPAN> photoSRC <SPAN class="operator token">+</SPAN> <SPAN class="string token">'"width=200 height=125/></a>'</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> content <SPAN class="operator token">=</SPAN> feature<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getContent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; registry<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"leftPane"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"content"</SPAN><SPAN class="punctuation token">,</SPAN> content<SPAN class="punctuation token">,</SPAN> photo<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; registry<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"photoPane"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"content"</SPAN><SPAN class="punctuation token">,</SPAN> photo<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; neighborhoodsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> name <SPAN class="operator token">=</SPAN> evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>NAME<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> nameNoDot <SPAN class="operator token">=</SPAN> name<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="regex token">/\./g</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> nameDash <SPAN class="operator token">=</SPAN> nameNoDot<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="regex token">/_/g</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"-"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> nameLower <SPAN class="operator token">=</SPAN> nameDash<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toLowerCase</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> nboLink <SPAN class="operator token">=</SPAN> <SPAN class="string token"><SPAN>"<b>${NAME}</b><hr><a id='myLink' target='_blank' href='</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fneighborhoodpulsepdx.org%2Fprofiles%2F" target="_blank">http://neighborhoodpulsepdx.org/profiles/</A><SPAN>"</SPAN></SPAN> <SPAN class="operator token">+</SPAN> nameLower <SPAN class="operator token">+</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"'><b>Profile</b></a>"</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> popupContent <SPAN class="operator token">=</SPAN> esriLang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">substitute</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">,</SPAN> nboLink<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dialog <SPAN class="punctuation token">.</SPAN><SPAN class="token function">setContent</SPAN><SPAN class="punctuation token">(</SPAN>popupContent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domStyle<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN>dialog <SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"opacity"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.70</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dijitPopup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">open</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; popup<SPAN class="punctuation token">:</SPAN> dialog<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; x<SPAN class="punctuation token">:</SPAN> evt<SPAN class="punctuation token">.</SPAN>pageX<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; y<SPAN class="punctuation token">:</SPAN> evt<SPAN class="punctuation token">.</SPAN>pageY
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"myLink"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> closeDialog<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">function</SPAN> closeDialog <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clear</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dijitPopup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">close</SPAN><SPAN class="punctuation token">(</SPAN>dialog<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>body <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"claro"</SPAN><SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"mainWindow"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/BorderContainer"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"design:'headline',gutters:false"</SPAN> style<SPAN class="operator token">=</SPAN><SPAN class="string token">"width:100%; height:100%;"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/BorderContainer"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"gutters:false"</SPAN> region<SPAN class="operator token">=</SPAN><SPAN class="string token">"left"</SPAN> style<SPAN class="operator token">=</SPAN><SPAN class="string token">"width:225px;height:100%;font-size:13;"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"leftPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/ContentPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'center'"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"photoPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/ContentPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'bottom'"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"header"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/ContentPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'top'"</SPAN> style<SPAN class="operator token">=</SPAN><SPAN class="string token">"width:200px;height:10%;"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"featureCount"</SPAN> style<SPAN class="operator token">=</SPAN><SPAN class="string token">"margin-bottom:10px;"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>b<SPAN class="operator token">></SPAN>Portland<SPAN class="operator token"><</SPAN>br<SPAN class="operator token">></SPAN>Neighborhoods<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>b<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"map"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/ContentPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'center'"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"search"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>span id<SPAN class="operator token">=</SPAN><SPAN class="string token">"info"</SPAN> style<SPAN class="operator token">=</SPAN><SPAN class="string token">"font-family:arial;position:absolute;left:250px; bottom:5px; background-color:lightgray; opacity: 0.70; z-index:50;"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"HomeButton"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div style<SPAN class="operator token">=</SPAN><SPAN class="string token">"position:absolute; left:250px; bottom:40px; z-Index:999;"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

rscheitlin

Levi,

It is possible. You would have to link to the popup show event and then use dojo query to find the attribute link class and assign a click event to that dom object that will do map.infoWindow.hide();

deleted-user-1_r2dgYuILKY

The difference is this is a basic feature layer popup with attachment. No hyperlink with DOM ID.

<SPAN class="keyword token">var</SPAN> popup <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Popup</SPAN><SPAN class="punctuation token">(</SPAN>popupOptions<SPAN class="punctuation token">,</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PopupTemplate</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Storm: {name}"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; showAttachments<SPAN class="punctuation token">:</SPAN><SPAN class="keyword token">true</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

rscheitlin

Levi,

I'm confused is that not what we are doing now?..

deleted-user-1_r2dgYuILKY

I'm revisiting this thread with a similar question. Would it be possible to close a popup after clicking on a linked attachment in a feature layer?

deleted-user-1_r2dgYuILKY

OK. I tired that and got this error: Cannot read property 'on' of null.

rscheitlin

Levi,

That sounds like a scope issue then. Try this:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Layer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> name <SPAN class="operator token">=</SPAN> evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>NAME<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> nameNoDot <SPAN class="operator token">=</SPAN> name<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="regex token">/\./g</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> nameDash <SPAN class="operator token">=</SPAN> nameNoDot<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="regex token">/_/g</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"-"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> nameLower <SPAN class="operator token">=</SPAN> nameDash<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toLowerCase</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> nboLink <SPAN class="operator token">=</SPAN> <SPAN class="string token"><SPAN>"<b>${NAME}</b><hr><a id='myLink' target='_blank' href='</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwebsite%2Fprofiles%2F" target="_blank">http://website/profiles/</A><SPAN>"</SPAN></SPAN> <SPAN class="operator token">+</SPAN> nameLower <SPAN class="operator token">+</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="string token">"'><b>Profile</b></a>"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> popupContent <SPAN class="operator token">=</SPAN> esriLang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">substitute</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">,</SPAN>nboLink<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dialog<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setContent</SPAN><SPAN class="punctuation token">(</SPAN>popupContent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"myLink"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> closeDialog<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; domStyle<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN>dialog<SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"opacity"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.70</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dijitPopup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">open</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; popup<SPAN class="punctuation token">:</SPAN> dialog<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; x<SPAN class="punctuation token">:</SPAN> evt<SPAN class="punctuation token">.</SPAN>pageX<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; y<SPAN class="punctuation token">:</SPAN> evt<SPAN class="punctuation token">.</SPAN>pageY<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">function</SPAN> <SPAN class="token function">closeDialog</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clear</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dijitPopup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">close</SPAN><SPAN class="punctuation token">(</SPAN>dialog<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

deleted-user-1_r2dgYuILKY

I added that and got this error in the console: "closeDialog is not defined at HTMLAnchorElement.onclick." I tried moving the closeDialog() function definition before the nboLink and got the same error.

rscheitlin

Levi,

Have you tried just adding an onClick to your anchor element?

<SPAN class="keyword token">var</SPAN> nboLink <SPAN class="operator token">=</SPAN> <SPAN class="string token"><SPAN>"<b>${NAME}</b><hr><a target='_blank' onClick='closeDialog' href='</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwebsite%2Fprofiles%2F" target="_blank">http://website/profiles/</A><SPAN>"</SPAN></SPAN> <SPAN class="operator token">+</SPAN> nameLower <SPAN class="operator token">+</SPAN>
 <SPAN class="string token">"'><b>Profile</b></a>"</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.