Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jqvmap RegionClick on iphone/ipad

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);
    }
});
like image 816
Константин Рекунов Avatar asked Dec 05 '12 23:12

Константин Рекунов


1 Answers

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!

like image 145
Dom Avatar answered Oct 18 '22 00:10

Dom