svgmap 2.20.1 → 2.21.0

package/dist/svg-map.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/svg-map.min.css

@@ -1 +1 @@
-.svgMap-container,.svgMap-wrapper{position:relative}.svgMap-block-zoom-notice{position:absolute;z-index:2;top:100%;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);pointer-events:none;opacity:0;color:#fff;transition:opacity 250ms}.svgMap-block-zoom-notice-active .svgMap-block-zoom-notice{pointer-events:all;top:0;opacity:1}.svgMap-block-zoom-notice>div{position:absolute;top:50%;left:0;right:0;text-align:center;padding:0 32px;transform:translateY(-50%);font-size:28px}@media (max-width:900px){.svgMap-block-zoom-notice>div{font-size:22px}}.svgMap-map-wrapper{position:relative;width:100%;padding-top:50%;overflow:hidden;background:#d9ecff;color:#111}.svgMap-map-wrapper *{box-sizing:border-box}.svgMap-map-wrapper :focus:not(:focus-visible){outline:0}.svgMap-map-wrapper .svgMap-map-image{display:block;position:absolute;top:0;left:0;width:100%;height:100%;margin:0}.svgMap-map-wrapper .svgMap-map-controls-wrapper{position:absolute;z-index:1;display:flex;overflow:hidden;border-radius:2px;box-shadow:0 0 0 2px rgba(0,0,0,.1)}.svgMap-map-wrapper .svgMap-map-controls-wrapper.svgMap-controls-position-bottomLeft{bottom:10px;left:10px}.svgMap-map-wrapper .svgMap-map-controls-wrapper.svgMap-controls-position-bottomRight{bottom:10px;right:10px}.svgMap-map-wrapper .svgMap-map-controls-wrapper.svgMap-controls-position-topLeft{top:10px;left:10px}.svgMap-map-wrapper .svgMap-map-controls-wrapper.svgMap-controls-position-topRight{top:10px;right:10px}.svgMap-map-wrapper .svgMap-map-controls-wrapper.svgMap-disabled{display:none}.svgMap-map-wrapper .svgMap-map-controls-move,.svgMap-map-wrapper .svgMap-map-controls-zoom{display:flex;margin-right:5px;overflow:hidden;background:#fff}.svgMap-map-wrapper .svgMap-map-controls-move:last-child,.svgMap-map-wrapper .svgMap-map-controls-zoom:last-child{margin-right:0}.svgMap-map-wrapper .svgMap-control-button{background-color:#fff;border:0;border-radius:0;color:#fff;font:inherit;line-height:inherit;margin:0;padding:0;overflow:visible;text-transform:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;width:32px;height:32px;position:relative}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ccc;transition:background-color 250ms}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button::before{width:11px;height:3px}@media (hover:hover){.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:hover::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:hover::before{background:#000}}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:active::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:active::before{background:#000}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button::before{width:11px;height:11px;background:0 0;border:2px solid #ccc;transition:border-color 250ms}@media (hover:hover){.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button:hover::before{background:0 0;border-color:#000}}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button:active::before{background:0 0;border-color:#000}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-disabled::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-disabled::before{background:#eee}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button.svgMap-disabled{cursor:default}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button.svgMap-disabled::before{border:2px solid #eee;background:0 0}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-in-button::after{width:3px;height:11px}.svgMap-map-wrapper .svgMap-map-continent-controls-wrapper{position:absolute;top:10px;right:10px;z-index:1;display:flex;border-radius:2px;box-shadow:0 0 0 2px rgba(0,0,0,.1)}.svgMap-map-wrapper .svgMap-country{fill:var(--svg-map-country-fill, #E2E2E2);stroke:#fff;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill 250ms,stroke 250ms}.svgMap-map-wrapper .svgMap-country[data-link],.svgMap-wrapper.svgMap-country-click-callback .svgMap-map-wrapper .svgMap-country{cursor:pointer}@media (hover:hover){.svgMap-map-wrapper .svgMap-country:hover{stroke:#333;stroke-width:1.5}}.svgMap-map-wrapper .svgMap-country.svgMap-active{stroke:#333;stroke-width:1.5}.svgMap-persistent-tooltip,.svgMap-tooltip{box-shadow:0 0 3px rgba(0,0,0,.2);position:absolute;z-index:2;border-radius:2px;background:#fff;transform:translate(-50%,-100%);border-bottom:1px solid #111;pointer-events:none;min-width:60px}.svgMap-persistent-tooltip.svgMap-tooltip-flipped,.svgMap-tooltip.svgMap-tooltip-flipped{transform:translate(-50%,0);border-bottom:0;border-top:1px solid #111}.svgMap-persistent-tooltip .svgMap-tooltip-content-container,.svgMap-tooltip .svgMap-tooltip-content-container{position:relative;padding:10px 20px}.svgMap-persistent-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container,.svgMap-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container{text-align:center;margin:2px 0 5px}.svgMap-persistent-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{font-size:50px;line-height:0;padding:25px 0 15px}.svgMap-persistent-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{display:block;margin:auto;width:auto;height:32px;padding:2px;background:rgba(0,0,0,.15);border-radius:2px}.svgMap-persistent-tooltip .svgMap-tooltip-title,.svgMap-tooltip .svgMap-tooltip-title{white-space:nowrap;font-size:18px;line-height:28px;padding:0 0 8px;text-align:center}.svgMap-persistent-tooltip .svgMap-tooltip-content,.svgMap-tooltip .svgMap-tooltip-content{white-space:nowrap;text-align:center;font-size:14px;color:#777;margin:-5px 0 0}.svgMap-persistent-tooltip .svgMap-tooltip-content table,.svgMap-tooltip .svgMap-tooltip-content table{padding:0;border-spacing:0;margin:auto}.svgMap-persistent-tooltip .svgMap-tooltip-content table td,.svgMap-tooltip .svgMap-tooltip-content table td{padding:2px 0;text-align:left}.svgMap-persistent-tooltip .svgMap-tooltip-content table td span,.svgMap-tooltip .svgMap-tooltip-content table td span{color:#111}.svgMap-persistent-tooltip .svgMap-tooltip-content table td:first-child,.svgMap-tooltip .svgMap-tooltip-content table td:first-child{padding-right:10px;text-align:right}.svgMap-persistent-tooltip .svgMap-tooltip-content table td sup,.svgMap-tooltip .svgMap-tooltip-content table td sup{vertical-align:baseline;position:relative;top:-5px}.svgMap-persistent-tooltip .svgMap-tooltip-content .svgMap-tooltip-no-data,.svgMap-tooltip .svgMap-tooltip-content .svgMap-tooltip-no-data{padding:2px 0;color:#777;font-style:italic}.svgMap-persistent-tooltip .svgMap-tooltip-pointer,.svgMap-tooltip .svgMap-tooltip-pointer{position:absolute;top:100%;left:50%;transform:translateX(-50%);overflow:hidden;height:10px;width:30px}.svgMap-persistent-tooltip .svgMap-tooltip-pointer::after,.svgMap-tooltip .svgMap-tooltip-pointer::after{content:"";width:20px;height:20px;background:#fff;border:1px solid #111;position:absolute;bottom:6px;left:50%;transform:translateX(-50%) rotate(45deg)}.svgMap-persistent-tooltip.svgMap-tooltip-flipped .svgMap-tooltip-pointer,.svgMap-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-tooltip-wrapper,.svgMap-persistent-tooltips{pointer-events:none}.svgMap-persistent-tooltip-wrapper{overflow:visible}.svgMap-persistent-tooltip{display:block;left:0;top:0;width:max-content}
+.svgMap-container,.svgMap-wrapper{position:relative}.svgMap-block-zoom-notice{position:absolute;z-index:2;top:100%;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);pointer-events:none;opacity:0;color:#fff;transition:opacity 250ms}.svgMap-block-zoom-notice-active .svgMap-block-zoom-notice{pointer-events:all;top:0;opacity:1}.svgMap-block-zoom-notice>div{position:absolute;top:50%;left:0;right:0;text-align:center;padding:0 32px;transform:translateY(-50%);font-size:28px}@media (max-width:900px){.svgMap-block-zoom-notice>div{font-size:22px}}.svgMap-map-wrapper{position:relative;width:100%;padding-top:50%;overflow:hidden;background:#d9ecff;color:#111}.svgMap-map-wrapper *{box-sizing:border-box}.svgMap-map-wrapper :focus:not(:focus-visible){outline:0}.svgMap-map-wrapper .svgMap-map-image{display:block;position:absolute;top:0;left:0;width:100%;height:100%;margin:0}.svgMap-map-wrapper .svgMap-map-controls-wrapper{position:absolute;z-index:1;display:flex;overflow:hidden;border-radius:2px;box-shadow:0 0 0 2px rgba(0,0,0,.1)}.svgMap-map-wrapper .svgMap-map-controls-wrapper.svgMap-controls-position-bottomLeft{bottom:10px;left:10px}.svgMap-map-wrapper .svgMap-map-controls-wrapper.svgMap-controls-position-bottomRight{bottom:10px;right:10px}.svgMap-map-wrapper .svgMap-map-controls-wrapper.svgMap-controls-position-topLeft{top:10px;left:10px}.svgMap-map-wrapper .svgMap-map-controls-wrapper.svgMap-controls-position-topRight{top:10px;right:10px}.svgMap-map-wrapper .svgMap-map-controls-wrapper.svgMap-disabled{display:none}.svgMap-map-wrapper .svgMap-map-controls-move,.svgMap-map-wrapper .svgMap-map-controls-zoom{display:flex;margin-right:5px;overflow:hidden;background:#fff}.svgMap-map-wrapper .svgMap-map-controls-move:last-child,.svgMap-map-wrapper .svgMap-map-controls-zoom:last-child{margin-right:0}.svgMap-map-wrapper .svgMap-control-button{background-color:#fff;border:0;border-radius:0;color:#fff;font:inherit;line-height:inherit;margin:0;padding:0;overflow:visible;text-transform:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;width:32px;height:32px;position:relative}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ccc;transition:background-color 250ms}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button::before{width:11px;height:3px}@media (hover:hover){.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:hover::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:hover::before{background:#000}}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:active::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button:active::before{background:#000}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button::before{width:11px;height:11px;background:0 0;border:2px solid #ccc;transition:border-color 250ms}@media (hover:hover){.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button:hover::before{background:0 0;border-color:#000}}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button:active::before{background:0 0;border-color:#000}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-disabled::after,.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-disabled::before{background:#eee}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button.svgMap-disabled{cursor:default}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-button.svgMap-zoom-reset-button.svgMap-disabled::before{border:2px solid #eee;background:0 0}.svgMap-map-wrapper .svgMap-control-button.svgMap-zoom-in-button::after{width:3px;height:11px}.svgMap-map-wrapper .svgMap-map-continent-controls-wrapper{position:absolute;top:10px;right:10px;z-index:1;display:flex;border-radius:2px;box-shadow:0 0 0 2px rgba(0,0,0,.1)}.svgMap-map-wrapper .svgMap-country{fill:var(--svg-map-country-fill, #E2E2E2);stroke:#fff;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill 250ms,stroke 250ms}.svgMap-map-wrapper .svgMap-country[data-link],.svgMap-wrapper.svgMap-country-click-callback .svgMap-map-wrapper .svgMap-country{cursor:pointer}@media (hover:hover){.svgMap-map-wrapper .svgMap-country:hover{stroke:#333;stroke-width:1.5}}.svgMap-map-wrapper .svgMap-country.svgMap-active{stroke:#333;stroke-width:1.5}.svgMap-pin-group{pointer-events:none}.svgMap-pin{vector-effect:non-scaling-stroke;transition:r 250ms}.svgMap-persistent-tooltip,.svgMap-tooltip{box-shadow:0 0 3px rgba(0,0,0,.2);position:absolute;z-index:2;border-radius:2px;background:#fff;transform:translate(-50%,-100%);border-bottom:1px solid #111;pointer-events:none;min-width:60px}.svgMap-persistent-tooltip.svgMap-tooltip-flipped,.svgMap-tooltip.svgMap-tooltip-flipped{transform:translate(-50%,0);border-bottom:0;border-top:1px solid #111}.svgMap-persistent-tooltip .svgMap-tooltip-content-container,.svgMap-tooltip .svgMap-tooltip-content-container{position:relative;padding:10px 20px}.svgMap-persistent-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container,.svgMap-tooltip .svgMap-tooltip-content-container .svgMap-tooltip-flag-container{text-align:center;margin:2px 0 5px}.svgMap-persistent-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{font-size:50px;line-height:0;padding:25px 0 15px}.svgMap-persistent-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{display:block;margin:auto;width:auto;height:32px;padding:2px;background:rgba(0,0,0,.15);border-radius:2px}.svgMap-persistent-tooltip .svgMap-tooltip-title,.svgMap-tooltip .svgMap-tooltip-title{white-space:nowrap;font-size:18px;line-height:28px;padding:0 0 8px;text-align:center}.svgMap-persistent-tooltip .svgMap-tooltip-content,.svgMap-tooltip .svgMap-tooltip-content{white-space:nowrap;text-align:center;font-size:14px;color:#777;margin:-5px 0 0}.svgMap-persistent-tooltip .svgMap-tooltip-content table,.svgMap-tooltip .svgMap-tooltip-content table{padding:0;border-spacing:0;margin:auto}.svgMap-persistent-tooltip .svgMap-tooltip-content table td,.svgMap-tooltip .svgMap-tooltip-content table td{padding:2px 0;text-align:left}.svgMap-persistent-tooltip .svgMap-tooltip-content table td span,.svgMap-tooltip .svgMap-tooltip-content table td span{color:#111}.svgMap-persistent-tooltip .svgMap-tooltip-content table td:first-child,.svgMap-tooltip .svgMap-tooltip-content table td:first-child{padding-right:10px;text-align:right}.svgMap-persistent-tooltip .svgMap-tooltip-content table td sup,.svgMap-tooltip .svgMap-tooltip-content table td sup{vertical-align:baseline;position:relative;top:-5px}.svgMap-persistent-tooltip .svgMap-tooltip-content .svgMap-tooltip-no-data,.svgMap-tooltip .svgMap-tooltip-content .svgMap-tooltip-no-data{padding:2px 0;color:#777;font-style:italic}.svgMap-persistent-tooltip .svgMap-tooltip-pointer,.svgMap-tooltip .svgMap-tooltip-pointer{position:absolute;top:100%;left:50%;transform:translateX(-50%);overflow:hidden;height:10px;width:30px}.svgMap-persistent-tooltip .svgMap-tooltip-pointer::after,.svgMap-tooltip .svgMap-tooltip-pointer::after{content:"";width:20px;height:20px;background:#fff;border:1px solid #111;position:absolute;bottom:6px;left:50%;transform:translateX(-50%) rotate(45deg)}.svgMap-persistent-tooltip.svgMap-tooltip-flipped .svgMap-tooltip-pointer,.svgMap-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-tooltip-wrapper,.svgMap-persistent-tooltips{pointer-events:none}.svgMap-persistent-tooltip-wrapper{overflow:visible}.svgMap-persistent-tooltip{display:block;left:0;top:0;width:max-content}

