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

I have an app where I show the entire US, but when you click on a state, you'll then see a single state. I'd like to show the outline of that one state and am wondering how I might do that.

Thanks,
Scott

We can't change the color of the label text on hover. I took a quick look at the JS and I think that the problem is that it has not been defined.

stateSpecificLabelTextHoverStyles

I have three charts in one div. I'm reordering the divs, other charts are working fine but map is loosing all the css. This happenes only in IE 8. Not sure how to redraw the map without making server call.

Hey All,

Awesome plugin, love this thing! Running into a unique issue when using this map selector inside of a fancybox where the labels don't line up with their backing. I've added the map to the regular page and it functions perfectly but in the fancybox there seems to be some kind of initialization issue happening, please check out the image.

If there's any chance someone can give me a hand with this today it'd be hugely appreciated.

I can change the color of it and the width but not get rid of the white stroke between each state. Is there a way to do this? I also tried editing the svg file thinking it was that showing through.

Thanks!

Hello,

To preface this, I am a complete novice to jQuery. I've followed the directions on the website here http://newsignature.github.io/us-map/, but I can't seem to get the map working at all. I'm just trying to get the map to display towards the bottom of the page with each state having a clickable links.

Please see my webpage here: http://199.119.123.135/surety-bonds/commercial-bonds/auto_dealer_bond_map.htm

I also tried searching for solutions elsewhere online, but can't figure it out. Any help is much appreciated. Thanks!

It took me a while to figure this one out and it's rather simple - for people with greater JS knowledge than myself. If you're like me and you want the default #alert ID to output HTML, change the .text to .html.

From:

 $('#alert')
.text('Click '+data.name+' on map 2 <a href="mailto:[email protected]">email me</a>')

To:

 $('#alert')
.html('Click '+data.name+' on map 2 <a href="mailto:[email protected]">email me</a>')

This isn't so much an issue - I just hope it helps someone save time in the future!

Hi, i need use this map for other country example my country Nicaragua, i have my svg file
only need rewriter the jquery.usmap.js and put the path for state my country?? or need rewritter
other files???

Cheers

Note the code snippet at this pastebin:
http://pastebin.com/88K0AMb9

I know that only 'click' and 'mouseover' and 'mouseout' are supported, but I want to effectively change 'click' on line 8 to 'touchend'. I'm having difficulty modifying the core jquery.usmap.js script to add this as an event. Has anyone done this?

I see the posts here where in the methods in the js, people are adding touchend in places such as:
" $(this.stateHitAreas[state].node).bind('click touchend', this._onClickProxy);"

But that does not allow an external event to be indicated, such as in my pastebin. It seems someone must have this implemented by now, so I thought I'd ask.

Thanks

If I wanted to allow selection of multiple states how would I do that? In the issues, I see there is a solution for getting a state to stay on the active color even after it is clicked, however, that state changes once you pick a different state. If I wanted to user to select more than one state and keep their active states available, how could that be done? Thanks everyone in advance!

Hello,

How would I go about decreasing the bottom margin of the map? I'm a little stumped.

Thanks!

How to update the statespecific styles on a button click?
I initialized the map with a set of colors. upon a button click [no postback] the colors for some states should change. initializing the us map plugin again in the button click does not seem to work.. Any way to get this working?

There's an svg map with territories - I need to use it but can't see how it is referred to? Thanks

How might I highlight multiple states, by hovering over one state? Example: hover over the state of Utah, and it subsequently highlights Utah, Idaho, Colorado and Wyoming.

example/index.html, line 21:

Should be:

I'm using the example from the demo (http://newsignature.github.com/us-map/#demo), but the labels are misaligned.

Is there any way to readjust their position?

The map doesnt work at all in IE8 or 7. Even the main page doesn't work correctly. Is anyone else having this issue?

