Combine InfoWindow and Dialog Popup from Mouseover and Click Events

3251
22
Jump to solution
03-18-2017 06:00 PM
LloydBronn
Occasional Contributor II

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 exampleIf 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. 

0 Kudos
22 Replies
LloydBronn
Occasional Contributor II

One last question. I'd like to make the side panel a partially transparent box hovering over the map. Is this possible? I'm trying to change the height of the left pane to 20% in both the CSS style section and in the div, but nothing is happening. 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Lloyd,

   You would have to re-write your app to not use the layout dijits in the way that they are then. Currently the left pane does not sit on top of the map but next to the map so there is nothing under the content pane to see if you set its opacity anyway.

0 Kudos
LloydBronn
Occasional Contributor II

Ah OK. Thanks

0 Kudos