jVectorMap change color

Question

I'm trying to setup a map of US states, I've dropped in a jVectorMap but can't get the color to change no matter what I do.

I have tried to implement my problem in jsfiddle but it doesn't want to do anything over there. On my computer a map generates but the colors just won't change.

http://jsfiddle.net/rsRnj/

The pluging I'm using: http://jvectormap.com/

Anyone have any ideas why I can't change the state colors?

Or, if there is an easier to use map I would take that recommendation too. I basically just want a click able map on my page with colors and hover effects.

EDIT Trying out different map library now, will post results when finished

Beaudoin

jvectormap should work; answer added below. – Dugas

Answer 1

Ended up going with this option instead: http://newsignature.github.com/us-map/

The jVector map looks nice if you have data to overlay, but I just want each state to link to somewhere else on the site.

Beaudoin

Answer 2

Perhaps re-consider going back with jvectormap? If I understand your goal correctly, jvectormap should work fine.

1. On the jvectormap site, the 1.0 version is in use.
   http://jvectormap.com/examples/world-gdp/
   http://jvectormap.com/js/jquery-jvectormap-1.0.min.js https://raw.github.com/bjornd/jvectormap/master/jquery-jvectormap.js (latest version) http://jvectormap.com/js/jquery-jvectormap-us-aea-en.js

2. It seems your fiddle links to the github webpage instead of to a real js file. Also, there's no need to add tags in the javascript section of your fiddle. http://doc.jsfiddle.net/basic/introduction.html#javascript

3. Try to view source on some the site's examples, and also examine the WorldMap section of the 1.0 api: http://jvectormap.com/documentation/javascript-api-v1/jvm-worldmap/

---

working example
Here is a fork of your fiddle that seems to meet your requirements of colors and click events:
http://jsfiddle.net/bQ78b/1/

$(function() {
    $('#usMap').vectorMap({
        map: 'us_aea_en',
        hoverColor: false,
        hoverOpacity: 0.5, 
        onRegionClick: function(e, code){
            alert( code.replace("US-", "") );
        }, 
        regionStyle: {
        initial: {
          fill: '#128da7'
        },
        hover: {
            fill: "#A0D1DC"
          }
      }
    });
});

Hope this helps...

Dugas