Search code examples
javascriptjquerysvgmappingjvectormap

Showing Country/state data in jVectorMap

I must admit that I am new to jQuery and JS but I really like the cool things you can do with jVectorMap. But so far I failed to add one thing: On mouseover/hover normally the name of the state or country is shown. Is it possible to add the related data (e.g. the GDP value)? And / or is it possible to add a legend with the color values of the countries/states? Thanks a lot! Claus

Solution

  • Using the data visualization example you could add in a callback function to show the related figure for the chosen state code. So if your data looked like:

    var gdpData = {"ca":34.56 ...}

    Then you could do something like...

    $('#map').vectorMap({
    colors: colors,
    hoverOpacity: 0.7,
    hoverColor: false,
    onLabelShow: function(event, label, code){
       label.text(label.text() + " (" + gdpData[code] + ")");
    }
});