Save JQVMap as PNG

Testing html2canvas with JQVMap

HTML

<script src="http://jqvmap.com/js/vmap/jquery.vmap.js"></script>
<script src="http://jqvmap.com/js/vmap/jquery.vmap.world.js"></script>
<script src="http://jqvmap.com/js/vmap/jquery.vmap.sampledata.js"></script>
<script src="http://www.demo.gr/map/jqvmap/maps/continents/jquery.vmap.africa.js"></script>
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.svg.min.js"></script>
<script src="https://rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
<h3 class="fiddle-header"><a href="http://stackoverflow.com/questions/25937696/save-jvectormap-as-a-png-from-the-browser" target="_blank">SO 25937696</a> - Save JQVMap as PNG</h3>
<button id="export">Export</button>
<div class="hold_it">
    <div class="holder">
        <div id="vmap"></div>
    </div>
</div>

CSS

body {
    background: #33383b url("http://upload.wikimedia.org/wikipedia/commons/e/e1/Small_wooden_twigs.jpg");
    overflow: hidden;
}
.fiddle-header {
    background-color: #ccc;
    margin:0 0 10px 0;
    text-align: center;
    color: #fff;
    font-family: sans-serif;
}
#vmap {
    z-index: -1000;
    width: 700px;
    height: 350px;
}
#export {
    position:fixed;
    right:0;
    bottom:0;
    background-color: orange
}
.holder {
    width: 700px;
    height: 350px;
    overflow: hidden;
    position: relative;
    z-index: 1000;
    border: dashed 3px #829db2;
    background-color:#a4bed9;
    background-image: -webkit-linear-gradient(#9bb3cf 1px, transparent 1px), -webkit-linear-gradient(0, #9bb3cf 1px, transparent 1px);
    -moz-linear-gradient(#9bb3cf 1px, transparent 1px), -moz-linear-gradient(0, #9bb3cf 1px, transparent 1px);
    background-size:44px 44px;
}
.hold_it {
    padding: 6px;
    background: #fff;
    display: inline-block;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2);
    position: absolute;
    top:50%;
    left:50%;
    margin:-160px -350px;
    border-radius: 4px;
}


.jqvmap-label {
    background: rgba(0, 0, 0, .7);
    position: absolute;
    display: none;
    -webkit-box-shadow: inset 0px -10px 10px rgba(0, 0, 0, .7), 0px 0px 0px 1px rgba(0, 0, 0, 1), inset 0px 1px 0px 0px rgba(255, 255, 255, .3);
    -moz-box-shadow: inset 0px -10px 10px rgba(0, 0, 0, .7), 0px 0px 0px 1px rgba(0, 0, 0, 1), inset 0px 1px 0px 0px rgba(255, 255, 255, .3);
    box-shadow: inset 0px -10px 10px rgba(0, 0, 0, .7), 0px 0px 0px 1px rgba(0, 0, 0, 1), inset 0px 1px 0px 0px rgba(255, 255, 255, .3);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #fff;
    color: white;
    font: 11px"Helvetica Neue", Helvetica, Sans;
    padding: 5px 10px 5px 8px;
    z-index: 2000;
}
.jqvmap-label:before {
    margin-right: 5px;
    content:'';
    background: transparent;
    display: inline-block;
    border-radius:...

JavaScript

var map_obj = {
    map: 'world_en',
    backgroundColor: '#fff',
    borderColor: '#bbb',
    borderOpacity: 1,
    borderWidth: .2,
    color: '#bbb',
    //colors: colored_regions,
    hoverOpacity: 0.8,
    selectedColor: '#666666',
    enableZoom: true,
    showTooltip: true,
    values: sample_data,
    scaleColors: ['#C8EEFF', '#006491'],
    normalizeFunction: 'polynomial',
    onLabelShow: function (event, label, code) {
        if (code == 'ca') {
            event.preventDefault();
        } else if (code == 'ru') {
            label.text('Bears, vodka, balalaika');
        }
    },
    onRegionOver: function (element, code, region) {
        //highlightRegionOfCountry(code);
    },
    onRegionOut: function (element, code, region) {
        //unhighlightRegionOfCountry(code);
    },
    onRegionClick: function (element, code, region) {
        console.log(region, sample_data[code]);
        $('.fiddle-header').text(region + ': ' + sample_data[code]);
    }
};
$('#vmap').vectorMap(map_obj);

    $("#export").click(function() { 
        var w = window.open('', "", "width="+$("#vmap").width()+", height="+$("#vmap").height()+", scrollbars=yes");
        $('.jqvmap-zoomin, .jqvmap-zoomout').hide();
        html2canvas($("#vmap"), {
            onrendered: function(canvas) {
                // Print PNG on current page
                // document.body.appendChild(canvas);
    
                // Print PNG on popup window
                $(w.document.body).html(canvas);
                $('.jqvmap-zoomin, .jqvmap-zoomout').show();
            }
        }, "image/png");
    });