how to add links to states

[RawContent]

hello,
im newbie here, i wonder how can i add link to each state, by clicking it moves to the targeted link
and thank you

[johnnyr209]

Did you figure out how to link each state to a URL?

[eweisbrot]

I used this:

click: function(event, data) {
if (data.name == "AL") {
window.location = "/surety-bonds/licensed-states/alabama_surety_bond.htm";
}

[ghost]

@eweisbrot thanks for writing that, helped me a ton!

         if (data.name == "UT") {
           $('#ut').toggle();
        }
          else {
            $('#ut').hide();
        }

[gbdg]

We have the logic referenced in the Jan 22 post (above) working successfully. We also have logic to highlight a state, as shown below, from another post. Both of these work fine.
'AL' : { fill: '#950000'},

Might I ask how to implement both the link and the highlighting logic for the Northeastern states?

We have wrapped the highlighting logic and the link logic with IF statements that are only true when at least on dealer is present for a given state. I want to enforce the same logic against the icons for the NE states.

[activeiron]

Hi I am trying to implement on click URL with three other functions. But I am having issues with the click: function. Can please gudie me with my code.

<script> $(document).ready(function() { $('#map').usmap({ stateSpecificStyles: { 'ME': {fill: 'red'}, 'WI': {fill: 'red'}, 'MT': {fill: 'red'} }, stateSpecificHoverStyles: { 'ME': {fill: 'green'}, 'WI': {fill: 'green'}, 'MT': {fill: 'green'}

},
// Show tooltip when hovering over state
mouseover: function(event, data) {
    $('#tooltip').text(data.name+"test").show();
    $('#map').mousemove(function(e){
        var mouseX = e.pageX -10;
        var mouseY = e.pageY -30;
        $('#tooltip').css({
            top:mouseY,
            left:mouseX,
            'position': 'absolute',
            'border':'1px solid black',
            'background': '#fff',
            'color': '#ffffff',
            'font-size': '1.5 em',
            'padding': '5px',
            'opacity': '0.75',
            'border-radius': '2px'
        });
    });
}, 

click: function(event, data) {  	
	if (data.name == "AL") {
	window.location =="https://www.google.com/";
	}
  });
});
</script>
</div>