topic Combine InfoWindow and Dialog Popup from Mouseover and Click Events in ArcGIS JavaScript Maps SDK Questions

Combine InfoWindow and Dialog Popup from Mouseover and Click Events

LloydBronn — Sat, 11 Dec 2021 08:39:06 GMT

I'm working on a map that has a neighborhood feature layer. When a user mouses over a neighborhood, I want to have a menu in the corner of the map that displays demographics and other data, like this example. That is in Leaflet, but I'm wondering if something similar is possible with the ArcGIS JavaScript? Should I use the popup content in side panel example? If the user then clicks on a neighborhood, I want a popup to display a link to a page with more in depth data analysis. I've gotten the click to work. However, if I specify an info template for the layer, both the link dialog and and the infoWindow pop up on top of each other when the neighborhood is clicked.

Here is the part that's working:

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 t = "<b>${NAME}</b><hr><a target='_blank' href='http://<theserver>.org/profiles/" + nameLower +
              "'><b>Neighborhood Profile</b></a>";

          var content = esriLang.substitute(evt.graphic.attributes,t);
          var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
          map.graphics.add(highlightGraphic);
            
          dialog.setContent(content);

          domStyle.set(dialog.domNode, "opacity", 0.75);
            
          dijitPopup.open({
            popup: dialog,
            x: evt.pageX,
            y: evt.pageY
          });
        });
        function closeDialog() {
          map.graphics.clear();
          dijitPopup.close(dialog);
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I've gotten a mouseover function to work as well, but I can't get it to trigger the infoWindow.

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

RobertScheitlin__GISP — Mon, 20 Mar 2017 13:07:51 GMT

Lloyd,

Maybe I am not understanding, but it sounds as simple as setting the dijitPopup.open to a fixed xy instead of the click xy. So that the popup and and the dialog do not overlap.

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

LloydBronn — Thu, 23 Mar 2017 21:26:22 GMT

I want the dialog with the URL to show up where the click event happened, over the neighborhood. Before the neighborhood is clicked, I want an infowindow to show in a fixed spot in the corner of the map, and the data will change depending on which neighborhood you're hovering over. I can get either scenario to work, mouseover or click, but not both. The code above displays the generic infowindow underneath the dialog popup.

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

JordanBaumgardner — Thu, 23 Mar 2017 22:13:23 GMT

In 3x I used to add a custom renderer and add a mouse-over event handler to it, but I've not been able to figure out how in 4.x yet.

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

RobertScheitlin__GISP — Fri, 24 Mar 2017 00:15:33 GMT

Then I would say your do need to look into using the side panel info window then.

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

LloydBronn — Fri, 24 Mar 2017 02:56:40 GMT

Cool! Do you have an example for version 3?

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

RobertScheitlin__GISP — Fri, 24 Mar 2017 03:34:48 GMT

A sample for 3.x is the only one I am aware of:

Popup content in side panel | ArcGIS API for JavaScript 3.20

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

LloydBronn — Fri, 24 Mar 2017 22:00:43 GMT

I meant the custom renderer, but I'm looking into this too. The map on the side window example is blank. Might be a bug.

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

RobertScheitlin__GISP — Sat, 25 Mar 2017 02:24:25 GMT

Strange the sample has a map for me.

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

LloydBronn — Sat, 11 Dec 2021 08:39:09 GMT

So I'm working on this example with my own server layers and I'm getting some weird behavior. The layers disappear when I zoom in or out. I'm also not getting anything in the side window from a click. I'm not sure where to set the content for the side panel.

<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>Popup - Sidebar</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/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 {
      width: 20%;
      margin: 0;
      border: none;
    }

    #map {
      padding: 0;
    }

    .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: 60px;
      border-bottom: solid 1px #ccc;
    }
  </style>

  <script src="https://js.arcgis.com/3.20/"></script>
  <script>
    var map;
    require([
      "dojo/ready",
      "dojo/on",
      "dojo/dom",
      "dijit/registry",
      "dojo/dom-construct",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "esri/layers/FeatureLayer",
      "esri/InfoTemplate",
      "dijit/layout/ContentPane",
      "esri/map",
      "esri/arcgis/utils",
      "esri/domUtils",
      "esri/dijit/Popup"
    ], function(
      ready,
      on,
      dom,
      registry,
      domConstruct,
      parser,
      BorderContainer,
      FeatureLayer,
      InfoTemplate,
      ContentPane,
      Map,
      arcgisUtils,
      domUtils,
      Popup
    ) {
      ready(function() {
        parser.parse();

        //setup event handlers for the next/previous buttons
        on(dom.byId("previous"), "click", selectPrevious);
        on(dom.byId("next"), "click", selectNext);

        map = new Map("map", {
          showLabels: false,
          basemap: "gray",
          center: [-122.675, 45.570],
          maxZoom: 18,
          minZoom: 11
        });

        map.infoWindow.set("popupWindow", false);
        initializeSidebar(map);

        /* var infoContent = "${NAME}"
             "<b>White Population</b>: ${WhiteAlone_not_Hisp}" +
             "<br><b>Total Population 2010</b>: ${TotPOP_2010}" +
             "<br><b>Neighborhood Coalition</b>: ${LABEL_NAME_COALITION}";

          var template = new esri.InfoTemplate(infoContent); */

        var neighborhoodsLayer = new FeatureLayer("http://<server>/arcgis/rest/services/IMS_Services/Neighborhoods_Complete_nolabels/MapServer/29");

        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 the selection is cleared remove the popup content from the side panel.
          on(popup, "clear-features", function() {
            //dom.byId replaces dojo.byId
            dom.byId("featureCount").innerHTML = "Click to select feature(s)";
            //registry.byId replaces dijit.byId
            registry.byId("leftPane").set("content", "");
            domUtils.hide(dom.byId("pager"));
          });

          //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());
            dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";
            //enable navigation if more than one feature is selected
            popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
          });
        }

        function displayPopupContent(feature) {
          if (feature) {
            var content = feature.getContent();
            registry.byId("leftPane").set("content", content);
          }
        }

        function selectPrevious() {
          map.infoWindow.selectPrevious();
        }

        function selectNext() {
          map.infoWindow.selectNext();
        }
      });
    });
  </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: 20%;height:100%;">
      <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="featureCount" style="margin-bottom:5px;">Click to select feature(s)</div>
        <div id="pager" style="display:none;">
          <a href='javascript:void(0);' id="previous" class='nav' style="text-decoration: none;">
                    &lt; Prev
                </a> &nbsp;
          <a href='javascript:void(0);' id="next" class='nav' style="text-decoration: none;">
                    Next &gt;
                </a>
        </div>
      </div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

