YzLxYRV

index.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/svg-pan-zoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/svgMap.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/dist/svgMap.min.css" rel="stylesheet">
<div id="svgMap"></div>

script.js

new svgMap({
  targetElementID: "svgMap",
  colorMax: "#00a884",
  colorMin: "#FFFFFF",  
  colorNoData: "#FFFFFF",
  data: {
    data: {
      rollout: {
        name: "Rollout Percentage",
        format: "{0}% rolled out",
        thousandSeparator: ',',
        thresholdMax: 100,
        thresholdMin: 1,
      }
    },
    applyData: "rollout",
    values: {
      GH: { rollout: 100 },
      PE: { rollout: 100 },
      MY: { rollout: 100 },
      CA: { rollout: 100 },
      BO: { rollout: 100 },
      SA: { rollout: 100 },
      IR: { rollout: 100 },
      IQ: { rollout: 100 },
      OM: { rollout: 100 },
      AR: { rollout: 100 },
      CL: { rollout: 100 },
      CO: { rollout: 100 },
    }
  }
});

style.css

.svgMap-tooltip-content-wrapper {
    font-family: sans-serif
}

yzlxyrv.markdown

YzLxYRV

A Pen by Kevin Christensen on CodePen.

License.