nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Trouver plus de publications taguées avec

Accepted answers

thejuskambi

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

All comments

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://xyz/arcgis/rest/services/Global/xyz/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 = "${WELL_NAME}<hr>Well Name: ${WELL_NAME} "

+ "UWI: ${UWI} "

+ "Common Name: ${COMMON_NAME} "

+ "Country: ${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

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.