leaflet - Mapbox: Change weight of circle on hover -

i have drawn circle using l.circle weight 1px. want change weight 2px on hover smooth animation.

as changing "weight" of l.circle (which in fact svg shape "stroke-width") on hover, bind callbacks on "mouseover" , "mouseout" events:

mycircle.on({   "mouseover": function () {     mycircle.setstyle({       weight: 2     })   },   "mouseout": function () {     mycircle.setstyle({       weight: 1     })   } }); 

as smooth animation, have 2 options:

• css3 transition on svg properties. ie not support them unfortunately.
• fallback implementing animation / transition yourself, typically using setinterval or requestanimationframe, , adjusting weight gradually.

with css3 transition on svg properties:

javascript:

var mycircle = l.circle(mylatlng, myradius, {   weight: 1,   classname: "test" }) 

css:

.test {   transition: stroke-width 1s; /* duration unit */ } 

demo: http://jsfiddle.net/ve2huzxw/115/