svgmap 2.20.0 → 2.21.0

package/dist/svgMap.css

@@ -204,6 +204,15 @@
   cursor: pointer;
 }
 
+.svgMap-pin-group {
+  pointer-events: none;
+}
+
+.svgMap-pin {
+  vector-effect: non-scaling-stroke;
+  transition: r 250ms;
+}
+
 .svgMap-tooltip,
 .svgMap-persistent-tooltip {
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);

package/dist/svgMap.js

@@ -2379,7 +2379,34 @@
 	      showContinentSelector: false,
 
 	      // Reset zoom on resize
-	      resetZoomOnResize: false
+	      resetZoomOnResize: false,
+
+	      // Static pins: false | string[] | function(countryID, countryValues) => boolean
+	      staticPins: false,
+
+	      // Default pin fill color
+	      pinColor: '#000000',
+
+	      // Default pin stroke color and width (circle pins; width is in screen pixels with non-scaling stroke)
+	      pinStrokeColor: '#ffffff',
+	      pinStrokeWidth: 1.5,
+
+	      // Default pin radius in SVG units (viewBox is 2000 × 1001)
+	      pinSize: 8,
+
+	      // Custom pin element: function(countryID, countryValues) => SVGElement | null
+	      onGetPin: null,
+
+	      // Image URL to use as a pin instead of the default circle (can also be set per-country via values[id].pinImage)
+	      pinImage: null,
+
+	      // Width and height of the pin image in SVG units (viewBox is 2000 × 1001)
+	      pinImageWidth: 20,
+	      pinImageHeight: 20,
+
+	      // Offset from computed pin position, in SVG units (added after auto center or pinX/pinY)
+	      pinOffsetX: 0,
+	      pinOffsetY: 0
 	    };
 
 	    this.options = Object.assign({}, defaultOptions, options);
@@ -3231,6 +3258,102 @@
 
 	    // Add map elements
 	    var countryElements = [];
