Close Dialog Popup on Hyperlink Click

662
13
Jump to solution
08-10-2017 12:29 PM
deleted-user-1_r2dgYuILKY
Occasional Contributor III

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 = "<b>${NAME}</b><hr><a target='_blank' href='http://website/profiles/" + nameLower +
              "'><b>Profile</b></a>";
                  
          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);
               };
              
         
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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: "<b>White Population</b>: {WhiteAlone_not_Hisp}" +
          "<br><b>Total Population 2010</b>: {TotPOP_2010}" +
          "<br><b>Neighborhood Coalition</b>: {LABEL_NAME_COALITION}"
      });

      var neighborhoodsLayer = new FeatureLayer(
        "http://arcgis.research.pdx.edu/arcgis/rest/services/IMS_Services/Neighborhoods_Complete_nolabels/Map...", {
          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-2...";
          var photo = '<a><IMG SRC="' + photoSRC + '"width=200 height=125/></a>';
          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 = "<b>${NAME}</b><hr><a id='myLink' target='_blank' href='http://neighborhoodpulsepdx.org/profiles/" + nameLower +
            "'><b>Profile</b></a>";

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

View solution in original post

13 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Levi,

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

var nboLink = "<b>${NAME}</b><hr><a target='_blank' onClick='closeDialog' href='http://website/profiles/" + nameLower +
"'><b>Profile</b></a>";
0 Kudos
deleted-user-1_r2dgYuILKY
Occasional Contributor III

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. 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Levi,

   That sounds like a scope issue then. Try this:

        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 = "<b>${NAME}</b><hr><a id='myLink' target='_blank' href='http://website/profiles/" + nameLower +
              "'><b>Profile</b></a>";
                  
          var popupContent = esriLang.substitute(evt.graphic.attributes,nboLink);
           
          dialog.setContent(popupContent);

          on(dom.byId("myLink"),"click", closeDialog);

          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);
               };
              
         
        });
0 Kudos
deleted-user-1_r2dgYuILKY
Occasional Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Levi can you provide a complete sample of this issue?

0 Kudos
deleted-user-1_r2dgYuILKY
Occasional Contributor III

Here's the whole script:

<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: "<b>White Population</b>: {WhiteAlone_not_Hisp}" +
          "<br><b>Total Population 2010</b>: {TotPOP_2010}" +
          "<br><b>Neighborhood Coalition</b>: {LABEL_NAME_COALITION}"
      });
          
      var neighborhoodsLayer = new FeatureLayer(
        "http://arcgis.research.pdx.edu/arcgis/rest/services/IMS_Services/Neighborhoods_Complete_nolabels/Map...", {
          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);

      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-2...";
            var photo = '<a><IMG SRC="' + photoSRC + '"width=200 height=125/></a>';
            var content = feature.getContent();
          registry.byId("leftPane").set("content",content,photo);
            registry.byId("photoPane").set("content",photo);
        }
          
          dialog = new TooltipDialog({
          style: "position: absolute; width: 200px; font: normal normal normal 10pt Arial;z-index:100"
        });
       
          
          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 = "<b>${NAME}</b><hr><a id='myLink' target='_blank' href='http://neighborhoodpulsepdx.org/profiles/" + nameLower +
              "'><b>Profile</b></a>";
                  
          var popupContent = esriLang.substitute(evt.graphic.attributes,nboLink);
           
          dialog.setContent(popupContent);

          //on(dom.byId("myLink"),"click", closeDialog);

          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);
               };
              
         
        });
          
          
          
          
     
      }      
      

    });
  </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>
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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: "<b>White Population</b>: {WhiteAlone_not_Hisp}" +
          "<br><b>Total Population 2010</b>: {TotPOP_2010}" +
          "<br><b>Neighborhood Coalition</b>: {LABEL_NAME_COALITION}"
      });

      var neighborhoodsLayer = new FeatureLayer(
        "http://arcgis.research.pdx.edu/arcgis/rest/services/IMS_Services/Neighborhoods_Complete_nolabels/Map...", {
          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-2...";
          var photo = '<a><IMG SRC="' + photoSRC + '"width=200 height=125/></a>';
          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 = "<b>${NAME}</b><hr><a id='myLink' target='_blank' href='http://neighborhoodpulsepdx.org/profiles/" + nameLower +
            "'><b>Profile</b></a>";

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

View solution in original post

deleted-user-1_r2dgYuILKY
Occasional Contributor III

Thanks Robert!

0 Kudos
KenBuja
MVP Honored Contributor

Nice reply, Robert.

I have one question about adding the event. Since you're adding this event every time the layer is clicked, would this be a potential memory leak? Would it be better to fire that event just once?

on.once(dom.byId("myLink"),"click", closeDialog);