CODEWITHSUNDEEP
javascriptesripolylinearcgis-js-api
user2236586
user2236586

Reputation: 11

Change color and width of Polyline - ESRI Javascript API

I have a ESRI map that has 11 polylines on it. I would like it so that when a user mouses over a line, the line changes a different color and changes to a bigger width. When a user mouses off the line, the line will go back to it's original color and width. All these lines are on the same layer (var reaches).

I have the code that detects when a user mousesover or mouseout of a line:

dojo.connect(reaches, "onMouseOver", function(evt) 
{ });

dojo.connect(reaches, "onMouseOut", function() 
{ });

They correctly detect when the mouse in over a line and when the mouse is off a line. The way I have these 2 function, they detect when the mouse is over any line in the reaches layer. I would like the onMouseOver function to know which line was moused over and change the color and the width of the line. How do I do this?

Upvotes: 1

Views: 1337

Answers (1)

Juffy
Juffy

Reputation: 1220

I would like the onMouseOver function to know which line was moused over

The evt parameter given to your event handler function should have a .graphic property, which contains the geometry of the feature you're hovering over.

and change the color and the width of the line

You can't do this directly on the feature without playing with its field values, but you can add a new feature to the map.graphics layer to serve as the highlighted feature. There's a good example on ESRI's forums:

dojo.connect(pdaGraphicsLayer, "onMouseOver", function(evt) {
map.graphics.clear();
var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);
map.graphics.add(highlightGraphic);
});

Upvotes: 1

Related Questions