128 lines
3.4 KiB
HTML
128 lines
3.4 KiB
HTML
<?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>
|