RobertScheitlin__GISP — Fri, 07 Apr 2017 23:47:26 GMT

Lloyd,

I have edited your code in the above reply to fix the things I saw wrong or need to be updated to not use depreciated classes like connect. I am not sure about the layer visibility thing as I don't have access to your layer url. Do you have a min and max scale for that layer in your map service? I see you have a min and max zoom applied for your map.

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

LloydBronn — Sat, 08 Apr 2017 21:32:31 GMT

Thanks. I applied these changes and I'm still getting the same behavior. I checked the service and there is a min and max scale (I didn't create this service so I was unaware of it).

Min Scale: 300005 Max Scale: 249995

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

RobertScheitlin__GISP — Sat, 08 Apr 2017 22:21:35 GMT

Lloyd,

I see that you are not defining a popuptemplate for your featurelayer so the layer would not have a popup. With the map service having a min and max scale that is why the layer disappears when zooming in. If you set a min and max scale for the FeatureLayer you can override the services min and max.

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

LloydBronn — Mon, 10 Apr 2017 14:34:44 GMT

When I do define a popuptemplate, the popup shows up over the feature, not in the side panel.

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

RobertScheitlin__GISP — Mon, 10 Apr 2017 14:45:00 GMT

Lloyd,

Hmm. That strange with the

map.infoWindow.set("popupWindow", false);

line in your code if anything the popup would never display. Maybe you should re-post all of your current code.

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

LloydBronn — Sat, 11 Dec 2021 08:39:13 GMT

Here it is. I can see the layers, but nothing happens when I click them.

