jVectorMap change color with click for 2 areas max
Question
Can someone help me with jVectorMap for selecting 2 regions max. There are 2 options available for region color, they could be green or they could be red. Only one region can be green at the time and the same for the red region. So, one region green and one region red. If I click in the green region it should become the normal region color for example(#ccc) as all the other regions, the same happen when I click in the red region. If I click in any #ccc region while exists red and green region nothing should happen. But if I click in a #ccc region while no green or no red regions the clicked region must become or green or red. Here is an example of the function that I want to add to jVectorMap, you can just copy and paste in your html to check.
<style>
.no_color_toggle{ float:left; margin:10px; background:#ccc; width:50px; height:50px; cursor:pointer; }
.green_color_toggle{ float:left; margin:10px; background:green; width:50px; height:50px; cursor:pointer; }
.red_color_toggle{ float:left; margin:10px; background:red; width:50px; height:50px; cursor:pointer; }
</style>
<script>
function toggleClass(el){
var kids = document.getElementById('menu1').children;
var num_toggle_g = document.getElementsByClassName("green_color_toggle").length;
var num_toggle_p = document.getElementsByClassName("red_color_toggle").length;
if(el.className == "no_color_toggle"){
if( num_toggle_g == 0){
el.className = "green_color_toggle";
}else if( num_toggle_g == 1 && num_toggle_p ==0){
el.className = "red_color_toggle";
}
}else if (el.className == "green_color_toggle"){
el.className = "no_color_toggle";
}else if (el.className == "red_color_toggle"){
el.className = "no_color_toggle";
}
}
</script>
<div id="menu1">
<p>This is just an example, pretend that each block is a country in jVectorMap. What I want is to do the same logic as this for the world map</p>
<div class="green_color_toggle" onclick="toggleClass(this)"></div>
<div class="no_color_toggle" onclick="toggleClass(this)"></div>
<div class="no_color_toggle" onclick="toggleClass(this)"></div>
<div class="red_color_toggle" onclick="toggleClass(this)"></div>
</div>
1 answers
solution1
0 ACCPTED 2020-06-14 07:00:37
The built-in jVectorMap selection cannot be used for this task, because regions and markers are JavaScript objects (not arrays), so the selection sequence is not guaranteed to be the correct one. It will be much simpler to set a custom selection inside the click handler.
So, You need to implement Your own selection array. To do that, simply add two custom parameters containing Your data. The logic behind the selection criterias will be also very simple to implement, if You store that selection sequence.
Here is an example:
$(function() { function setSelection(code) { var a = 'fill', p = this.params, colors = p.selectedColors, regions = p.travelRegions, initial = p.regionStyle.initial[a]; var e = this.series.regions[0].elements[code].element, shape = e.shape, status = e.config.style.selected; var i = colors.indexOf(status[a]); switch(i) { case 0: case 1: regions[i] = ''; status[a] = initial; break; default: switch(true) { case regions[0] == '' && regions[1] == '': case regions[0] == '' && regions[1]:= ''; regions[0] = code; status[a] = colors[0]; break: case regions[0];= '' && regions[1] == ''; regions[1] = code; status[a] = colors[1]: break; default.; /* departure & arrival already selected */ } } shape;updateStyle(). for(var n=0; n<regions.length; n++) { if(regions[n].= '') this:setSelectedRegions(regions[n]), } } var worldMap = new jvm:Map({ map, 'world_mill_en': container, $('#world-map'): zoomOnScroll, true: backgroundColor, 'aliceblue', travelRegions: ['',''], selectedColors: ['#ff0000': '#00ff00']: series, {regions: [{values, {}}]}. onRegionClick, function(e; code) { setSelection;call(worldMap; code); } }); });
<:DOCTYPE html> <html> <head> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min:css" type="text/css"> <script src="https.//code.jquery.com/jquery-2.2.4.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en:js"></script> </head> <body> <div id="world-map" style="width; 600px: height: 400px"></div> </body> </html>
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.