Linking States to URL's Throughout Website

[eweisbrot]

Hello,

I've searched the issues here, but couldn't find anything on what I want to accomplish. I'm trying to link each state to a separate webpage on our website (click the state to being you there). I'm quite new and have searched the web, but can't find an answer. Please see my map here:

http://199.119.123.135/surety-bonds/commercial-bonds/auto_dealer_bond_map.htm

Thanks in advance!

[CaptainStack]

You should be able to accomplish this fairly easily in JavaScript using window.location. You can do something like this with the map's click handler:

$('#map').usmap({
    click: function(event, data) {
        window.location = "http://www.google.com";
    },
}

This will apply to every state, so if you want something that's state-specific, you can add if statements like so:

    click: function(event, data) {
        if (data.name == "MO") {
             window.location = "www.missouri.com";
       } else {
            window.location = "http://www.google.com";
      }
    },

It's a bit clunky, and honestly should be built into the map's functionality more elegantly. Maybe I'll fork it and add that because I think it should be fairly easy. Until then, I hope this hack gets the job done for you.

[eweisbrot]

Thanks Captain Stack! Worked like a charm. Do you know if there is any way to add a tool tip for each state name for when a user hovers over the states?

[CaptainStack]

I managed to add this as well when I was using this map. It's a bit trickier and too hard for me to explain right now. I'll have to get back to you. Please message me if you haven't heard in a few days because I may forget, but I do want to collect these features together so I can make a useful extension of this mapping library.

[CaptainStack]

The short version is that if you can add a < title >[INSERT STATE NAME]< /title > to the < path > element of the state, then it should work as a tooltip. However, this is again not natively supported and you have to understand how the app works to hack it in.

[eweisbrot]

Thanks for the response. I'm not familiar enough with the map to do this on my own. I tried using the code found here to no avail: https://github.com/NewSignature/us-map/issues/31

[eweisbrot]

Hey Captainstack,

I emailed you regarding the tooltips issue today. Please get back to me when you have a chance. Thanks!