JVector Map onRegionClick Event

Question

So in JVector map I need a function that has each region linked to a URL. So if you click on South Africa it will take you to a page with information about South Africa. I know to start with onRegionClick: function () but where to go from there is a mystery to me.

Answer 1

Well, as the documentation says:

onRegionClick

Callback function which will be called when the user clicks the region path. Region code will be passed to the callback as argument.

So each time a region is clicked, the region's code is passed to the handler. Then if the code is all you need on your next page, you could just pass that as is in the query string.

onRegionClick: function (event, code) {
    window.location.href = "yourpage?regionCode=" + code
},

If you need the actual name of the region instead of the code, there is a handy getRegionName method that you could use.

var regionName = map.getRegionName(code);

Answer 2

You can Use this html body

<div class="map_jvector"></div>

and the javascript

        <script>                
            $('.map_jvector').vectorMap({
              map: 'africa',
              backgroundColor: '#ffffff',

              onRegionClick:function(event, code){            
                      var name = (code);                          
                            window.location.replace("http://your url address/"+code+"");
                      },

              series: {
                regions: [{
                  values: gdpData,
                 scale: ['#003471','#009eef', '#0076a3','#0d004c','#f26522','#9e0039'],
                  normalizeFunction: 'polynomial'
                }]
              },
              onRegionTipShow: function(e, el, code){
                el.html(el.html());
              }
            });

        </script>

Change link "your url address" to your link address & the "+code+" is region of JVector Map, if you click on the map province area, it will be to link the region.