package/dist/svg-map.umd.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);
@@ -3253,7 +3280,7 @@
 	      }
 	      countryElement.parentNode.insertBefore(
 	        countryElement,
-	        this.persistentTooltipGroup || null
+	        this.persistentTooltipGroup || this.pinGroup || null
 	      );
 	      if (setActive) {
 	        countryElement.classList.add('svgMap-active');
@@ -3373,6 +3400,10 @@
 	      this.createPersistentTooltips(countryElements);
 	    }
 
+	    if (this.options.staticPins) {
+	      this.createStaticPins(countryElements);
+	    }
+
 	    let pointerStart = null;
 	    let activeCountry = null;
 
@@ -3435,7 +3466,7 @@
 	            clearActive();
 	            countryElement.parentNode.insertBefore(
 	              countryElement,
-	              this.persistentTooltipGroup || null
+	              this.persistentTooltipGroup || this.pinGroup || null
 	            );
 	            countryElement.classList.add('svgMap-active');
 	            this.setTooltipContent(this.getTooltipContent(countryID));
@@ -3449,7 +3480,7 @@
 	        clearActive();
 	        countryElement.parentNode.insertBefore(
 	          countryElement,
-	          this.persistentTooltipGroup || null
+	          this.persistentTooltipGroup || this.pinGroup || null
 	        );
 	        countryElement.classList.add('svgMap-active');
 	        this.setTooltipContent(this.getTooltipContent(countryID));
@@ -3637,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) {