Make each state clickable and give an hover effect about stately HOT 17 OPEN

This will be coming soon via a jquery plugin.

from stately.

Great, thanks , I will wait this feature

from stately.

as will I

from stately.

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

from stately.

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.

from stately.

Thanks. Looking forward to this.

from stately.

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).

from stately.

Thanks Ben, really looking forward to the plugin.

from stately.

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.

from stately.

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/

from stately.

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

from stately.

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

from stately.

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

from stately.

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

from stately.

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

from stately.

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

from stately.

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

from stately.