svgmap 2.20.1 → 2.21.0

package/README.md

@@ -102,6 +102,17 @@ You can pass the following options into svgMap:
 | `showTooltips` | `boolean` | `true` | When `false`, disables hover and touch-following tooltips only. Persistent on-map labels from `persistentTooltips` are unaffected. On touch devices, countries with a `link` open it on the first tap instead of using the two-tap pattern (first tap preview, second tap navigate). |
 | `tooltipTrigger` | `'hover'`, `'click'` | `'hover'` | How the floating tooltip opens with the **mouse**: `'hover'` opens on mouseenter/mouseleave.`'click'` opens on primary click and closes when clicking outside the map countries or tooltip. Only applies when `showTooltips` is `true`. |
 | `persistentTooltips` | `false`, `array`, `function` | `false` | Persistent tooltips fixed on the map when it loads: an array of country IDs, or a function (`function (countryID, countryValues) { … }`) to decide per country. Independent of `showTooltips`. Best used with `showTooltips: false` or `tooltipTrigger: 'click'`. |
+| `staticPins` | `false`, `array`, `function` | `false` | Static pins on the map at load time: an array of [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) country IDs (e.g. `['DE', 'FR']`), or a function (`function (countryID, countryValues) { … }`) to decide per country. Pins are placed at the geographic center of each country (largest landmass). Independent of `showTooltips`. |
+| `pinColor` | `string` | `'#000000'` | Default fill color for circle pins. Accepts CSS vars, color names, rgb or hex values. Can be overridden per country via `data.values[id].pinColor`. |
+| `pinStrokeColor` | `string` | `'#ffffff'` | Default stroke color for circle pins. Can be overridden per country via `data.values[id].pinStrokeColor`. |
+| `pinStrokeWidth` | `number` | `1` | Default stroke width for circle pins, in screen pixels (non-scaling stroke). Can be overridden per country via `data.values[id].pinStrokeWidth`. Set to `0` for no stroke. |
+| `pinSize` | `number` | `8` | Default radius for circle pins, in SVG units (viewBox is 2000 × 1001). Can be overridden per country via `data.values[id].pinSize`. |
+| `pinImage` | `string` | | Image URL used as a pin instead of the default circle. Can be overridden per country via `data.values[id].pinImage`. |
+| `pinImageWidth` | `number` | `20` | Width of the pin image in SVG units. Can be overridden per country via `data.values[id].pinImageWidth`. |
+| `pinImageHeight` | `number` | `20` | Height of the pin image in SVG units. Can be overridden per country via `data.values[id].pinImageHeight`. |
+| `pinOffsetX` | `number` | `0` | Horizontal offset from the pin position, in SVG units. Added after auto placement or `pinX`/`pinY`. Can be overridden per country via `data.values[id].pinOffsetX`. |
+| `pinOffsetY` | `number` | `0` | Vertical offset from the pin position, in SVG units. Added after auto placement or `pinX`/`pinY`. Can be overridden per country via `data.values[id].pinOffsetY`. |
+| `onGetPin` | `function` | | Custom pin element. Signature: `function (countryID, countryValues) { return svgElement; }`. Return an SVG element (e.g. `<g>`, `<path>`) to use instead of the default circle or image pin. The library positions it at the pin coordinates via `transform`. Return `null` to fall back to the default pin. |
 | `onGetTooltip` | `function` | | Called when a tooltip is created to custimize the tooltip content (`function (tooltipDiv, countryID, countryValues) { return 'Custom HTML'; }`) |
 | `onCountryClick` | `function` | | Called when the user clicks a country (primary button, pointer released without dragging). Signature: `function (countryID, event) { … }`. Use this for custom actions instead of or in addition to `data.values.link`. Return `false` to skip opening the URL when the country has a `link`. On touch devices with a link, the callback runs when the tap would navigate (not on the first tap that only shows the tooltip). Countries show a pointer cursor while this option is set. |
 | `countries` | `object` | | Additional options specific to countries: |
@@ -117,6 +128,17 @@ You can pass the following options into svgMap:
 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`↳ color` | `string` | | Forces a color for this country |
 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`↳ link` | `string` | | An URL to redirect to when clicking the country |
 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`↳ linkTarget` | `string` | | The target of the link. By default the link will be opened in the same tab. Use `'_blank'` to open the link in a new tab |
+| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`↳ pinColor` | `string` | | Pin fill color for this country (circle pins only) |
+| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`↳ pinStrokeColor` | `string` | | Pin stroke color for this country (circle pins only) |
+| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`↳ pinStrokeWidth` | `number` | | Pin stroke width for this country, in screen pixels (circle pins only) |
+| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`↳ pinSize` | `number` | | Pin radius for this country (circle pins only) |
+| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`↳ pinX` | `number` | | Pin X position in SVG units; use with `pinY` to override auto placement |
+| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`↳ pinY` | `number` | | Pin Y position in SVG units; use with `pinX` to override auto placement |
+| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`↳ pinOffsetX` | `number` | | Horizontal offset from the pin position, in SVG units (after auto placement or `pinX`/`pinY`) |
+| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`↳ pinOffsetY` | `number` | | Vertical offset from the pin position, in SVG units (after auto placement or `pinX`/`pinY`) |
+| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`↳ pinImage` | `string` | | Image URL used as the pin for this country |
+| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`↳ pinImageWidth` | `number` | | Width of the pin image for this country |
+| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`↳ pinImageHeight` | `number` | | Height of the pin image for this country |
 | `countryNames` | `object` | | An object with the [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) country code as key and the country name as value |
 ---
 

package/dist/index.cjs

@@ -2375,7 +2375,34 @@ class svgMap {
       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);
@@ -3249,7 +3276,7 @@ class svgMap {
       }
       countryElement.parentNode.insertBefore(
         countryElement,
-        this.persistentTooltipGroup || null
+        this.persistentTooltipGroup || this.pinGroup || null
       );
       if (setActive) {
         countryElement.classList.add('svgMap-active');
@@ -3369,6 +3396,10 @@ class svgMap {
       this.createPersistentTooltips(countryElements);
     }
 
+    if (this.options.staticPins) {
+      this.createStaticPins(countryElements);
+    }
+
     let pointerStart = null;
     let activeCountry = null;
 
@@ -3431,7 +3462,7 @@ class svgMap {
             clearActive();
             countryElement.parentNode.insertBefore(
               countryElement,
-              this.persistentTooltipGroup || null
+              this.persistentTooltipGroup || this.pinGroup || null
             );
             countryElement.classList.add('svgMap-active');
             this.setTooltipContent(this.getTooltipContent(countryID));
@@ -3445,7 +3476,7 @@ class svgMap {
         clearActive();
         countryElement.parentNode.insertBefore(
           countryElement,
-          this.persistentTooltipGroup || null
+          this.persistentTooltipGroup || this.pinGroup || null
         );
         countryElement.classList.add('svgMap-active');
         this.setTooltipContent(this.getTooltipContent(countryID));
@@ -3633,6 +3664,157 @@ class svgMap {
     );
   }
 
+  // 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) {