+
+	    const clearActive = function clearActive() {
+	      this.mapImage
+	        .querySelectorAll('.svgMap-active')
+	        .forEach((el) => el.classList.remove('svgMap-active'));
+	    }.bind(this);
+
+	    const isClickTooltip =
+	      this.options.showTooltips && this.options.tooltipTrigger === 'click';
+
+	    const getCountryFromEvent = function (e) {
+	      return e.target && e.target.closest
+	        ? e.target.closest('.svgMap-country')
+	        : null;
+	    };
+
+	    const raiseCountry = function (countryElement, setActive) {
+	      if (setActive) {
+	        clearActive();
+	      }
+	      countryElement.parentNode.insertBefore(
+	        countryElement,
+	        this.persistentTooltipGroup || this.pinGroup || null
+	      );
+	      if (setActive) {
+	        countryElement.classList.add('svgMap-active');
+	      }
+	    }.bind(this);
+
+	    const showCountryTooltip = function (countryElement, e, setActive) {
+	      raiseCountry(countryElement, setActive);
+	      this.setTooltipContent(this.getTooltipContent(countryElement.dataset.id));
+	      this.showTooltip(e);
+	    }.bind(this);
+
+	    // Touch only: preview tooltip on finger down without marking country active
+	    // (active is set on pointerup so link countries keep two-tap navigation)
+	    this.mapImage.addEventListener(
+	      'pointerdown',
+	      (e) => {
+	        if (!this.options.showTooltips || e.pointerType !== 'touch') {
+	          return;
+	        }
+
+	        const countryElement = getCountryFromEvent(e);
+	        if (!countryElement) {
+	          this.hideTooltip();
+	          return;
+	        }
+
+	        showCountryTooltip(countryElement, e, false);
+	        this.moveTooltip(e);
+	      },
+	      { passive: true }
+	    );
+
+	    this.mapImage.addEventListener(
+	      'pointercancel',
+	      (e) => {
+	        if (e.pointerType === 'touch') {
+	          this.hideTooltip();
+	        }
+	      },
+	      { passive: true }
+	    );
+
+	    // Hover (mouse/pen) and touch drag: raise country + optional floating tooltip
+	    this.mapImage.addEventListener(
+	      'pointermove',
+	      (e) => {
+	        const countryElement = getCountryFromEvent(e);
+	        if (!countryElement) {
+	          clearActive();
+	          if (this.options.showTooltips) {
+	            this.hideTooltip();
+	          }
+	          return;
+	        }
+
+	        const mouseClickMode = e.pointerType === 'mouse' && isClickTooltip;
+
+	        // Always raise hovered country (SVG paint order + .svgMap-active stroke)
+	        if (!this.options.showTooltips || mouseClickMode) {
+	          raiseCountry(countryElement, true);
+	          return;
+	        }
+
+	        showCountryTooltip(countryElement, e, true);
+
+	        if (e.pointerType === 'touch') {
+	          this.moveTooltip(e);
+	        }
+	      },
+	      { passive: true }
+	    );
+
 	    Object.keys(mapPaths).forEach(
 	      function (countryID) {
 	        var countryData = this.mapPaths[countryID];
@@ -3248,166 +3371,22 @@
 	          'id',
 	          this.id + '-map-country-' + countryID
 	        );
-	        countryElement.setAttribute('data-id', countryID);
+	        countryElement.dataset.id = countryID;
 	        countryElement.classList.add('svgMap-country');
 
 	        this.mapImage.appendChild(countryElement);
 	        countryElements.push(countryElement);
 
-	        // Add tooltip when touch is used
-	        function handlePointerMove(e) {
-	          if (e.pointerType === 'touch') return;
-
-	          const target = document.elementFromPoint(e.clientX, e.clientY);
-
-	          if (
-	            !target ||
-	            (!target.closest('.svgMap-country') &&
-	              !target.closest('.svgMap-tooltip'))
-	          ) {
-	            this.hideTooltip();
-	            document
-	              .querySelectorAll('.svgMap-active')
-	              .forEach((el) => el.classList.remove('svgMap-active'));
-	          }
-	        }
-
-	        const handlePointerMoveBound = handlePointerMove.bind(this);
-
-	        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
-	              .querySelectorAll('.svgMap-active')
-	              .forEach((el) => el.classList.remove('svgMap-active'));
-
-	            countryElement.parentNode.insertBefore(
-	              countryElement,
-	              this.persistentTooltipGroup || null
-	            );
-	            countryElement.classList.add('svgMap-active');
-
-	            const countryID = countryElement.getAttribute('data-id');
-	            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);
-	              }
-	            }
-	          }.bind(this)
-	        );
-
-	        // Handle touch move - update tooltip position while panning
-	        countryElement.addEventListener(
-	          'touchmove',
-	          function (e) {
-	            this.moveTooltip(e);
-	          }.bind(this),
-	          { passive: true }
-	        );
-
-	        // Handle touch end - remove active state and hide tooltip
-	        countryElement.addEventListener(
-	          'touchend',
-	          function (e) {
-	            const touch = e.changedTouches[0];
-	            const elementAtEnd = document.elementFromPoint(
-	              touch.clientX,
-	              touch.clientY
-	            );
-
-	            // Only hide if touch ended outside the country or tooltip
-	            if (
-	              !elementAtEnd ||
-	              (!elementAtEnd.closest('.svgMap-country') &&
-	                !elementAtEnd.closest('.svgMap-tooltip'))
-	            ) {
-	              this.hideTooltip();
-	              document
-	                .querySelectorAll('.svgMap-active')
-	                .forEach((el) => el.classList.remove('svgMap-active'));
-	            }
-	          }.bind(this),
-	          { passive: true }
-	        );
-
-	        // Remove pointermove listener when leaving non-touch pointer
-	        countryElement.addEventListener(
-	          'pointerleave',
-	          function (e) {
-	            if (e.pointerType !== 'touch') {
-	              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)
-	        );
-
-	        document.addEventListener(
-	          'pointerover',
-	          function (e) {
-	            if (e.pointerType !== 'touch') return;
-
-	            if (
-	              e.target.closest('.svgMap-country') ||
-	              e.target.closest('.svgMap-tooltip')
-	            ) {
-	              return;
-	            }
-
-	            this.hideTooltip();
-	            document
-	              .querySelectorAll('.svgMap-active')
-	              .forEach((el) => el.classList.remove('svgMap-active'));
-	          }.bind(this),
-	          { passive: true }
-	        );
-
 	        if (
 	          this.options.data.values &&
 	          this.options.data.values[countryID] &&
 	          this.options.data.values[countryID]['link']
 	        ) {
-	          countryElement.setAttribute(
-	            'data-link',
-	            this.options.data.values[countryID]['link']
-	          );
+	          countryElement.dataset.link =
+	            this.options.data.values[countryID]['link'];
 	          if (this.options.data.values[countryID]['linkTarget']) {
-	            countryElement.setAttribute(
-	              'data-link-target',
-	              this.options.data.values[countryID]['linkTarget']
-	            );
+	            countryElement.dataset.linkTarget =
+	              this.options.data.values[countryID]['linkTarget'];
 	          }
 	        }
 	      }.bind(this)
@@ -3421,6 +3400,10 @@
 	      this.createPersistentTooltips(countryElements);
 	    }
 
+	    if (this.options.staticPins) {
+	      this.createStaticPins(countryElements);
+	    }
+
 	    let pointerStart = null;
 	    let activeCountry = null;
 
@@ -3453,21 +3436,18 @@
 	      const countryElement = e.target.closest('.svgMap-country');
 	      if (!countryElement) return;
 
