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

Identify Feature by hovering over

JohnPreston

Hi, I can easily identify a feature on layer by using onClick and Identifytask. However I would like to identify a feature of specific layers in a map service by hovering over instead of clicking. I tried using a QueryTask but I'm not really querying the layer (I don't have a where). Which method is the best to use?

Vind meer berichten getagd met

Accepted answers

All comments

rscheitlin

IMHO: Just because you as a programmer can do something does not mean that you should. Why not require a mouse click? You don't see Google maps using a mouse over to reverse geocode every address that mouse is over. Using a mouse over to display a popup does not make good sense when it comes to user experience or client resource usage. Just something to keep in mind.

ChrisSmith7

This is a good base sample for hover tooltips - I ran into some issues with the latency on keeping features highlighted, but ended-up fixing this with some JavaScript trickeration... by tracking highlight graphics in an array and removing those currently not in focus on the next feature hover - works pretty well in removing the latent objects when moving the mouse fast across the map.

Another oddity in functionality concerned the pop-up - if you mouse into the tooltip region, then out onto the basemap (not another fl feature), the graphic remains highlighted with the tooltip shown. Through some more trickeration, I ended-up with something more like this:

2014 Outlook: World Economic Growth Map - Businessweek

It wasn't quite as smooth, but close enough!

JohnPreston

Also...I have different layers in my map service, and I am trying to hover over a point.

JohnPreston

I took the code from example altered to use my map service, I am missing something because I can't get mouse move to fire.

 var map, dialog;

"esri/map", "esri/layers/FeatureLayer",

"esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",

"esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang",

"esri/Color", "dojo/number", "dojo/dom-style",

"dijit/TooltipDialog", "dijit/popup", "dojo/domReady!"


function (

new Map("mapDiv", {

"streets",

false


var southCarolinaCounties = new FeatureLayer("http://gisappserv3/ArcGIS/rest/services/Engineering/MaintenancePoints/MapServer", {

"District"]

//          southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'Washington'");


var symbol = new SimpleFillSymbol(

new SimpleLineSymbol(

new Color([255, 255, 255, 0.35]),

new Color([125, 125, 125, 0.35])

new SimpleRenderer(symbol));

new TooltipDialog({

"tooltipDialog",

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


var highlightSymbol = new SimpleFillSymbol(

new SimpleLineSymbol(

new Color([255, 0, 0]), 3

new Color([125, 125, 125, 0.35])

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


"load", function () {

"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


"mouse-over", function (evt) {

'here'); 

var t = "<b>${District}</b>";

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

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

"opacity", 0.85);

function closeDialog() {

OwenEarley

To paste a code block click on the 'Use advanced editor' at the top-right of the reply area then you can paste your code, select it then pick Javascript from the Syntax Highlighting options:

JohnPreston

Thank you, it's not quite working for me with the map service I am using. How do you paste javascript into a reply?

OwenEarley

Check out this sample: Feature Layer - display results as an InfoWindow onHover

Essentially you need to respond to the mouse-over and mouse-out events for each layer to apply the hover info. The sample shows how this is done.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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