I would really like to use this map, however, I need to be able to have the states click to a link. Instead of spending hours of trying to figure out how to do this myself (already have spent a good time) maybe someone know what code I need to put in? Any help would be really appreciated. I may just go with a simple old image map if I cannot use this.

When a state is clicked it turns green and a form appears with PHP validation. After submitting, if there are errors, it will return to the same page and display the errors. The problem is the state selected is black not green - meaning it returns back to the default color. How can I submit the form, if it returns to the page, how can I keep the state clicked as green?

I've tried combining php and jquery using if and else statements, jquery load and click, but have not been successful. Can someone explain how this can be done?

Hi,
I want to show legends of the graph to the left side of the map, however when I try to align it using variable var neBoxX = -80; (which is inside _initCreateLabels() method) it cuts the legend text and the rectangle.

Could you please let me know if any workaround?

Pleas see below image :

I've got the shape of Puerto Rico figured out, and it is output on the map, but it is over New Mexico. How would I position it just off of Florida?

I am wanting to add an HREF to each state linking them to a page within my site. The below code works in FireFox and Chrome, but not in IE. Can anyone help?

clickState: {
// Active Plan States
'OH': function(event, data) {
$(location).attr('href','/indiana');
}
}

Hello, I'm having trouble getting events to work at all. Is below supposed to be replaced with something? It's not clear from the directions. Leaving it in gives a syntax error.

As an option:

$('#map').usmap({
State: {
'MD' : function(event, data) {
console.log('You interacted with the state of Maryland');
}
}
});
Binding it:

$('#map').on('usmapMD', function(event, data) {
console.log('You clicked on the state of Maryland');
});

I'm trying to display a unique message per state (beyond just the state name) when the user clicks a state. Any help would be much appreciated. Thank you. And thanks for sharing this code!

Brian

Hello,

I'm attempting to center my map using a css centering class that works for text and images, but some reason isn't working on the map. I'm using: class="text-center".

Please see the page below:

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

Any ideas? Thanks!

Can't seem to customize this map how I want it... Obviously it can be done because the demo map on the main site looks nothing like mine.Here is my site: http://whitetaillandsales.com/
I am trying to change the color of the map, I was able to finally get the hover style to change from the default blue to red, but if I put in the code to change the map color, one cancels out the other. Like I can only have one style.
$('#map').usmap({
stateStyles: {fill: 'blue'}
});
$('#map').usmap({
stateHoverStyles: {fill: 'red'}
});

Also, is there a way to eliminate the box color around the smaller states?

And last but not least, viewing the map on my android phone, nothing happens when you click on the states, only the hover color shows. I have a click event set for each state to go to its own page. Works great on desktop, but does not click on the phone....

Hello,

Is any way to add a tool tip for each state name for when a user hovers over the states? I tried using the code found here to no avail: #31

My map can be found here: http://199.119.123.135/surety-bonds/commercial-bonds/auto_dealer_bond_map.htm

Thanks in advance!

If you attempt to size the containing div with a percentage rather than an explicit pixel-based height/width, the map will be rendered in full size and cut off beyond the size of its containing div, rather than shrinking the map to fit into the div.

iPad is not clearing hoverstate when clicking on a new state. hover state is invoked on click, and stays, so by the time you click on a few states, they're all stuck in the hover state, and won't clear when you click a new one.

Is there a way to have the state abbreviations appear on the map for areas other then just the few labels that can be turned on using showLabels: true?

Is it possible to show a tooltip when the mouse pointer is over a state?

I want to show some infor when the user passes the pointer over a state, each state has a different tooltip content.

I am trying to use something like this plugin:
http://www.opentip.org/

my current code looks like this:

$('#map').usmap({

            'mouseover': function(event, data)
            {
                console.log('Mouse over: ' + data.name);
                //I need to show a tooltip here, this tooltip should be shown for the hovered state
            }
        });

I can't find any mention of a licence in the code, or a separate licence file.

How do you make the state code labels to show up by default on the map?

