There is an opensource vector maps for sites called jqvmap
The problem is that using ipad or iphone browser it handles clicks incorrectly. First touch causes onRegionOver event. Second touch causes onRegionClick event.
How can we modify onRegionOver to make it work on ios as 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);
}
});
This is how I would go about it.
First, start by creating a function that detects the type of device being used (Ipad, Iphone, Droid, etc).
function testDevice(){
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
return true;
}else{
return false;
}
}
Next, setup both a regionClick & 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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With