Popup on hover not working properly

[ADITYAKUMAR1]

Hi Users,

I followed the example provided in sample to have hover on featurelayer.

Feature layer hover | ArcGIS API for JavaScript

But once I hover on one point I get the popup and when I come back to the same point it does not come.Its coming only once for one point.

And when I remove the mouse from the point, the info window should close, but it does not close.

Any suggestion on this will be helpful.

Thanks

Aditya Kumar

[AndrewFarrar]

Hello Aditya,

Can you post your code?  Otherwise it is hard to diagnose what you are running into.

[ADITYAKUMAR1]

Here is my code

function maptips() {

well = new esri.layers.FeatureLayer("https://XXXX/arcgis/rest/services/Global/XX/MapServer/3", {

          outFields: ["WELL_NAME", "UWI", "COMMON_NAME", "COUNTRY_NAME", "ORIGINAL_OPERATOR"]

        });

var symbol  = new esri.symbol.PictureMarkerSymbol('http://localhost/map/MapTip.png', 20, 20);

var renderer = new esri.renderer.UniqueValueRenderer(symbol,"WELL_NAME");

well.setRenderer(renderer);

map.addLayer(well);

well.setScaleRange(73957190.948944,18055.954822);

map.infoWindow.resize(245,125);

        dialog = new dijit.TooltipDialog({

          id: "tooltipDialog",

          style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"

        });

        dialog.startup();

        var highlightSymbol = new esri.symbol.PictureMarkerSymbol('http://localhost/map/MapTip.png', 20, 20);

        //close the dialog when the mouse leaves the highlight graphic

        map.on("load", function(){

          map.graphics.enableMouseEvents();

          map.graphics.on("mouse-out", closeDialog);

        });

        //listen for when the onMouseOver event fires on the countiesGraphicsLayer

        //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer

        well.on("mouse-over", function(evt){

          var t = "<b>${WELL_NAME}</b><hr><b>Well Name: </b>${WELL_NAME}<br>"

            + "<b>UWI: </b>${UWI}<br>"

            + "<b>Common Name: </b>${COMMON_NAME}<br>"

            + "<b>Country: </b>${COUNTRY_NAME}";

          var content = esri.substitute(evt.graphic.attributes,t);

          var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);

          map.graphics.add(highlightGraphic);

          dialog.setContent(content);

          dojo.setStyle(dialog.domNode, "opacity", 0.85);

          dijit.popup.open({

            popup: dialog,

            x: evt.pageX,

            y: evt.pageY

          });

        });

        function closeDialog() {

          map.graphics.clear();

          dijit.popup.close(dialog);

        }

          }

[thejuskambi]

Hello Aditya,

You are creating the ToolTip dialog on mouse event of FeatureLayer and trying to clear it with the event on map.graphics. which are two different layer.

I suggest you to change map.graphics.on("mouse-out", closeDialog) to well.on("mouse-out", closeDialog)

Hole this helps.

Thejus

[ADITYAKUMAR1]

Hi Thejus,

I am sorry but its not working.

map.on("load", function(){

          map.graphics.enableMouseEvents();

          well.on("mouse-out", closeDialog);

        });

Thanks

[thejuskambi · Accepted solution]

Hello Aditya,

I think the map.load event is already executed before you call the maptips function. So I think you should do something like this.

if(map.loaded){

          map.graphics.enableMouseEvents();

          well.on("mouse-out", closeDialog);

}

else{

map.on("load", function(){

          map.graphics.enableMouseEvents();

          well.on("mouse-out", closeDialog);

        });

}

or use the layer-add-result event and make sure you add the layer after seting up the event.

Thejus

[ADITYAKUMAR1]

Hi Thejus,

It really worked.

Thanks a lot.

Aditya Kumar