I want to add a link to certain countries in JQVMap

Question

<html>
  <head>
    <title>JQVMap - World Map</title>
    <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../dist/jquery.vmap.js"></script>
    <script type="text/javascript" src="../dist/maps/jquery.vmap.world.js" charset="utf-8"></script>

    <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery('#vmap').vectorMap({ map: 'world_en' });
    });

    </script>
  </head>
  <body>
    <div id="vmap" style="width: 600px; height: 400px;"></div>
  </body>
</html>

The above code is create a JQVMap . I want to for example: click on USA and have the page go to a specific link. Same for France ...

L L · Answer 1 · 2017-02-04T21:28:10.147

1

Extend the vectormap load code like this:

   jQuery('#vmap').vectorMap({ 
    map: 'world_en',
    onRegionClick: function(element, code, region) {
        if(code == 'us'){
            window.location = "http://www.yoururl.com/US";
        //do something else
        }
        if(code == 'fr'){
            window.location = "http://www.yoururl.com/FR";
        //do something else
        }
    }
    });

And now just replace the URL's with the ones you require. Here you can find a list of all the country codes if needed https://github.com/manifestinteractive/jqvmap/blob/master/REGIONS.md.

edited Feb 04 '17 at 21:28

answered Feb 04 '17 at 20:14

L L

1,440
11
17

you mean like this : – user3303871 Feb 04 '17 at 20:20
yes, just replace `jQuery('#vmap').vectorMap({ map: 'world_en' });` with the code I wrote above. – L L Feb 04 '17 at 20:26
I have tested this now, the code is good but the country codes need to be lowercase and not uppercase, so I changed US and FR to us and fr. Let me know if it works for you :) – L L Feb 04 '17 at 21:27
You are welcome, I would appreciate it if you chose my answer if it solved your problem :) – L L Feb 04 '17 at 22:26

score 0 · Answer 2 · answered Feb 04 '17 at 20:14

0

You can use onRegionClick handler to handle click events.

onRegionClick: function(event, code, region){
        //Do something here
}

And you can find more in the documentation

answered Feb 04 '17 at 20:14

Saurabh Sharma

2,422
4
20
41

score 0 · Answer 3 · answered Feb 04 '17 at 22:41

jQuery('#vmap').vectorMap({ map: 'world_en', onRegionClick: function(element, code, region) { if(code == 'us'){ window.location = "http://www.yoururl.com/US"; //do something else } if(code == 'fr'){ window.location = "http://www.yoururl.com/FR"; //do something else } } });

And now just replace the URL's with the ones you require. Here you can find a list of all the country codes if needed https://github.com/manifestinteractive/jqvmap/blob/master/REGIONS.md.

I want to add a link to certain countries in JQVMap

3 Answers3