Split a state in two

[krisfields]

I need to have the top half of one state be different than the bottom half of the state. Can anyone think of any way I can achieve this? Basically, the color of the top half should be different than that of the bottom half and the action that happens when clicked also needs to be different.

[mvtenney]

You will have to edit the js file with new SVG paths to create 2 states out of the one, this is pretty easily achievable with illustrator CC, as you can cut the existing layer for the state into 2 layers, and it will export the paths for you.

[kjrhody]

Agreed. You can also do this with Inkscape or the Chrome extension Boxy SVG which works really well. Based on the path names you use, you'll also need to modify the list of states/paths in the jquery.usmap.js file.