jQuery('#vmap').vectorMap(
{
map: 'world_en',
backgroundColor: null,
borderColor: '#829db2',
borderOpacity: 0.25,
borderWidth: 1,
color: '#f4f3f0',
hoverColor: '#c9dfaf',
hoverOpacity: null,
normalizeFunction: 'linear',
scaleColors: ['#b6d6ff', '#005ace'],
selectedColor: '#c9dfaf',
selectedRegion: null,
showTooltip: true
});
<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>
<div class="hold_it">
<div class="holder">
<span class="pin" style="left: 222px; top: 95px;" alt="Montreal/Quebec/Toronto"></span>
<span class="pin" style="left: 215px; top: 110px;" alt="New York"></span>
<span class="pin" style="left: 188px; top: 106px;" alt="Chicago"></span>
<span class="pin" style="left: 191px; top: 140px;" alt="Orlando"></span>
<span class="pin" style="left: 195px; top: 154px;" alt="Varadero/Havana"></span>
<span class="pin" style="left: 177px; top: 157px;" alt="Riviera Maya"></span>
<span class="pin" style="left: 335px; top: 103px;" alt="Paris/Nante/Mont St-Michel/St-Malo/Caen"></span>
<span class="pin" style="left: 342px; top: 92px;" alt="Amsterdam"></span>
<span class="pin" style="left: 372px; top: 108px;" alt="Bucharest/Iugani"></span>
<span class="pin" style="left: 150px; top: 75px;" alt="Calgary/Banff"></span>
<span class="pin" style="left: 140px; top: 120px;" alt="Las Vegas/Grand Canyon Parc"></span>
<span class="pin" style="left: 525px; top: 150px;" alt="Hong-Kong/Shenzhen/Yangshuo"></span>
<span class="pin" style="left: 524px; top: 103px;" alt="Beijing"></span>
<div class="copyright">designed by ericftremblay.com</div>
<div class="shadow1"></div>
<div class="shadow2"></div>
<div class="shadow3"></div>
<div class="shadow4"></div>
<div id="vmap"></div>
</div>
<div class="bshw-left"><div>
<div class="bshw-right"><div>
</div>
body {
background: #33383b url("http://www.tonysnewyorkstylepizzeria.com/wp-content/uploads/2012/12/Wood-background-black-wallpapers-wallpaper-476440.jpg");
overflow: hidden;
}
#vmap {
z-index: -1000;
width: 700px;
height: 350px;
}
.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;
}
.shadow1 {
z-index: -5;
position: absolute;
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
width: 50%;
height: 50%;
pointer-events: none;
}
.shadow2 {
z-index: -5;
position: absolute;
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
width: 50%;
height: 50%;
left: 50%;
pointer-events: none;
}
.shadow3 {
z-index: -5;
position: absolute;
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
width: 50%;
height: 50%;
top: 50%;
pointer-events: none;
}
.shadow4 {
z-index: -5;
position: absolute;
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
width: 50%;
height: 50%;
top: 50%;
left: 50%;
pointer-events: none;
}
.bshw-left {
bottom: 0;
left: 60px;
float: left;
position: absolute;
z-index: -1000;
width:350px;
height:100px;
border-radius: 45%;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.15),
0 4px 3px hsla(0,0%,0%,.15),
0 15px 6px hsla(0,0%,0%,.2),
0 10px 6px hsla(0,0%,0%,.15);
}
.bshw-right {
bottom: 0;
left: 260px;
float: right;
position: absolute;
z-index: -1000;
width:350px;
height:100px;
border-radius: 45%;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.15),
0 4px 3px hsla(0,0%,0%,.15),
0 15px 6px hsla(0,0%,0%,.2),
0 10px 6px hsla(0,0%,0%,.15);
}
.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: 14px 14px 14px 0;
width: 4px;
height: 4px;
border: 3px solid #f33;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
position: relative;
-webkit-box-shadow: -1px 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: -1px 1px 2px rgba(0,0,0,.2);
box-shadow: -1px 1px 2px rgba(0,0,0,.2);
}
.jqvmap-region
{
cursor: pointer;
}
.pin {
pointer-events: none;
display: inline-block;
width: 8px;
height: 8px;
background-color: #f33;
background-image: -webkit-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
background-image: -moz-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
background-image: -ms-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
background-image: -o-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
background-image: linear-gradient(to bottom, rgba(100,0,0,0), rgba(255,90,90,1));
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
box-shadow: 0 0 0 1px #c00, inset 0 1px 1px rgba(255,255,255,.6), 0 2px 2px rgba(0,0,0,.4);
position: absolute;
cursor: pointer;
}
.pin:after {
pointer-events: none;
height: 10px;
width: 2px;
content:'';
background: #aaa;
display: block;
position: absolute;
z-index: -5;
left: 3px;
top: 100%;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.1),
0 0 1px 1px hsla(0,0%,0%,.2),
0 2px 3px hsla(0,0%,0%,.3),
0 4px 3px hsla(0,0%,0%,.3),
0 6px 6px hsla(0,0%,0%,.1),
2px 10px 6px hsla(0,0%,0%,.7);
}
/*
.pin:hover:after {
background: rgba(0,0,0,.7);
-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: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #fff;
content: attr(alt);
font: 11px "Helvetica Neue", Helvetica, Sans;
text-align: left;
display: block;
padding: 5px 0px 10px 25px;
width: 65px;
text-shadow: 0 -1px 0 #000;
white-space: nowrap;
z-index: 98;
left: -60px;
top: -30px;
}
*/
.copyright {
position: absolute;
bottom: 0;
font: 9px sans-serif;
color: #d6d6d6;
padding: 5px;
}
/*
designed by ericftremblay.com
Javascript by:
http://jqvmap.com/
Inspired by:
http://www.premiumpixels.com/freebies/world-map-pin-psd/
http://cssdeck.com/item/487/css3-map-pins
*/