-	      const countryID = countryElement.getAttribute('data-id');
-	      const link = countryElement.getAttribute('data-link');
-	      const linkTarget = countryElement.getAttribute('data-link-target');
+	      const countryID = countryElement.dataset.id;
+	      const link = countryElement.dataset.link;
+	      const linkTarget = countryElement.dataset.linkTarget;
 	      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';
+	      const isClickTooltipMouse = e.pointerType === 'mouse' && isClickTooltip;
 
 	      if (!hasLink && !hasCallback && !isClickTooltipMouse) return;
 
-	      if (isClickTooltipMouse && this.options.showTooltips) {
+	      if (isClickTooltipMouse) {
 	        const willNavigate =
 	          hasLink && countryElement.classList.contains('svgMap-active');
 	        const shouldFireCallback = hasCallback && (!hasLink || willNavigate);
@@ -3483,12 +3463,10 @@
 	            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'));
+	            clearActive();
 	            countryElement.parentNode.insertBefore(
 	              countryElement,
-	              this.persistentTooltipGroup || null
+	              this.persistentTooltipGroup || this.pinGroup || null
 	            );
 	            countryElement.classList.add('svgMap-active');
 	            this.setTooltipContent(this.getTooltipContent(countryID));
@@ -3499,12 +3477,10 @@
 
 	        if (callbackResultClick === false) return;
 
-	        this.mapImage
-	          .querySelectorAll('.svgMap-country.svgMap-active')
-	          .forEach((el) => el.classList.remove('svgMap-active'));
+	        clearActive();
 	        countryElement.parentNode.insertBefore(
 	          countryElement,
-	          this.persistentTooltipGroup || null
+	          this.persistentTooltipGroup || this.pinGroup || null
 	        );
 	        countryElement.classList.add('svgMap-active');
 	        this.setTooltipContent(this.getTooltipContent(countryID));
@@ -3554,15 +3530,9 @@
 	    });
 
 	    this._clickTooltipOutsideHandler = function (ev) {
-	      if (ev.pointerType !== 'mouse') return;
-	      if (
-	        !this.options.showTooltips ||
-	        this.options.tooltipTrigger !== 'click' ||
-	        !this.tooltip
-	      ) {
+	      if (!this.tooltip || !this.tooltip.classList.contains('svgMap-active')) {
 	        return;
 	      }
-	      if (!this.tooltip.classList.contains('svgMap-active')) return;
 	      var node = ev.target;
 	      if (
 	        node &&
@@ -3580,11 +3550,6 @@
 	          });
 	      }
 	    }.bind(this);
-	    document.addEventListener(
-	      'pointerdown',
-	      this._clickTooltipOutsideHandler,
-	      true
-	    );
 
 	    // Expose instance
 	    var me = this;
@@ -3667,7 +3632,7 @@
 
 	    countryElements.forEach(
 	      function (countryElement) {
-	        var countryID = countryElement.getAttribute('data-id');
+	        var countryID = countryElement.dataset.id;
 	        if (!this.shouldShowTooltipOnLoad(countryID)) {
 	          return;
 	        }
@@ -3703,6 +3668,157 @@
 	    );
 	  }
 
