Close Dialog Popup on Hyperlink Click

deleted-user-1_r2dgYuILKY · ‎08-10-2017

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

RobertScheitlin__GISP · ‎08-14-2017

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

RobertScheitlin__GISP · ‎08-10-2017

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

deleted-user-1_r2dgYuILKY · ‎08-10-2017

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.

RobertScheitlin__GISP · ‎08-10-2017

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

deleted-user-1_r2dgYuILKY · ‎08-10-2017

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

RobertScheitlin__GISP · ‎08-10-2017

Levi can you provide a complete sample of this issue?

deleted-user-1_r2dgYuILKY · ‎08-14-2017

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

RobertScheitlin__GISP · ‎08-14-2017

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

deleted-user-1_r2dgYuILKY · ‎08-14-2017

Thanks Robert!

KenBuja · ‎08-14-2017

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