The onRegionClick callback contains everything you need to create a dynamic URL. It returns the click event itself, a 2-digit code representing the area you clicked, and the full name of the region you clicked on. For example, if you used the USA map and clicked on the state of Colorado, you will return (regionClickEvent, "co", "Colorado")
In the first example, I built a dynamic url from a region that was clicked and redirected you there. If the name or status code is not part of the URL, you can do something like the second example, where you check in which area you clicked and process it accordingly.
You will need to update the url to suit your needs, but hopefully this will give you an idea.
* * ex. Use the area to create 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 redirected 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"; } })
In the updated course material ... if you do not want to do this in every state, you can do the same check as in onRegionClick, and check the code and see if this is the state that you want to show what the cursor style is on.
Or, if there is a state in which you do not want to appear as clickable, you can kill the event before it fires like this.
onRegionOver: function (event, code, region) { if (code == "tx") event.preventDefault(); else document.body.style.cursor = "pointer"; },
In any case, I hope this helps.