Open GoogleCodeExporter opened 9 years ago
It's pretty easy to do a hover effect where you add a second PolyGonzo overlay
on top of the main one, with that second overlay containing only the feature(s)
you want to highlight.
This does the trick if you want a heavier border on hover, for example. You
could also darken and change a fill color this way, but you'd be mixing with
whatever color is below it in the main overlay.
The Turkish election map has a hover border effect:
http://www.google.com.tr/intl/tr/landing/elections/2011/
The code to do that is in this file:
http://code.google.com/p/election-results/source/browse/turkey2011/gadget/turkey
-results-map.js
Search for PolyGonzo.PgOverlay and you'll find the two PolyGonzo overlays. The
main one is set up in the draw() function. This is the usual PgOverlay that
includes all the provinces or districts being displayed.
A few lines above that is the mousemove code that calls outlineFeature() when
the mouse moves over a new feature or over no feature. outlineFeature() creates
or removes a second PolyGonzo overlay for the one feature being highlighted.
This code uses only a border highlight, but you could try changing the
fillColor and fillOpacity to mix a transparent fill over the original color.
Sometime I want to merge this hover code into polygonzo itself, but this should
get you going in the meantime. Be sure to use the latest polygonzo.js since it
has updates to support these hover effects.
Feel free to fire back with questions.
Thanks!
Original comment by m...@mg.to
on 21 Jul 2011 at 9:22
Original comment by m...@mg.to
on 21 Jul 2011 at 9:22
That works beautifully. Thank you!
Original comment by kat.do...@gmail.com
on 21 Jul 2011 at 9:45
Original issue reported on code.google.com by
kat.do...@gmail.com
on 19 Jul 2011 at 11:54