JQVMap Click function

Question

Its a very easy question and I am not web professional. I need to create an Interactive Map. I am using JQVMap. Now I need to click region and it will callback an URL of the state. I am giving and function that was given as example in the site. But I dont know how to setup the link with State and URLs.

jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap({
        map: 'usa_en',
        backgroundColor: '#ffffff',
        color: '#333333',
        hoverColor: '#af090f',
        selectedColor: '#0076a3',
        enableZoom: true,
        showTooltip: true,
        scaleColors: ['#C8EEFF', '#006491'],
        onRegionClick: function(element, code, region)
        {
            var message = 'You clicked "'
                + region 
                + '" which has the code: '
                + code.toUpperCase();

            alert(message);
        }
    });
});

what do you want the action to be? Do you want to return the url as a string? Do you want it to automatically redirect you to that url? Open an iframe from that URL? And what is the format of your URL? Is it consistent like http://www.yoursite.com/stateCode? — hardba11, Sep 15 '12 at 02:25
I want just automatically redirect to a URL that is correspond with that state. Thank You for reply. The URL you given is not opening. — Devil's Dream, Sep 20 '12 at 09:37

hardba11 · Accepted Answer · 2012-09-28T21:25:48.147

The onRegionClick callback contains everything you need to build your dynamic URL. It returns the click event itself, a 2 digit code representing the region you clicked, and the full name of the region you clicked. If you were using the US map for example and clicked on the state of Colorado, you would get back (regionClickEvent,'co','Colorado')

In the first example I built a dynamic url out of the region that was clicked and redirected you there. If the state name or code is not going to be part of the URL, you could do something like the second example where you check what region was clicked and handle it accordingly.

You will need to update the URL to be specific to your needs, but hopefully this gives you and idea.

* * ex.Use the region to build the url on the fly * *

$('#vmap')
    .vectorMap({
    map: 'usa_en',
    onRegionClick: function (event, code, region) {
        window.location.replace("http://geology.com/state-map/" + region.toLowerCase() + ".shtml");
    }
})

* * ex.Check the region that was clicked and redirect based on some other rules * *

$('#vmap')
    .vectorMap({
    map: 'usa_en',
    onRegionClick: function (event, code, region) {
        switch (code) {
        case "co":
            window.location.replace("http://www.google.com");
            break;
        case "ca":
            window.location.replace("http://www.yahoo.com");
            break;
        case "tx":
            window.location.replace("http://www.bing.com");
            break;
            }
        },
    onRegionOver: function (event, code, region) {
       document.body.style.cursor = "pointer";
        },
    onRegionOut: function (element, code, region) {
           document.body.style.cursor = "default";
        }
})

On the updated cursor stuff...if you don't want to do it on every state, you can do the same check like we do onRegionClick, and check the code and see if it is a state that you want to show that style cursor on.
Or, if there is a state that you don't want to appear as clickable you could kill the event before it fires like this.

onRegionOver: function (event, code, region) {
     if (code == "tx") 
          event.preventDefault();
     else 
          document.body.style.cursor = "pointer";
},

Anyway, Hope this helps.

Hello @ColoradoRockie Can you help me little more? I'd like the mouse to turn from a pointer into a hand upon hover so the user knows it's clickable. I have changed the css like the following .jqvmap-region { cursor: hand; cursor: pointer; } — Devil's Dream, Sep 28 '12 at 19:20

JQVMap Click function

1 Answers1