jVectorMap Posta

HTML

<script src="http://jamesflorentino.github.io/nanoScrollerJS/javascripts/overthrow.min.js"></script>
<script src="http://jamesflorentino.github.io/nanoScrollerJS/javascripts/jquery.nanoscroller.js"></script>
<link rel="stylesheet" href="http://jamesflorentino.github.io/nanoScrollerJS/css/nanoscroller.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.js"></script>
<div id="world-map-markers"></div>

<form id="prod-filter" action="" method="">
    <fieldset class="select-all-toggle">
        <label class="select-all custom-checkbox">Select all<input id="prod-all" type="checkbox" checked /></label>
    </fieldset>
    <fieldset class="product-items">
        <label class="product-item custom-checkbox"><span class="icon-business"></span>Prod 0<input id="prod-0" type="checkbox" /></label>
        <label class="product-item custom-checkbox"><span class="icon-business"></span>Prod 1<input  id="prod-1" type="checkbox" /></label>
        <label class="product-item custom-checkbox"><span class="icon-business"></span>Prod 2<input  id="prod-2" type="checkbox" /></label>
    </fieldset>
</form>

CSS

#world-map-markers{
    position: relative;
    width: 550px;
    height: 300px;
}

#world-map-markers .jvectormap-container{
   background: url('http://4.bp.blogspot.com/-c0ggPNs8KBM/Tkx_neiOlfI/AAAAAAAACU4/v10qtqUd_EA/s1600/tileable_nopepad_patterns_free.jpg') repeat 0 0; 
}

.jvectormap-label{
    position: absolute;
    background-color: #f7f7f7;
}

.jvectormap-label .tooltip-title{
    display: block;
}

#world-map-markers .jvectormap-zoomin, #world-map-markers .jvectormap-zoomout{
    position: absolute;
    left: 10px;
    top: 10px;
    background-color: rgba(145, 145, 145, 0.64);
    color: #FFF;
    box-shadow: 1px 1px 2px #999;
    border: 1px solid #858585;
    border-radius: 3px;
    height: 18px;
    padding: 0 4px 0 4px;
    text-align: center;
    cursor: pointer;
}

#world-map-markers .jvectormap-zoomin:hover, #world-map-markers .jvectormap-zoomout:hover{
    background-color: #999;
}

#world-map-markers .jvectormap-zoomout{
    top: 40px;
}

/*Filter*/

#prod-filter{
    width: 125px;
}

#prod-filter fieldset{
    padding: 5px;
}

#prod-filter .custom-checkbox{
    display: block;
    background: url('http://lorempixel.com/40/10') no-repeat 95px 5px;
}

#prod-filter .product-items .custom-checkbox .icon-business{
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    background: #F00;
}

#prod-filter .custom-checkbox.unchecked{
    background-position: 67px 5px;
}

#prod-filter .custom-checkbox input[type="checkbox"]{
    /*opacity: 0;*/
}

JavaScript

var map,
    prodId,
    markers = [
        {
            latLng: [-38.416097, -63.616672],
            name: 'Argentina',
            products: [0, 1],
            images: ['http://cdn2.iconfinder.com/data/icons/pictograms-4/512/39-16.png', 'https://cdn2.iconfinder.com/data/icons/pictograms-4/512/42-16.png']
        },
        {
            latLng: [37.09024, -95.712891],
            name: 'USA',
            products: [1],
            images: ['http://cdn2.iconfinder.com/data/icons/pictograms-4/512/35-16.png']
        },
        {
            latLng: [46.227638, 2.213749],
            name: 'France',
            products: [1, 2],
            images: ['https://cdn2.iconfinder.com/data/icons/pictograms-4/512/39-16.png', 'https://cdn2.iconfinder.com/data/icons/pictograms-4/512/42-16.png']
        },
        {
            latLng: [40.463667, -3.74922],
            name: 'Spain',
            products: [],
            images: []
        },
        {
            latLng: [26.820553, 30.802498],
            name: 'Egypt',
            products: [0, 1, 2],
            images: ['http://cdn2.iconfinder.com/data/icons/pictograms-4/512/39-16.png', 'https://cdn2.iconfinder.com/data/icons/pictograms-4/512/42-16.png', 'http://cdn2.iconfinder.com/data/icons/pictograms-4/512/39-16.png']
        },
        {
            latLng: [-25.274398, 133.775136],
            name: 'Australia',
            products: [0, 2],
            images: ['https://cdn2.iconfinder.com/data/icons/pictograms-4/512/42-16.png', 'http://cdn2.iconfinder.com/data/icons/pictograms-4/512/39-16.png']
        }
    ]
;

map = new jvm.WorldMap({
    container: $('#world-map-markers'),
    map: 'world_mill_en',
    markers: markers,
    markerStyle: {
      initial: {
        fill: '#bd0000',
        stroke: '#ffffff',
        "fill-opacity": 1,
        "stroke-width": 3,
        "stroke-opacity": 0.75,
        r: 6
      },
      hover: {
        fill: '#eeeeee',
        stroke: '#333333',
        "stroke-width":...