jVectorMap

by cristianromagnoli

HTML

<script src="http://jvectormap.com/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="http://jvectormap.com/js/jquery-jvectormap-world-mill-en.js"></script>
<div id="world-map-markers"></div>

<form id="filter" action="" method="">
    <label>Select all<input id="prod-all" type="checkbox" checked /></label>
    <label>Prod 0<input id="prod-0" type="checkbox" /></label>
    <label>Prod 1<input  id="prod-1" type="checkbox" /></label>
    <label>Prod 2<input  id="prod-2" type="checkbox" /></label>
</form>

CSS

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

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

.jvectormap-label{
    position: absolute;
    background-color: #f7f7f7;
    margin-left: -20px;
    padding: 10px;
}

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

JavaScript

var map,
    prodId,
    markers = [
        {
            latLng: [-36.480932, -60.732422],
            name: 'Arroyo Seco',
            products: [0, 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', 'https://cdn2.iconfinder.com/data/icons/pictograms-4/512/35-16.png']
        },
        {
            latLng: [30.031055, 31.245117],
            name: 'El Cairo',
            products: [0, 1],
            images: ['https://cdn2.iconfinder.com/data/icons/pictograms-4/512/39-16.png', 'https://cdn2.iconfinder.com/data/icons/pictograms-4/512/35-16.png', 'https://cdn2.iconfinder.com/data/icons/pictograms-4/512/42-16.png']
        },
        {
            latLng: [40.7142691, -74.0059729],
            name: 'New York',
            products: [0],
            images: ['https://cdn2.iconfinder.com/data/icons/pictograms-4/512/35-16.png', 'https://cdn2.iconfinder.com/data/icons/pictograms-4/512/39-16.png', 'https://cdn2.iconfinder.com/data/icons/pictograms-4/512/42-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: '#DD0000',
        stroke: '#ffffff',
        "stroke-width": 3,
        "stroke-opacity": 0.75,        
      }
    },
    regionStyle: {
      initial: {
        fill: '#666666',
      },
      hover: {
        fill: '#333333',
        "fill-opacity": 1
      }
    },
    onRegionLabelShow: function(event, label, code){
        event.preventDefault();
        $(label).hide();
    },
    onMarkerLabelShow: function(event, label, index){
        var prodList;
        for(var i=0; i < markers[index].images.length; i++){
            prodList +=...