<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>Popup - Sidebar</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/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 {
      width: 20%;
      margin: 0;
      border: none;
    }

    #map {
      padding: 0;
    }

    .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: 60px;
      border-bottom: solid 1px #ccc;
    }
  </style>

  <script src="https://js.arcgis.com/3.20/"></script>
  <script>
    var map;
    require([
      "dojo/ready",
      "dojo/on",
      "dojo/dom",
      "dijit/registry",
      "dojo/dom-construct",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "esri/layers/FeatureLayer",
      "esri/InfoTemplate",
      "dijit/layout/ContentPane",
      "esri/map",
      "esri/arcgis/utils",
      "esri/domUtils",
      "esri/dijit/Popup"
    ], function(
      ready,
      on,
      dom,
      registry,
      domConstruct,
      parser,
      BorderContainer,
      FeatureLayer,
      InfoTemplate,
      ContentPane,
      Map,
      arcgisUtils,
      domUtils,
      Popup
    ) {
      ready(function() {
        parser.parse();

        //setup event handlers for the next/previous buttons
        on(dom.byId("previous"), "click", selectPrevious);
        on(dom.byId("next"), "click", selectNext);

        map = new Map("map", {
          showLabels: false,
          basemap: "gray",
          center: [-122.675, 45.570],
            zoom: 11
        });
          
              var neighborhoodsLayer = new FeatureLayer("http://arcgis.research.pdx.edu/arcgis/rest/services/IMS_Services/Neighborhoods_Complete_nolabels/MapServer/29");
               map.addLayer(neighborhoodsLayer);

        map.infoWindow.set("popupWindow", false);
        initializeSidebar(map);

        var infoContent = "${NAME}"
             "<b>White Population</b>: ${WhiteAlone_not_Hisp}" +
             "<br><b>Total Population 2010</b>: ${TotPOP_2010}" +
             "<br><b>Neighborhood Coalition</b>: ${LABEL_NAME_COALITION}";

          //var template = new esri.InfoTemplate(infoContent);

        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 the selection is cleared remove the popup content from the side panel.
          on(popup, "clear-features", function() {
            //dom.byId replaces dojo.byId
            dom.byId("featureCount").innerHTML = "Click to select feature(s)";
            //registry.byId replaces dijit.byId
            registry.byId("leftPane").set("content", "");
            domUtils.hide(dom.byId("pager"));
          });

          //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());
            dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";
            //enable navigation if more than one feature is selected
            popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
          });
        }

        function displayPopupContent(feature) {
          if (feature) {
            var content = feature.getContent(infoContent);
            registry.byId("leftPane").set("content", content);
          }
        }

        function selectPrevious() {
          map.infoWindow.selectPrevious();
        }

        function selectNext() {
          map.infoWindow.selectNext();
        }
      });
    });
  </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: 20%;height:100%;">
      <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="featureCount" style="margin-bottom:5px;">Click to select feature(s)</div>
        <div id="pager" style="display:none;">
          <a href='javascript:void(0);' id="previous" class='nav' style="text-decoration: none;">
                    &lt; Prev
                </a>  
          <a href='javascript:void(0);' id="next" class='nav' style="text-decoration: none;">
                    Next &gt;
                </a>
        </div>
      </div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

One of the problems that I've had is that the example is based on an ArcGIS online map. This section here.

 arcgisUtils.createMap("a3f1f198208b4f1f917a91895c895e21", "map").then(function(response){
                window.map = response.map;
                //set the popup's popupWindow property to false. This prevents the popup from displaying
                map.infoWindow.set("popupWindow", false);
                initializeSidebar(window.map);
            }, function(error){
                console.log("Map creation failed: ", dojo.toJson(error));
            });‍‍‍‍‍‍‍‍

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:39:16 GMT

Lloyd,

Here is your code working:

<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>Popup - Sidebar</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/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 {
      width: 20%;
      margin: 0;
      border: none;
    }

    #map {
      padding: 0;
    }

    .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: 60px;
      border-bottom: solid 1px #ccc;
    }
  </style>

  <script src="https://js.arcgis.com/3.20/"></script>
  <script>
    var map;
    require([
      "dojo/ready",
      "dojo/on",
      "dojo/dom",
      "dijit/registry",
      "dojo/dom-construct",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "esri/layers/FeatureLayer",
      "esri/InfoTemplate",
      "dijit/layout/ContentPane",
      "esri/map",
      "esri/arcgis/utils",
      "esri/domUtils",
      "esri/dijit/Popup"
    ], function(
      ready,
      on,
      dom,
      registry,
      domConstruct,
      parser,
      BorderContainer,
      FeatureLayer,
      InfoTemplate,
      ContentPane,
      Map,
      arcgisUtils,
      domUtils,
      Popup
    ) {
      ready(function() {
        parser.parse();

        //setup event handlers for the next/previous buttons
        on(dom.byId("previous"), "click", selectPrevious);
        on(dom.byId("next"), "click", selectNext);

        map = new Map("map", {
          showLabels: false,
          basemap: "gray",
          center: [-122.675, 45.570],
            zoom: 11
        });
          
        var neighborhoodsLayer = new FeatureLayer("http://arcgis.research.pdx.edu/arcgis/rest/services/IMS_Services/Neighborhoods_Complete_nolabels/MapServer/29");
        map.addLayer(neighborhoodsLayer);

        map.infoWindow.set("popupWindow", false);
        initializeSidebar(map);

        var infoContent = "${NAME}"
             "<b>White Population</b>: ${WhiteAlone_not_Hisp}" +
             "<br><b>Total Population 2010</b>: ${TotPOP_2010}" +
             "<br><b>Neighborhood Coalition</b>: ${LABEL_NAME_COALITION}";
        //You needed to set the layer info template that is why you were not getting a popup.
        var template = new InfoTemplate(infoContent);
        neighborhoodsLayer.setInfoTemplate(template);

        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 the selection is cleared remove the popup content from the side panel.
          on(popup, "clear-features", function() {
            //dom.byId replaces dojo.byId
            dom.byId("featureCount").innerHTML = "Click to select feature(s)";
            //registry.byId replaces dijit.byId
            registry.byId("leftPane").set("content", "");
            domUtils.hide(dom.byId("pager"));
          });

          //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());
            dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";
            //enable navigation if more than one feature is selected
            popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
          });
        }

        function displayPopupContent(feature) {
          if (feature) {
            //not sure why you had infoContent in the getContent method
            var content = feature.getContent();
            registry.byId("leftPane").set("content", content);
          }
        }

        function selectPrevious() {
          map.infoWindow.selectPrevious();
        }

        function selectNext() {
          map.infoWindow.selectNext();
        }
      });
    });
  </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: 20%;height:100%;">
      <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="featureCount" style="margin-bottom:5px;">Click to select feature(s)</div>
        <div id="pager" style="display:none;">
          <a href='javascript:void(0);' id="previous" class='nav' style="text-decoration: none;">
                    &lt; Prev
                </a>  
          <a href='javascript:void(0);' id="next" class='nav' style="text-decoration: none;">
                    Next &gt;
                </a>
        </div>
      </div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

