JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery-jvectormap-1.1.1.min.js"></script>
<script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery.jvectormap-us.js"></script>
<div id="map"></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;
}
#map {
width: 100%;
height: 500px;
}
JavaScript
$(function () {
//assign markers to a variable
var mapMarkers = [{
latLng: [41.50, -87.37],
name: 'Chicago',
newvalue: '300'
}, {
latLng: [32.46, -96.46],
name: 'Dallas',
newvalue: '301'
}, {
latLng: [36.10, -115.12],
name: 'Las Vegas',
newvalue: '302'
}, {
latLng: [34.3, -118.15],
name: 'Los Angeles',
newvalue: '303'
}, {
latLng: [40.43, -74.00],
name: 'New York City',
newvalue: '304'
}];
$('#map').vectorMap({
map: 'us_aea_en',
zoomOnScroll: false,
hoverOpacity: 0.7,
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
markers: mapMarkers,
onMarkerHover: function (event, index) {
var a = 2;
//retrieve marker by the index and parse the string value as an integer
var newval = parseInt(mapMarkers[index].newvalue);
var b = 2 + newval; //need to get the value from each markers and save the value to newval
alert(b);
}
});
});