JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://jvectormap.com/js/jquery-jvectormap-1.0.min.js"></script>
<script src="http://jvectormap.com/js/jquery-jvectormap-us-aea-en.js"></script>
<div id="usMap" style="width: 600px; height: 400px"></div>
CSS
.jvectormap-label {
position: absolute;
display: none;
border: solid 1px #CDCDCD;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #292929;
color: white;
font-family: sans-serif, Verdana;
font-size: smaller;
padding: 3px;
}
.jvectormap-zoomin, .jvectormap-zoomout {
position: absolute;
left: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #292929;
padding: 3px;
color: white;
width: 10px;
height: 10px;
cursor: pointer;
line-height: 10px;
text-align: center;
}
.jvectormap-zoomin {
top: 10px;
}
.jvectormap-zoomout {
top: 30px;
}
JavaScript
$(function() {
function testDevice(){
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
return true;
}else{
return false;
}
}
$('#usMap').vectorMap({
map: 'us_aea_en',
hoverColor: false,
hoverOpacity: 0.5,
onRegionClick: function(element, code)
{
if(!testDevice()){ //not mobile device
var message = 'You clicked "'
+ '" which has the code: '
+ code.toUpperCase();
alert(message);
}
},
onRegionOver: function(element, code)
{
if(testDevice()){ //mobile device
var message = 'You clicked "'
+ '" which has the code: '
+ code.toUpperCase();
alert(message);
}
},
regionStyle: {
initial: {
fill: '#128da7'
},
hover: {
fill: "#A0D1DC"
}
}
});
});