+	  // Create static pins on the map
+
+	  createStaticPins(countryElements) {
+	    if (this.pinGroup) {
+	      this.pinGroup.remove();
+	    }
+
+	    this.pinGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+	    this.pinGroup.classList.add('svgMap-pin-group');
+	    this.mapImage.appendChild(this.pinGroup);
+
+	    countryElements.forEach(
+	      function (countryElement) {
+	        var countryID = countryElement.getAttribute('data-id');
+	        if (!this.shouldShowPin(countryID)) {
+	          return;
+	        }
+
+	        var countryValues = this.options.data.values[countryID];
+	        var cx, cy;
+
+	        if (
+	          countryValues &&
+	          countryValues.pinX != null &&
+	          countryValues.pinY != null
+	        ) {
+	          cx = countryValues.pinX;
+	          cy = countryValues.pinY;
+	        } else {
+	          // Split the path at absolute M commands and use the largest sub-path
+	          // to avoid overseas territories (islands, colonies) skewing the center.
+	          var d = countryElement.getAttribute('d');
+	          var subPaths = d.split(/(?=M)/).filter((s) => s.trim().length > 0);
+	          var largestBB = null;
+	          var largestArea = -1;
+
+	          subPaths.forEach(
+	            function (subPath) {
+	              var tmp = document.createElementNS(
+	                'http://www.w3.org/2000/svg',
+	                'path'
+	              );
+	              tmp.setAttribute('d', subPath);
+	              this.mapImage.appendChild(tmp);
+	              var bb = tmp.getBBox();
+	              var area = bb.width * bb.height;
+	              if (area > largestArea) {
+	                largestArea = area;
+	                largestBB = bb;
+	              }
+	              this.mapImage.removeChild(tmp);
+	            }.bind(this)
+	          );
+
+	          cx = largestBB.x + largestBB.width / 2;
+	          cy = largestBB.y + largestBB.height / 2;
+	        }
+
+	        var offsetX =
+	          countryValues && countryValues.pinOffsetX != null
+	            ? countryValues.pinOffsetX
+	            : this.options.pinOffsetX;
+	        var offsetY =
+	          countryValues && countryValues.pinOffsetY != null
+	            ? countryValues.pinOffsetY
+	            : this.options.pinOffsetY;
+	        cx += offsetX;
+	        cy += offsetY;
+
+	        var color =
+	          (countryValues && countryValues.pinColor) || this.options.pinColor;
+	        var size =
+	          (countryValues && countryValues.pinSize) || this.options.pinSize;
+	        var strokeColor =
+	          (countryValues && countryValues.pinStrokeColor) ||
+	          this.options.pinStrokeColor;
+	        var strokeWidth =
+	          (countryValues && countryValues.pinStrokeWidth) ||
+	          this.options.pinStrokeWidth;
+
+	        if (typeof this.options.onGetPin === 'function') {
+	          var custom = this.options.onGetPin(countryID, countryValues);
+	          if (custom) {
+	            custom.setAttribute(
+	              'transform',
+	              'translate(' + cx + ',' + cy + ')'
+	            );
+	            this.pinGroup.appendChild(custom);
+	            return;
+	          }
+	        }
+
+	        var pinImage =
+	          (countryValues && countryValues.pinImage) || this.options.pinImage;
+
+	        if (pinImage) {
+	          var pinW =
+	            (countryValues && countryValues.pinImageWidth) ||
+	            this.options.pinImageWidth;
+	          var pinH =
+	            (countryValues && countryValues.pinImageHeight) ||
+	            this.options.pinImageHeight;
+	          var img = document.createElementNS(
+	            'http://www.w3.org/2000/svg',
+	            'image'
+	          );
+	          img.setAttribute('href', pinImage);
+	          img.setAttribute('x', cx - pinW / 2);
+	          img.setAttribute('y', cy - pinH / 2);
+	          img.setAttribute('width', pinW);
+	          img.setAttribute('height', pinH);
+	          img.setAttribute('data-id', countryID);
+	          img.classList.add('svgMap-pin');
+	          this.pinGroup.appendChild(img);
+	          return;
+	        }
+
+	        var circle = document.createElementNS(
+	          'http://www.w3.org/2000/svg',
+	          'circle'
+	        );
+	        circle.setAttribute('cx', cx);
+	        circle.setAttribute('cy', cy);
+	        circle.setAttribute('r', size);
+	        circle.setAttribute('fill', color);
+	        if (strokeWidth > 0) {
+	          circle.setAttribute('stroke', strokeColor);
+	          circle.setAttribute('stroke-width', strokeWidth);
+	          circle.setAttribute('vector-effect', 'non-scaling-stroke');
+	        }
+	        circle.setAttribute('data-id', countryID);
+	        circle.classList.add('svgMap-pin');
+	        this.pinGroup.appendChild(circle);
+	      }.bind(this)
+	    );
+	  }
+
+	  // Check if a static pin should be shown for a country
+
+	  shouldShowPin(countryID) {
+	    var pins = this.options.staticPins;
+	    var countryValues = this.options.data.values[countryID];
+	    if (Array.isArray(pins)) {
+	      return pins.indexOf(countryID) !== -1;
+	    }
+	    if (typeof pins === 'function') {
+	      return pins(countryID, countryValues);
+	    }
+	    return false;
+	  }
+
 	  // Check if a persistent tooltip should be shown on load
 
 	  shouldShowTooltipOnLoad(countryID) {
@@ -4712,6 +4828,23 @@
 	      return;
 	    }
 	    this.tooltip.classList.add('svgMap-active');
+
+	    if (
+	      this.options.showTooltips &&
+	      this.options.tooltipTrigger === 'click' &&
+	      e.pointerType === 'mouse'
+	    ) {
+	      // don't register event listener in the same frame
+	      // to prevent it from being triggered immediately
+	      requestAnimationFrame(() => {
+	        document.addEventListener(
+	          'pointerdown',
+	          this._clickTooltipOutsideHandler,
+	          { once: true, passive: true }
+	        );
+	      });
+	    }
+
 	    this.moveTooltip(e);
 	  }
 
@@ -4721,7 +4854,12 @@
 	    if (!this.tooltip) {
 	      return;
 	    }
+
 	    this.tooltip.classList.remove('svgMap-active');
+	    document.removeEventListener(
+	      'pointerdown',
+	      this._clickTooltipOutsideHandler
+	    );
 	  }
 
 	  // Move the tooltip