js

  

  // $('.wrapper-big-map').append('<div class="tooltip-svg-click"><div class="tooltip-svg-content"><span class="tooltip-close">X</span><h2 class="tooltip-heading"></h2></div><span class="arrow"></span></div>');

  var tooltip = $('.tooltip-map');

  $('g[id^=region_]').on('click', function (e) {

    var tt = $(this).attr('id');

    // $('.tooltip-svg-click').remove();
    tooltip.addClass('hide-tooltip');
    if (!tooltip.hasClass('show-tooltip')) {
      tooltip.css({
        left: 'auto',
        top: 'auto'
      })
    }



    console.log(tt);

    // var t = $(this).offset().top - $('.wrapper-maps').offset().top,
    //   l = $(this).offset().left - $('.wrapper-maps').offset().left;

    var bbox = $(this)[0].getClientRects();
    // var bbox = $(this)[0].getBBox();
    var l = bbox.x;
    var t = bbox.y;
    var h = bbox.height;
    var w = bbox.width;
    // l = l + (w/2);
    // t =  t + (h/2);



    var divPos = {};
    var offset = $(".wrapper-big-map").offset();
    divPos = {
      left: e.pageX - offset.left,
      top: e.pageY - offset.top + 7
    };

    l = divPos.left;
    t = divPos.top;


    // console.log($(this).offset().top);
    // console.log($(this).offset().left);

    //getBoundingClientRect().left;
    // map_element_slug
    var jsonURL = "http://localhost:8888/adeus/wp-json/wp/v2/cpt_territories?slug=" + tt;
    var result = [];
    $.ajax({
      url: jsonURL,
      format: "json",
      async: false,
      success: function (results) {
        result = results[0];
      }
    });

    var dataTitle = result.title.rendered;
    var dataContent = result.content.rendered;
    var img = result._links['wp:featuredmedia'];

    $('.wrapper-big-map .tooltip-img').html('');
    $('.wrapper-big-map .tooltip-heading').html(dataTitle);
    $('.wrapper-big-map .tooltip-content').html(dataContent);

    if (img !== undefined) {

      var jsonImg = img[0].href;
      $.getJSON(jsonImg, function (data) {
        console.log("success");
        $('.wrapper-big-map .tooltip-img').html('<img src="' + data.media_details.sizes.thumbnail.source_url + '" >');
        tooltip.addClass('show-tooltip').removeClass('hide-tooltip');
      });
    } else {
      tooltip.addClass('show-tooltip').removeClass('hide-tooltip');
    };

    tooltip.css({
      'left': l,
      'top': t
    });


  });




  // hide tooltip
  document.addEventListener('click', function (e) {
    if (e.target.className === 'tooltip-close') {

      e.target.parentElement.parentElement.classList.remove(["show-tooltip"]);
      // e.target.parentElement.parentElement.style.left = 'auto';
      // e.target.parentElement.parentElement.style.top = 'auto';

    }
  }, false);




  var LightenColor = function (color, percent) {
    var num = parseInt(color, 16),
      amt = Math.round(2.55 * percent),
      R = (num >> 16) + amt,
      B = (num >> 8 & 0x00FF) + amt,
      G = (num & 0x0000FF) + amt;

    return (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (B < 255 ? B < 1 ? 0 : B : 255) * 0x100 + (G < 255 ? G < 1 ? 0 : G : 255)).toString(16).slice(1);
  };

  let mouseTarget = document.querySelectorAll('[id^="region_"] path');

  mouseTarget.forEach(element => {
    var styleBase = '';
    element.addEventListener('mouseenter', (e) => {
      // var stylePath = $(this).children('path').attr('style');
      styleBase = element.getAttribute('style');
      if (typeof styleBase !== null) {
        var regex = '^fill:#[a-zA-Z0-9]{6}';
        var color = styleBase.match(regex);
        // color = LightenColor(color[0], 10);
        color = 'rgba(190, 8, 127 , 0.14)';
        element.style.fill = color;
      }

    });

    element.addEventListener('mouseleave', (e) => {
      element.style = styleBase;
    })
  });