Make each state clickable and give an hover effect

[byroncorrales]

Do you have any idea, if a feature of make clickable with hover effect each state could be add in the future with this logic.

Thanks for the efforts in this project.

[bpmarkowitz]

This will be coming soon via a jquery plugin.

[byroncorrales]

Great, thanks , I will wait this feature

[alexdmejias]

as will I

[maxwellpalmer]

Is it possible to do this with pure CSS, or is jquery necessary when using fonts like this?

[bpmarkowitz]

It can't be done with HTML because the container for each state takes up the full size of the map. Therefore you can only interact with whatever the last state in your markup is (usually Wyoming!).

My solution involves an image map and some javascript to dynamically resize it based on whatever sized your stately map is.

[maxwellpalmer]

Thanks. Looking forward to this.

[uberbuilder]

Perhaps off-topic, but I'd like your informed opinion on this if you could.

I've been quietly watching the Stately repo for a bit now. I'm considering redesigning a project I've been working on (after I deliver it to the customer) to use a system based on this symbol font idea.

Here's my current project that I use to achieve a similar effect using leaflet.js (Still in development, forgive the styles, location of the legend, etc.):
http://uberbuilder.github.com/choropleth/tests/2013/02/13/hunger-coalition-version-0.1.9/

I've tested my app through development and kept it working all the way back to IE6, and all modern browsers as well as all mobile browsers. Everything works, and you get the same experience in all devices (except the fact that you don't have a mouse on most mobile browsers, so the hover state is pretty much skipped over based on how people use mobile devices)

I thought that perhaps using a symbol-font would be a better technology to use to make the mobile browser version much less "glitchy" on the zoom. I'm still not sure how I would zoom, but I thought that with CSS transitions I could come up with some interesting effects. I also thought that I might be able to not have to worry about all the latLngBound math I have to do in Leaflet for my zoom to go where I want it to. (zoom in, pan to the left)

So, I thought I'd finish my project and then attack it again using symbol fonts (really just for my own pleasure of designing it right). Then I read this blog: http://chrislord.net/index.php/2013/02/11/tips-for-smooth-scrolling-web-pages-edgeconf-follow-up/ and determined that stately might create too many overlapping layers and flicker/glitch on a zoom regardless. Though, it's possible that I interpreted how "layers" are being generated on mobile devices incorrectly. Maybe we could use the csstransform trick to accomplish the tasks I'm looking to do (zoom and such) and somehow get an edge on the performance. Maybe I'm reading way too much into this. Maybe I could just hide all the other layers and then zoom the one layer up to the size I want to achieve a similar effect I have going on with my current project. (if you're confused about the zoom I'm talking about make sure you check out the choropleth project link I posted above).

[Hiker9]

Thanks Ben, really looking forward to the plugin.

[circlecube]

Yes, this will be a nice feature. I've been doing maps lately with raphaeljs, it uses canvas to draw the map, but this is much simpler to not have to deal with svg coordinates for each state. It does offer hover states and exact targeting though. http://raphaeljs.com/australia.html I wonder about how exact an image map will be. Would setting each state as the full state and positioning it within the map via % margins? Then each could at least be accessible (have it's own exposed hit area). I don't think the margins could be exact enough though. Very intriguing concept though.

[uberbuilder]

Geez... I included the wrong link in my comment above... Sorry about that.

I use Leaflet for this: http://uberbuilder.github.com/choropleth/tests/2013/02/13/hunger-coalition-version-0.1.9/

[gavinr]

@bpmarkowitz Any update on when this update is coming? I'd love to see this feature in Stately.

[corbinhesse]

@bpmarkowitz – Is this still planned on being implemented? It would be extremely useful.

[inlikealion]

@bpmarkowitz - I’m adding voice for interest in this feature. Thanks!

[AUM001]

I appreciate your work on Stately and I second the desire to have each state be clickable. Any thought on the update being available?

[cbwiedel]

Making the states clickable is a must! So many possibilities with this feature. Can't wait for the plugin!

[michalsen]

Nicely done. Efficient and simple, in execution. However, I too needed clickable states. Went with http://newsignature.github.io/us-map/

[jenlampton]

+1 for links in stately, and thanks @michalsen for recommending the us-map plugin! :)