svgmap 2.19.2 → 2.20.0

package/dist/svgMap.css

@@ -200,7 +200,12 @@
   stroke-width: 1.5;
 }
 
-.svgMap-tooltip {
+.svgMap-wrapper.svgMap-country-click-callback .svgMap-map-wrapper .svgMap-country {
+  cursor: pointer;
+}
+
+.svgMap-tooltip,
+.svgMap-persistent-tooltip {
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   position: absolute;
   z-index: 2;
@@ -208,32 +213,33 @@
   background: #fff;
   transform: translate(-50%, -100%);
   border-bottom: 1px solid #111;
-  display: none;
   pointer-events: none;
   min-width: 60px;
 }
-.svgMap-tooltip.svgMap-tooltip-flipped {
+.svgMap-tooltip.svgMap-tooltip-flipped,
+.svgMap-persistent-tooltip.svgMap-tooltip-flipped {
   transform: translate(-50%, 0);
   border-bottom: 0;
   border-top: 1px solid #111;
 }
-.svgMap-tooltip.svgMap-active {
-  display: block;
-}
-.svgMap-tooltip .svgMap-tooltip-content-container {
+.svgMap-tooltip .svgMap-tooltip-content-container,
+.svgMap-persistent-tooltip .svgMap-tooltip-content-container {
   position: relative;
   padding: 10px 20px;
 }
-.svgMap-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container {
+.svgMap-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container,
+.svgMap-persistent-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container {
   text-align: center;
   margin: 2px 0 5px;
 }
-.svgMap-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container.svgMap-tooltip-flag-container-emoji {
+.svgMap-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container.svgMap-tooltip-flag-container-emoji,
+.svgMap-persistent-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container.svgMap-tooltip-flag-container-emoji {
   font-size: 50px;
   line-height: 0;
   padding: 25px 0 15px;
 }
-.svgMap-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container .svgMap-tooltip-flag {
+.svgMap-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container .svgMap-tooltip-flag,
+.svgMap-persistent-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container .svgMap-tooltip-flag {
   display: block;
   margin: auto;
   width: auto;
@@ -242,47 +248,56 @@
   background: rgba(0, 0, 0, 0.15);
   border-radius: 2px;
 }
-.svgMap-tooltip .svgMap-tooltip-title {
+.svgMap-tooltip .svgMap-tooltip-title,
+.svgMap-persistent-tooltip .svgMap-tooltip-title {
   white-space: nowrap;
   font-size: 18px;
   line-height: 28px;
   padding: 0 0 8px;
   text-align: center;
 }
-.svgMap-tooltip .svgMap-tooltip-content {
+.svgMap-tooltip .svgMap-tooltip-content,
+.svgMap-persistent-tooltip .svgMap-tooltip-content {
   white-space: nowrap;
   text-align: center;
   font-size: 14px;
   color: #777;
   margin: -5px 0 0;
 }
-.svgMap-tooltip .svgMap-tooltip-content table {
+.svgMap-tooltip .svgMap-tooltip-content table,
+.svgMap-persistent-tooltip .svgMap-tooltip-content table {
   padding: 0;
   border-spacing: 0px;
   margin: auto;
 }
-.svgMap-tooltip .svgMap-tooltip-content table td {
+.svgMap-tooltip .svgMap-tooltip-content table td,
+.svgMap-persistent-tooltip .svgMap-tooltip-content table td {
   padding: 2px 0;
   text-align: left;
 }
-.svgMap-tooltip .svgMap-tooltip-content table td span {
+.svgMap-tooltip .svgMap-tooltip-content table td span,
+.svgMap-persistent-tooltip .svgMap-tooltip-content table td span {
   color: #111;
 }
-.svgMap-tooltip .svgMap-tooltip-content table td:first-child {
+.svgMap-tooltip .svgMap-tooltip-content table td:first-child,
+.svgMap-persistent-tooltip .svgMap-tooltip-content table td:first-child {
   padding-right: 10px;
   text-align: right;
 }
-.svgMap-tooltip .svgMap-tooltip-content table td sup {
+.svgMap-tooltip .svgMap-tooltip-content table td sup,
+.svgMap-persistent-tooltip .svgMap-tooltip-content table td sup {
   vertical-align: baseline;
   position: relative;
   top: -5px;
 }
-.svgMap-tooltip .svgMap-tooltip-content .svgMap-tooltip-no-data {
+.svgMap-tooltip .svgMap-tooltip-content .svgMap-tooltip-no-data,
+.svgMap-persistent-tooltip .svgMap-tooltip-content .svgMap-tooltip-no-data {
   padding: 2px 0;
   color: #777;
   font-style: italic;
 }
-.svgMap-tooltip .svgMap-tooltip-pointer {
+.svgMap-tooltip .svgMap-tooltip-pointer,
+.svgMap-persistent-tooltip .svgMap-tooltip-pointer {
   position: absolute;
   top: 100%;
   left: 50%;
@@ -291,7 +306,8 @@
   height: 10px;
   width: 30px;
 }
-.svgMap-tooltip .svgMap-tooltip-pointer::after {
+.svgMap-tooltip .svgMap-tooltip-pointer::after,
+.svgMap-persistent-tooltip .svgMap-tooltip-pointer::after {
   content: "";
   width: 20px;
   height: 20px;
@@ -302,8 +318,32 @@
   left: 50%;
   transform: translateX(-50%) rotate(45deg);
 }
-.svgMap-tooltip.svgMap-tooltip-flipped .svgMap-tooltip-pointer {
+.svgMap-tooltip.svgMap-tooltip-flipped .svgMap-tooltip-pointer,
+.svgMap-persistent-tooltip.svgMap-tooltip-flipped .svgMap-tooltip-pointer {
   bottom: auto;
   top: -10px;
   transform: translateX(-50%) scaleY(-1);
+}
+
+.svgMap-tooltip {
+  display: none;
+}
+.svgMap-tooltip.svgMap-active {
+  display: block;
+}
+
+.svgMap-persistent-tooltips,
+.svgMap-persistent-tooltip-wrapper {
+  pointer-events: none;
+}
+
+.svgMap-persistent-tooltip-wrapper {
+  overflow: visible;
+}
+
+.svgMap-persistent-tooltip {
+  display: block;
+  left: 0;
+  top: 0;
+  width: max-content;
 }

package/dist/svgMap.js

@@ -2348,6 +2348,15 @@
 	      // Set to true to open the link on mobile devices, set to false (default) to show the tooltip
 	      touchLink: false,
 
+	      // When false, disables hover/touch-following tooltips (not the on-map persistent labels; see persistentTooltips)
+	      showTooltips: true,
+
+	      // 'hover' (default): mouse shows tooltip on enter. 'click': mouse opens tooltip on click; touch/pen unchanged.
+	      tooltipTrigger: 'hover',
+
+	      // Persistent on-map tooltips: an array of country IDs, or a function (countryID, countryValues) => boolean
+	      persistentTooltips: false,
+
 	      // Set to true to show the to show a zoom reset button
 	      showZoomReset: false,
 
@@ -2356,6 +2365,10 @@
 	        return null;
 	      },
 
+	      // Called on country click (pointer released without dragging). Receives
+	      // (countryID, event). Return false to skip opening data.values[*].link.
+	      onCountryClick: null,
+
 	      // Country specific options
 	      countries: {
 	        // Western Sahara: Set to false to combine Morocco (MA) and Western Sahara (EH)
@@ -2395,6 +2408,9 @@
 	    // Wrapper element
 	    this.wrapper = document.getElementById(this.options.targetElementID);
 	    this.wrapper.classList.add('svgMap-wrapper');
+	    if (typeof this.options.onCountryClick === 'function') {
+	      this.wrapper.classList.add('svgMap-country-click-callback');
+	    }
 
 	    // Container element
 	    this.container = document.createElement('div');
@@ -3086,7 +3102,9 @@
 
 	  createMap() {
 	    // Create the tooltip
-	    this.createTooltip();
+	    if (this.options.showTooltips) {
+	      this.createTooltip();
+	    }
 
 	    // Create map wrappers
 	    this.mapWrapper = this.createElement(
@@ -3094,6 +3112,10 @@
 	      'svgMap-map-wrapper',
 	      this.mapContainer
 	    );
+	    this.mapWrapper.style.setProperty(
+	      '--svg-map-country-fill',
+	      this.toHex(this.options.colorNoData)
+	    );
 	    this.mapImage = document.createElementNS(
 	      'http://www.w3.org/2000/svg',
 	      'svg'
@@ -3208,6 +3230,7 @@
 	    }.bind(this);
 
 	    // Add map elements
+	    var countryElements = [];
 	    Object.keys(mapPaths).forEach(
 	      function (countryID) {
 	        var countryData = this.mapPaths[countryID];
@@ -3229,6 +3252,7 @@
 	        countryElement.classList.add('svgMap-country');
 
 	        this.mapImage.appendChild(countryElement);
+	        countryElements.push(countryElement);
 
 	        // Add tooltip when touch is used
 	        function handlePointerMove(e) {
@@ -3244,7 +3268,7 @@
 	            this.hideTooltip();
 	            document
 	              .querySelectorAll('.svgMap-active')
-	              .forEach(el => el.classList.remove('svgMap-active'));
+	              .forEach((el) => el.classList.remove('svgMap-active'));
 	          }
 	        }
 
@@ -3253,29 +3277,40 @@
 	        countryElement.addEventListener(
 	          'pointerenter',
 	          function (e) {
+	            if (
+	              e.pointerType === 'mouse' &&
+	              this.options.showTooltips &&
+	              this.options.tooltipTrigger === 'click'
+	            ) {
+	              return;
+	            }
+
 	            // Only add pointermove listener for non-touch pointers
 	            if (e.pointerType !== 'touch') {
-	              document.addEventListener(
-	                'pointermove',
-	                handlePointerMoveBound,
-	                { passive: true }
-	              );
+	              document.addEventListener('pointermove', handlePointerMoveBound, {
+	                passive: true
+	              });
 	            }
 
 	            document
 	              .querySelectorAll('.svgMap-active')
-	              .forEach(el => el.classList.remove('svgMap-active'));
+	              .forEach((el) => el.classList.remove('svgMap-active'));
 
-	            countryElement.parentNode.appendChild(countryElement);
+	            countryElement.parentNode.insertBefore(
+	              countryElement,
+	              this.persistentTooltipGroup || null
+	            );
 	            countryElement.classList.add('svgMap-active');
 
 	            const countryID = countryElement.getAttribute('data-id');
-	            this.setTooltipContent(this.getTooltipContent(countryID));
-	            this.showTooltip(e);
+	            if (this.options.showTooltips) {
+	              this.setTooltipContent(this.getTooltipContent(countryID));
+	              this.showTooltip(e);
 
-	            // For touch, move tooltip to the touch position and keep it there
-	            if (e.pointerType === 'touch') {
-	              this.moveTooltip(e);
+	              // For touch, move tooltip to the touch position and keep it there
+	              if (e.pointerType === 'touch') {
+	                this.moveTooltip(e);
+	              }
 	            }
 	          }.bind(this)
 	        );
@@ -3294,7 +3329,10 @@
 	          'touchend',
 	          function (e) {
 	            const touch = e.changedTouches[0];
-	            const elementAtEnd = document.elementFromPoint(touch.clientX, touch.clientY);
+	            const elementAtEnd = document.elementFromPoint(
+	              touch.clientX,
+	              touch.clientY
+	            );
 
 	            // Only hide if touch ended outside the country or tooltip
 	            if (
@@ -3305,7 +3343,7 @@
 	              this.hideTooltip();
 	              document
 	                .querySelectorAll('.svgMap-active')
-	                .forEach(el => el.classList.remove('svgMap-active'));
+	                .forEach((el) => el.classList.remove('svgMap-active'));
 	            }
 	          }.bind(this),
 	          { passive: true }
@@ -3316,11 +3354,22 @@
 	          'pointerleave',
 	          function (e) {
 	            if (e.pointerType !== 'touch') {
-	              document.removeEventListener('pointermove', handlePointerMoveBound);
-	              this.hideTooltip();
-	              document
-	                .querySelectorAll('.svgMap-active')
-	                .forEach(el => el.classList.remove('svgMap-active'));
+	              document.removeEventListener(
+	                'pointermove',
+	                handlePointerMoveBound
+	              );
+	              if (
+	                !(
+	                  e.pointerType === 'mouse' &&
+	                  this.options.showTooltips &&
+	                  this.options.tooltipTrigger === 'click'
+	                )
+	              ) {
+	                this.hideTooltip();
+	                document
+	                  .querySelectorAll('.svgMap-active')
+	                  .forEach((el) => el.classList.remove('svgMap-active'));
+	              }
 	            }
 	          }.bind(this)
 	        );
@@ -3340,7 +3389,7 @@
 	            this.hideTooltip();
 	            document
 	              .querySelectorAll('.svgMap-active')
-	              .forEach(el => el.classList.remove('svgMap-active'));
+	              .forEach((el) => el.classList.remove('svgMap-active'));
 	          }.bind(this),
 	          { passive: true }
 	        );
@@ -3364,17 +3413,29 @@
 	      }.bind(this)
 	    );
 
+	    var persistent = this.options.persistentTooltips;
+	    if (
+	      persistent &&
+	      (Array.isArray(persistent) || typeof persistent === 'function')
+	    ) {
+	      this.createPersistentTooltips(countryElements);
+	    }
+
 	    let pointerStart = null;
 	    let activeCountry = null;
 
-	    this.mapImage.addEventListener('pointerdown', e => {
-	      // Ignore right click (on desktop it allows inspecting the chart elements without opening the URL)
-	      if (e.button !== 0) return;
+	    this.mapImage.addEventListener(
+	      'pointerdown',
+	      (e) => {
+	        // Ignore right click (on desktop it allows inspecting the chart elements without opening the URL)
+	        if (e.button !== 0) return;
 
-	      pointerStart = { x: e.clientX, y: e.clientY };
-	    }, { passive: true });
+	        pointerStart = { x: e.clientX, y: e.clientY };
+	      },
+	      { passive: true }
+	    );
 
-	    this.mapImage.addEventListener('pointerup', e => {
+	    this.mapImage.addEventListener('pointerup', (e) => {
 	      // Ignore right click (on desktop it allows inspecting the chart elements without opening the URL)
 	      if (e.button !== 0) return;
 
@@ -3394,31 +3455,137 @@
 
 	      const countryID = countryElement.getAttribute('data-id');
 	      const link = countryElement.getAttribute('data-link');
-	      const target = countryElement.getAttribute('data-link-target');
-	      if (!link) return;
-
+	      const linkTarget = countryElement.getAttribute('data-link-target');
+	      const hasCallback = typeof this.options.onCountryClick === 'function';
+	      const hasLink = !!link;
 	      const isTouch = e.pointerType === 'touch' || e.pointerType === 'pen';
 
+	      const isClickTooltipMouse =
+	        e.pointerType === 'mouse' &&
+	        this.options.showTooltips &&
+	        this.options.tooltipTrigger === 'click';
+
+	      if (!hasLink && !hasCallback && !isClickTooltipMouse) return;
+
+	      if (isClickTooltipMouse && this.options.showTooltips) {
+	        const willNavigate =
+	          hasLink && countryElement.classList.contains('svgMap-active');
+	        const shouldFireCallback = hasCallback && (!hasLink || willNavigate);
+
+	        var callbackResultClick;
+	        if (shouldFireCallback) {
+	          callbackResultClick = this.options.onCountryClick(countryID, e);
+	        }
+
+	        if (hasLink) {
+	          if (callbackResultClick === false) return;
+	          if (countryElement.classList.contains('svgMap-active')) {
+	            if (linkTarget) window.open(link, linkTarget);
+	            else window.location.href = link;
+	          } else {
+	            this.mapImage
+	              .querySelectorAll('.svgMap-country.svgMap-active')
+	              .forEach((el) => el.classList.remove('svgMap-active'));
+	            countryElement.parentNode.insertBefore(
+	              countryElement,
+	              this.persistentTooltipGroup || null
+	            );
+	            countryElement.classList.add('svgMap-active');
+	            this.setTooltipContent(this.getTooltipContent(countryID));
+	            this.showTooltip(e);
+	          }
+	          return;
+	        }
+
+	        if (callbackResultClick === false) return;
+
+	        this.mapImage
+	          .querySelectorAll('.svgMap-country.svgMap-active')
+	          .forEach((el) => el.classList.remove('svgMap-active'));
+	        countryElement.parentNode.insertBefore(
+	          countryElement,
+	          this.persistentTooltipGroup || null
+	        );
+	        countryElement.classList.add('svgMap-active');
+	        this.setTooltipContent(this.getTooltipContent(countryID));
+	        this.showTooltip(e);
+	        return;
+	      }
+
+	      const willNavigate =
+	        hasLink &&
+	        (!isTouch || countryElement.classList.contains('svgMap-active'));
+
+	      const shouldFireCallback =
+	        hasCallback && (!hasLink || !isTouch || willNavigate);
+
+	      var callbackResult;
+	      if (shouldFireCallback) {
+	        callbackResult = this.options.onCountryClick(countryID, e);
+	      }
+
+	      if (!hasLink) return;
+
+	      if (callbackResult === false) return;
+
 	      if (isTouch) {
 	        // Touch: only open if already active
 	        if (countryElement.classList.contains('svgMap-active')) {
-	          if (target) window.open(link, target);
+	          if (linkTarget) window.open(link, linkTarget);
 	          else window.location.href = link;
 	        } else {
-	          // first tap shows tooltip
+	          // first tap shows tooltip (or opens link immediately if tooltips are off)
 	          if (activeCountry) activeCountry.classList.remove('svgMap-active');
 	          activeCountry = countryElement;
 	          countryElement.classList.add('svgMap-active');
-	          this.setTooltipContent(this.getTooltipContent(countryID));
-	          this.showTooltip(e);
+	          if (this.options.showTooltips) {
+	            this.setTooltipContent(this.getTooltipContent(countryID));
+	            this.showTooltip(e);
+	          } else {
+	            if (linkTarget) window.open(link, linkTarget);
+	            else window.location.href = link;
+	          }
 	        }
 	      } else {
 	        // Desktop: open immediately
-	        if (target) window.open(link, target);
+	        if (linkTarget) window.open(link, linkTarget);
 	        else window.location.href = link;
 	      }
 	    });
 
+	    this._clickTooltipOutsideHandler = function (ev) {
+	      if (ev.pointerType !== 'mouse') return;
+	      if (
+	        !this.options.showTooltips ||
+	        this.options.tooltipTrigger !== 'click' ||
+	        !this.tooltip
+	      ) {
+	        return;
+	      }
+	      if (!this.tooltip.classList.contains('svgMap-active')) return;
+	      var node = ev.target;
+	      if (
+	        node &&
+	        node.closest &&
+	        (node.closest('.svgMap-country') || node.closest('.svgMap-tooltip'))
+	      ) {
+	        return;
+	      }
+	      this.hideTooltip();
+	      if (this.mapImage) {
+	        this.mapImage
+	          .querySelectorAll('.svgMap-country.svgMap-active')
+	          .forEach(function (el) {
+	            el.classList.remove('svgMap-active');
+	          });
+	      }
+	    }.bind(this);
+	    document.addEventListener(
+	      'pointerdown',
+	      this._clickTooltipOutsideHandler,
+	      true
+	    );
+
 	    // Expose instance
 	    var me = this;
 
@@ -3484,13 +3651,82 @@
 	    }
 	  }
 
+	  // Create the persistent tooltips
+
+	  createPersistentTooltips(countryElements) {
+	    if (this.persistentTooltipGroup) {
+	      this.persistentTooltipGroup.remove();
+	    }
+
+	    this.persistentTooltipGroup = document.createElementNS(
+	      'http://www.w3.org/2000/svg',
+	      'g'
+	    );
+	    this.persistentTooltipGroup.classList.add('svgMap-persistent-tooltips');
+	    this.mapImage.appendChild(this.persistentTooltipGroup);
+
+	    countryElements.forEach(
+	      function (countryElement) {
+	        var countryID = countryElement.getAttribute('data-id');
+	        if (!this.shouldShowTooltipOnLoad(countryID)) {
+	          return;
+	        }
+
+	        var boundingBox = countryElement.getBBox();
+	        var tooltipPosition = {
+	          x: boundingBox.x + boundingBox.width / 2,
+	          y: boundingBox.y + boundingBox.height / 2
+	        };
+
+	        var tooltipObject = document.createElementNS(
+	          'http://www.w3.org/2000/svg',
+	          'foreignObject'
+	        );
+	        tooltipObject.setAttribute('x', tooltipPosition.x);
+	        tooltipObject.setAttribute('y', tooltipPosition.y);
+	        tooltipObject.setAttribute('width', 1);
+	        tooltipObject.setAttribute('height', 1);
+	        tooltipObject.classList.add('svgMap-persistent-tooltip-wrapper');
+
+	        var tooltipElement = this.createElement(
+	          'div',
+	          'svgMap-persistent-tooltip',
+	          tooltipObject
+	        );
+	        tooltipElement.append(
+	          this.getTooltipContent(countryID, tooltipElement)
+	        );
+	        this.createElement('div', 'svgMap-tooltip-pointer', tooltipElement);
+
+	        this.persistentTooltipGroup.appendChild(tooltipObject);
+	      }.bind(this)
+	    );
+	  }
+
+	  // Check if a persistent tooltip should be shown on load
+
+	  shouldShowTooltipOnLoad(countryID) {
+	    var persistent = this.options.persistentTooltips;
+	    var countryValues = this.options.data.values[countryID];
+
+	    if (Array.isArray(persistent)) {
+	      return persistent.indexOf(countryID) !== -1;
+	    }
+
+	    if (typeof persistent === 'function') {
+	      return persistent(countryID, countryValues);
+	    }
+
+	    return false;
+	  }
+
 	  // Create the tooltip content
 
-	  getTooltipContent(countryID) {
+	  getTooltipContent(countryID, tooltipDiv = this.tooltip) {
 	    // Custom tooltip
 	    if (this.options.onGetTooltip) {
 	      var customDiv = this.options.onGetTooltip(
-	        this.tooltip,
+	        tooltipDiv,
 	        countryID,
 	        this.options.data.values[countryID]
 	      );
@@ -4472,6 +4708,9 @@
 	  // Show the tooltip
 
 	  showTooltip(e) {
+	    if (!this.tooltip) {
+	      return;
+	    }
 	    this.tooltip.classList.add('svgMap-active');
 	    this.moveTooltip(e);
 	  }
@@ -4479,12 +4718,18 @@
 	  // Hide the tooltip
 
 	  hideTooltip() {
+	    if (!this.tooltip) {
+	      return;
+	    }
 	    this.tooltip.classList.remove('svgMap-active');
 	  }
 
 	  // Move the tooltip
 
 	  moveTooltip(e) {
+	    if (!this.tooltip) {
+	      return;
+	    }
 	    var x = e.pageX || (e.touches && e.touches[0] ? e.touches[0].pageX : null);
 	    var y = e.pageY || (e.touches && e.touches[0] ? e.touches[0].pageY : null);