Jquery Vector Maps replace cookie onClick

Question

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.

Answer 1

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