<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JQVMap - USA Map</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<!-- Mobile Specific Meta Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
<style>
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#vmap {
width: 100%;
height: 100%;
background-color: #333;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.jqvmap-region {
cursor: default !important;
}
.map-pin {
width: 64px;
height: 50px;
position: absolute;
top: -25px;
left: -32px;
background-size: 32px 32px;
background-repeat: no-repeat;
text-align: center;
background-position: top center;
color: #888;
font-weight: 500;
font-size: 14px;
}
.map-pin span {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
left: 0;
}
.red {
background-image: url('images/marker/red.png');
}
.blue {
background-image: url('images/marker/blue.png');
}
.purple {
background-image: url('images/marker/purple.png');
}
/* Setup basic CSS for Label */
.jqvmap-pin {
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
cursor: default;
}
/* Reposition Labels that are not quite right ( labels are centered in shape, and sometimes need tweaking ) */
#jqvmap1_fl_pin {
margin-left: 5%;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../dist/jquery.vmap.js"></script>
<script type="text/javascript" src="../dist/maps/jquery.vmap.usa.js" charset="utf-8"></script>
<script>
function escapeXml(string) {
return string.replace(/[<>]/g, function (c) {
switch (c) {
case '<': return '\u003c';
case '>': return '\u003e';
}
});
}
jQuery(document).ready(function () {
var pins = {
mo: escapeXml('<div class="map-pin red"><span>MO</span></div>'),
fl: escapeXml('<div class="map-pin blue"><span>FL</span></div>'),
or: escapeXml('<div class="map-pin purple"><span>OR</span></div>')
};
jQuery('#vmap').vectorMap({
backgroundColor: '#333',
borderColor: '#333',
map: 'usa_en',
pins: pins,
color: '#fff',
pinMode: 'content',
hoverColor: null,
selectedColor: '#111',
showTooltip: false,
selectedRegions: ['MO', 'FL', 'OR'],
onRegionClick: function(event){
event.preventDefault();
}
});
});
</script>
</head>
<body>
<div id="vmap"></div>
</body>
</html>
|