I have a function that I use for an interactive map, where I hover an element to show a specific region based on class that matches a country suffix. Im trying to figure out how to select multiple classes to show multiple regions.
Code:
var mapObj = jQuery('#vmap').data('mapObject');
jQuery('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
// event.preventDefault();
var elem = event.target,
evtype = event.type;
if (evtype === 'mouseover') {
mapObj.select(jQuery(elem).attr('class'));
} else {
mapObj.deselect(jQuery(elem).attr('class'));
};
});
};
<ul id="countries">
<li><a class="SE" href="">Sweden</a></li>
<li><a class="DK" href="">Denmark</a></li>
</ul>
I might going this the wrong way, but I would like to target mutiple regions by using several classes:
<li><a class="SE DK" href="">Sweden and Denmark</a></li>
This of course doesn't work but illustrates what I want to do. whats the best approach here?
Example:
jQuery('#vmap').vectorMap({ map: 'world_en', onLabelShow: function (event, label, code) { if (code == 'se') { var countryName = label[0].innerHTML; var html = ['<span class="tooltip-up arrow-down-center">', countryName, ': 50% of production', '</span>' ].join(""); label[0].innerHTML = html; } }, backgroundColor: '#fff', enableZoom: false, color: '#ffffff', hoverOpacity: 0.7, selectedColor: '#666666', showTooltip: true, values: sample_data, scaleColors: ['#C8EEFF', '#006491'], normalizeFunction: 'polynomial', pinMode: 'content', regionsSelectableOne: false, regionsSelectable: false, series: { regions: [{ scale: ['#C8EEFF', '#0071A4'], normalizeFunction: 'polynomial' }] } }); var mapObj = jQuery('#vmap').data('mapObject'); jQuery('#countries').on('mouseover mouseout', 'a:first-child', function (event) { // event.preventDefault(); var elem = event.target, evtype = event.type; if (evtype === 'mouseover') { mapObj.select(jQuery(elem).attr('class')); } else { mapObj.deselect(jQuery(elem).attr('class')); }; });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://www.10bestdesign.com/jqvmap/assets/jqvmaps/jqvmap.css" media="screen" rel="stylesheet" type="text/css"> <script src="https://www.10bestdesign.com/jqvmap/assets/jqvmaps/jquery.vmap.js"></script> <script src="https://www.10bestdesign.com/jqvmap/assets/jqvmaps/maps/jquery.vmap.world.js"></script> <script src="https://www.10bestdesign.com/jqvmap/assets/jqvmaps/jquery.vmap.sampledata.js"></script> <div id="vmap" style="width: 800px; height: 400px;"></div> <ul id="countries"> <li><a class="SE" href="">Sweden</a></li> <li><a class="DK" href="">Denmark</a></li> <li><a class="SE DK" href="">Sweden and Denmark</a></li> </ul>
You can modify your select/deselect
function to accept array of classes, or instead loop the classes and invoke select/deselect
for each class name:
var mapObj = jQuery('#vmap').data('mapObject');
jQuery('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
var elem = event.target;
var countryCodes = jQuery(elem).attr('class').split(/\s+/);
evtype = event.type;
if (evtype === 'mouseover') {
jQuery.each(countryCodes, function(index, code) {
mapObj.select(code);
});
} else {
jQuery.each(countryCodes, function(index, code) {
if (mapObj.isSelected(code)) {
mapObj.deselect(code);
} else {
mapObj.select(code);
mapObj.deselect(code);
}
});
};
});
you can split each class and put in foreach loop so all element will target where that class is exist
var mapObj = jQuery('#vmap').data('mapObject');
jQuery('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
// event.preventDefault();
var elem = event.target,
evtype = event.type;
var attrClass = jQuery(elem).attr('class');
var claArr = attrClass.slit(" ");
jQuery(claArr).each(function(index,values){
if (evtype === 'mouseover') {
mapObj.select(values);
} else {
mapObj.deselect(values);
};
});
if (evtype === 'mouseover') {
mapObj.select(jQuery(elem).attr('class'));
} else {
mapObj.deselect(jQuery(elem).attr('class'));
};
});
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.