jqueryonclickjvectormapjqvmap

Jquery Vector Maps replace cookie onClick


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.


Solution

  • 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