Clickable SVG State Map

[jimbobrjames]

I’ve built a SVG map of the united states based on an article by Chris Coyier but I am having a hard time extending it so that the states are clickable and take you to the matching href. Each state in the map has an id that matches up with the UL list of states underneath. In my version I have added anchor tags to each state name under the map:

<li data-state="AL" class=""><a href="/locations/alabama">Alabama</a></li>

How do i alter the javascript so that it finds the href of the anchor tag inside the corresponding LI element under the map and goes to it when that state on the map is clicked?

I know i can put anchors in the svg code, but the list is generated with a CMS with the pages filled in. Its easier to manage this way.

Thanks!

[Paul_Wilkins]

You could add a click handler to each of the elems that uses the id attribute to get the appropriate data-state item.

[jimbobrjames]

Sure, i know the theory, but i have no idea how (i am learning javascript). I was really hoping someone would post a code example.

[Paul_Wilkins]

You have a good example in your own code.

Do you see at the end of the script where the addEventListener lines of code are?

You just need to add another one there for click, and a function that’s called something like stateClickHandler (for a very generic name), or visitState for a more meaningful function name.

[shokoman]

It’s great that you have time to dig into this, and I am sure that you will find a good solution! But if you do not have time, then there are good ready-made products. I have used map from fla-shop several times, it is based on SVG and has an API for various implementations.