jqvmap RegionClick on iphone/ipad

Question

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);
    }
});

Answer 1

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!