jVectorMap customization

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<link rel="stylesheet" href="http://jvectormap.com/css/jquery-jvectormap-2.0.3.css">
<script src="http://jvectormap.com/js/jquery-jvectormap-2.0.3.min.js"></script>
<script src="http://jvectormap.com/js/jquery-jvectormap-world-mill-en.js"></script>
<form>
    <label for="country">Select a country:</label>
    <select name="country" id="country">
        <option>Select Country</option>
    </select>
    <button id="dataButton">Add more data</button>
</form>

<div id="map"  style="width: 600px; height: 400px"></div>
<div id="colorScale">Color Scale: </div>

<div id="country">

    <div id="details"></div>
    <div id="products"></div>
</div>
<button id="allCountries">List All</button>
<label for="countryFilter">Filter Countries:</label>        
<select id="countryFilter" name="countryFilter"></select>

<table border="1">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Flag</th>
            <th>path</th>
        </tr>
    </thead>
    <tbody id="countryTableBody"></tbody>
</table>

JavaScript

$(function() {

    var mapData = {
        "AF": 16.63,
        "AL": 11.58,
        "CD": 5.2,
        "CN": 200,
        "DZ": 158.97,
        "LY": 300,
        "PK": 74.77,
        "IQ": 45,
        "IR": 30
    };

    var colorScale = ['#f0f0f0', '#C8EEFF', '#0071A4', '#FFA500'];

    $(colorScale).each(function(index, obj) {
        $("#colorScale").append('<span style="width:20px;height20px;background-color:' + obj + '">' + obj + '</span>');
    });


    $('#map').vectorMap({
        map: 'world_mill_en',
        hoverOpacity: 0.7,
        hoverColor: false,
        regionsSelectable: true,
        markersSelectable: true,
        
        series: {
            regions: [
                {
                scale: colorScale,
                attribute: 'fill',
                normalizeFunction: 'polynomial',
                values: mapData}]
        },
        hoverOpacity: 0.7,
        hoverColor: true,
        onRegionLabelShow: regionLabelShow,
        //onRegionOver: regionOver,
        //onRegionClick: regionClick,
        onRegionSelected: regionSelected
    });

    populateCountrySelectOptions();

    //When a country selection is made, select it on the map
    $('#country').change(countryChange);

    $('#dataButton').click(function() {
        //This can be used to add more data points, filing colors. Need to see how to reset. map.reset() was not working....   
        getMap().series.regions[0].setValues({
            "MX": 100,
            "US": 300,
            "CA": 200
        });
        return false;
    });

    //convert object into an array, also put the object "key" value as the "code" member variable of the array item
    var allCountriesArray = $.map(getMap().mapData.paths, function(value, key) {
        value.code = key;
        value.flag = getFlagImgSrc(key);
        return value;
    });

    /* Compile markup string as a named template */
    $.template("countryTableRow", "<tr><td>${code}</td><td>${name}</td><td><img...