Im using jQuery Vector Maps v1.5.0 in my application. The idea is to display a Map and when people click on a country an application cookie with country name is created.
At this moment I create the following code:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap(
{
map: 'world_en',
onRegionClick: function (element,code,region,event)
{
if (
code == "AF" ||
code == "AL" ||
code == "DZ" ||
code == "AO" ||
code == "ZW")
event.preventDefault();
else onClick().replace(Cookie::queue('geo', code,'3600'));
},
onRegionOver:function(event, code, region){
if (
code == "AF" ||
code == "AL" ||
code == "DZ" ||
code == "AO" ||
code == "ZW")
{ document.body.style.cursor ="default";}
else
{ document.body.style.cursor ="pointer"; }
},
onRegionOut:function(element, code, region){
document.body.style.cursor ="default";
}
});
});
</script>
where onClick().replace(Cookie::queue('geo', code,'3600'));
must create the cookie if actual code != with clicked country.
At this moment I cannot make it work in this way. the cookie is not created. any help appreciated, im a newbie with javascript.
Below You will find a working demo. First of all, please be aware that all codes shall be lower-case. Moreover, i believe there is no need to trap the unwanted region codes in all map events, as we can simply disable the user interaction for these, and set a grayed style directly to the SVG shape.
Here is the whole script:
$(document).ready(function() {
var worldMap,
excludeCountries = ["af", "al", "dz", "ao", "zw"],
disabledColor = "#aaaaaa",
cookieName = "geo";
function setCookie(name, value, minutes) {
var date = new Date(),
time = date.getTime();
date.setTime(time + minutes * 60 * 1000);
var expiration = date.toGMTString();
document.cookie = name + "=" + value + "; expires=" + expiration + "; path=/";
}
function getCookie(name) {
var tokens = document.cookie.split(';'),
key = name + "=";
for (var i = 0, l = tokens.length; i < l; i++) {
var token = tokens[i].trim();
if (~token.indexOf(key)) {
return token.substring(key.length);
}
}
return null;
}
function getCountryName(code) {
var path = JQVMap.maps["world_en"].paths[code];
return path && path.name;
}
var fromCountryCode = getCookie(cookieName) || "";
worldMap = jQuery('#vmap').vectorMap({
map: "world_en",
backgroundColor: "#f0f8ff",
borderColor: '#000000',
borderOpacity: 0.9,
color: "#88ee87",
hoverOpacity: 0.8,
selectedColor: "#aa0000",
selectedRegions: [fromCountryCode],
enableZoom: true,
showTooltip: true,
onRegionClick: function(e, code, name) {
$("#message").text("Your Country: " + name);
setCookie(cookieName, code, 60); // minutes
}
});
$.each(excludeCountries, function(i, code) {
var path = worldMap.countries[code];
if (worldMap.canvas.mode === "svg") {
path.setAttribute("fill", disabledColor)
path.setAttribute("original", disabledColor);
path.setAttribute("class", "disabled-country");
path.onclick = path.onmouseover = function(e) {
e.stopImmediatePropagation();
};
} else {
// no support for ltie11 https://github.com/manifestinteractive/jqvmap/issues/183
}
});
var fromCountryName = getCountryName(worldMap.selectedRegions[0]),
msg = fromCountryName ? "Welcome back from " + fromCountryName : "Please choose your Country";
$("#message").text(msg);
});
Explanation: load the example, click on a country and refresh the browser page.
The whole stuff is done client-side, but - just guessing from Your answers - I believe You won't have any problem to read information from your cookie server-side, by using PHP or Laravel, for instance.
Plunker: https://plnkr.co/edit/SvgjWTtoqmKjDYwKfg6u?p=preview