Jqvmap RegionClick on iphone / ipad

Question

There is a list of open source vector maps for sites called jqvmap

The problem is that when using the ipad or iphone browser, it does not handle clicks correctly. The first touch raises the RegionOver event. The second contact raises the onRegionClick event.

How can we change onRegionOver to make it work with ios as a click?

jQuery('#vmap').vectorMap( { map: 'world_en', backgroundColor: '#a5bfdd', borderColor: '#818181', borderOpacity: 0.25, borderWidth: 1, color: '#f4f3f0', enableZoom: true, hoverColor: '#c9dfaf', hoverOpacity: null, normalizeFunction: 'linear', scaleColors: ['#b6d6ff', '#005ace'], selectedColor: '#c9dfaf', selectedRegion: null, showTooltip: true, onRegionClick: function(element, code, region) { var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase(); alert(message); } }); 

Answer 1

This is how I do it.

First, start by creating a function that determines the type of device you are using (iPad, Iphone, Droid, etc.).

 function testDevice(){ if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { return true; }else{ return false; } } 

Then configure the regionClick and regionOver event.

 jQuery('#vmap').vectorMap( { map: 'world_en', backgroundColor: '#a5bfdd', borderColor: '#818181', borderOpacity: 0.25, borderWidth: 1, color: '#f4f3f0', enableZoom: true, hoverColor: '#c9dfaf', hoverOpacity: null, normalizeFunction: 'linear', scaleColors: ['#b6d6ff', '#005ace'], selectedColor: '#c9dfaf', selectedRegion: null, showTooltip: true, onRegionClick: function(element, code, region) { if(!testDevice()){ //not mobile device var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase(); alert(message); } }, onRegionOver: function(element, code, region) { if(testDevice()){ //mobile device var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase(); alert(message); } } }); 

DEMO:

http://jsfiddle.net/V79hw/5/

Hope this helps!