JVector Map onRegionClick Event

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.

Answers:

Answer

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

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.