Greetings,
how would I trigger a highlight, or remove highlight via JQUERY?
Ie, if I would to click something outside the map, how would I add/remove the highlight?

thanks.

Is there a way that I can disable certain states?

I used your API to run the map but for creating a heat map I needed to run a for loop on the state specific styles. Would you be able to help with that ?

Is it possible to tweak the script so that I can have a default click event (as an option) that gets "overridden" with state-specific click events (also as options)? Maybe reversing the order in which events are triggered? Thank you for your help.

Is there anyway to style the states with a gradient?

You've made a very nice plugin.. It does exactly what I am looking for. However, I have not found a way to change the fill color of a state dynamically. It must be possible because the mousein and mouseout events do it. Thanks in advance.

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!

I keep getting this.paper.safari is not function error from line 490. Haven't been able to figure out why. Anyone have a suggestion. Thanks.

click event on state for Ipad/Iphone requires a double touch.

This modification 'fixed' it:
~line 280 (added touchend, touchstart events)
$(this.stateHitAreas[state].node).bind('mouseout touchend', this._onMouseOutProxy);
$(this.stateHitAreas[state].node).bind('click touchend', this._onClickProxy);
$(this.stateHitAreas[state].node).bind('mouseover touchstart', this._onMouseOverProxy);

~line 367 (added touchend, touchstart events)
$(this.labelHitAreas[state].node).bind('mouseout touchend', this._onMouseOutProxy);
$(this.labelHitAreas[state].node).bind('click touchend', this._onClickProxy);
$(this.labelHitAreas[state].node).bind('mouseover touchstart', this._onMouseOverProxy);

Hope that helps someone. Thanks for a great jquery map!

Your map is awesome, thank you! I have a state (or two) that I will want to break up into sections, is there anything you would recommend to make this easier than manually editing points? I work with CAD files (mc9, mcx, DXF,....) so I am no stranger to working with point clouds but was hoping there was something I could use that is better suited for working with this map.

Thank you!

how i can add a pin image in some states ?

thanks in advance

Hi,

I have states defined into database by ID, so for example for California ID is 872.

I want to Pass ID in place of text CA while clicking on california state.

Anyone can help how i could do this?

Thanks In Advance.

Is there a way to put labels on top of the larger states? Say I want "TX" to appear in the middle of the state of Texas.

I tried just positioning a DIV that just contained "TX" but the hover event cannot be passed through the DIV on top of the map so that doesn't seem to work.

Any ideas on how to accomplish this?

Thanks!

When you hover over the state, the colors and effects work great. I've spent some time looking at the JS, but haven't figured out a good way to get the styles of hover to stay on during a click trigger. Anyone have any ideas?

Hi, This script has been super helpful on my project.

However I'm running into one issue. I have it so when a user hovers a state, a little tooltip appears by the mouse with info about the state.
That's working great and looks fantastic, however I've been noticing that it just eats CPU, since I have to repaint the tooltip every time the mouse moves.

I'm wondering if theres a way to find the center of the object that is hovered, and then bind the tooltip object to that as opposed to the mouse position? That way it would only run one repaint per hover. Any thoughts?

I'm running this so far:

mouseover: function(event, data)
        {
            $('.map-hover').removeClass('active');
            $mapinfo.addClass('active');
            $('#'+(data.name)).addClass('active');
            hovered = true;
        },
        mouseout: function(event, data)
        {
            $('.map-hover').removeClass('active');
            $mapinfo.removeClass('active');
            hovered = false;
        },
//etc..

$(document).bind('mousemove', function(e)
        {
            if(hovered)
            {
                lefty = e.pageX -220;
                if(lefty < 220)
                {
                    lefty =  e.pageX +20;
                    $mapinfo.addClass('lefted');
                }
                else
                {
                    $mapinfo.removeClass('lefted');
                }
                $mapinfo.css(
                {
                    left:  lefty,
                    top:   e.pageY
                });
            }

        });