LloydBronn — Tue, 11 Apr 2017 21:15:35 GMT

It is working, but I'm not seeing the fields from the infoTemplate. Just OID and Coalition. Also, where can I change the code to display the fields on mouse-over instead of click?

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:39:21 GMT

Lloyd,

I did not notice your other code mistakes. The popup info is now resolved and the mouseover and mouseout are now working. Now you will have to figure out the dialog stuff, as I shouldn't do all the coding for you

<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>Popup - Sidebar</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/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 {
      width: 20%;
      margin: 0;
      border: none;
    }

    #map {
      padding: 0;
    }

    .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: 60px;
      border-bottom: solid 1px #ccc;
    }

    .dijitDialogPaneContent {
      width: 300px !important;
      height: 100px !important;
    }
  </style>

  <script src="https://js.arcgis.com/3.20/"></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",
      "dijit/layout/ContentPane",
      "esri/map",
      "esri/arcgis/utils",
      "esri/domUtils",
      "esri/dijit/Popup",
      "dijit/popup",
      "dijit/Dialog",
      "dojo/domReady!"
    ], function(
      esriLang,
      on,
      dom,
      registry,
      domConstruct,
      domStyle,
      parser,
      BorderContainer,
      FeatureLayer,
      PopupTemplate,
      ContentPane,
      Map,
      arcgisUtils,
      domUtils,
      Popup,
      dijitPopup,
      Dialog
    ) {
      parser.parse();

      //setup event handlers for the next/previous buttons
      on(dom.byId("previous"), "click", selectPrevious);
      on(dom.byId("next"), "click", selectNext);

      map = new Map("map", {
        showLabels: false,
        basemap: "gray",
        center: [-122.675, 45.570],
        zoom: 11
      });

      var dialog = new Dialog({
        title: "Programmatic Dialog Creation"
      });

      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/MapServer/29", {
          infoTemplate: template,
          outFields: ["*"]
        });
      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();
        }, 1000)
      });

      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 the selection is cleared remove the popup content from the side panel.
        on(popup, "clear-features", function() {
          //dom.byId replaces dojo.byId
          dom.byId("featureCount").innerHTML = "Click to select feature(s)";
          //registry.byId replaces dijit.byId
          registry.byId("leftPane").set("content", "");
          domUtils.hide(dom.byId("pager"));
        });

        //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());
          dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";
          //enable navigation if more than one feature is selected
          popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
        });
      }

      function displayPopupContent(feature) {
        if (feature) {
          //not sure why you had infoContent in the getContent method
          var content = feature.getContent();
          registry.byId("leftPane").set("content", content);
        }
      }

      function selectPrevious() {
        map.infoWindow.selectPrevious();
      }

      function selectNext() {
        map.infoWindow.selectNext();
      }
    });
  </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: 20%;height:100%;">
      <div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="featureCount" style="margin-bottom:5px;">Click to select feature(s)</div>
        <div id="pager" style="display:none;">
          <a href='javascript:void(0);' id="previous" class='nav' style="text-decoration: none;">
                    &lt; Prev
                </a>
          <a href='javascript:void(0);' id="next" class='nav' style="text-decoration: none;">
                    Next &gt;
                </a>
        </div>
      </div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Combine InfoWindow and Dialog Popup from Mouseover and Click Events

LloydBronn — Wed, 12 Apr 2017 14:18:55 GMT

Of course, thanks Robert! I had the dialog and mouse-over functions working separately, but I was just having trouble with this side infoWindow script.