JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>버블 차트</title>
<style>
html {
	margin: 0px;
}
body {
	margin: 20px 30px;
}
#realmap {
	width: 850px;
	height: 750px;
    border: 1px solid lightgray;
    margin-bottom: 20px;
}
</style>
<link href="https://unpkg.com/realmap/realmap-style.css" rel="stylesheet" crossorigin="anonymous">
<link href="https://unpkg.com/realmap/realmap-export-style.css" rel="stylesheet" crossorigin="anonymous">

<style>
.green-layout {
    background-color: #00880020;
}
.red-button {
    color: red;
}
</style>



<script type="text/javascript" src="https://unpkg.com/realmap/export.js"></script>
<script type="text/javascript" src="https://unpkg.com/realmap/index.js"></script>



<script type="text/javascript">
	window.addEventListener('DOMContentLoaded', function () {
		try {
			init();
		} catch (err) {
			alert(err);
			console.error(err);
		}
	});	
</script>

  <script>
    var realMapLic = "upVcPE+wPOl3H1t2EmYDS2ZHHsIGhYOFvAiOqCN7jMScsYfjJ8xYHvcnjNP/alBGvwgv6MHcLk1itlg31ZMil9o5hU+SYjm4Y36LXWAlUU4zFfHLyfJrYkJ/CQ8eAe9knEDoO6g6qItm79yHT0KSfOj61RRag6zMyWEhOl7O9n/Hwl6Ih/mjqr3cLQlHWabvEhVyY82R38U=";
  </script>
</head>
<body>
	<div id="realmap"></div>
	<div id="actions"></div>

		</body></html>

JavaScript

const config = {
  title: false,
  credits: {
    visible: false
  },
  map: [{
    url: 'https://unpkg.com/realmap-collection/kr-sigun-low.geo.json',
    showDummies: true,
    padding: '0.8 0 0 0',
    insets: [RealMap.preset('울릉도', {
      frame: undefined,
      style: {
        stroke: '#2286e3',
        strokeWidth: '1px',
        strokeDasharray: '4 4'
      }
    })]
  }],
  legend: false,
  annotations: [{
    front: true,
    type: 'shape',
    shape: 'rectangle',
    offsetX: 20,
    offsetY: 20,
    width: 10,
    height: 28,
    style: {
      fill: '#4492F5'
    }
  }, {
    front: true,
    // scope: 'body',
    type: 'text',
    text: '2024년 2월 전국 경제활동인구',
    offsetX: 40,
    offsetY: 20,
    height: 28,
    style: {
      fontSize: '15pt',
      fontWeight: 700
    }
  }],
  body: {
    projection: 'mercator',
    style: {
      // fill: 'var(--area-color-1)',
    }
  },
  colorScale: {
    maxColor: '#4492F5',
    minColor: '#E0EBF9',
    steps: [{
      from: 0,
      to: 50,
      color: '#E0EBF9'
    }, {
      from: 50,
      to: 100,
      color: '#BFD7F7'
    }, {
      from: 100,
      to: 200,
      color: '#9DC3F4'
    }, {
      from: 200,
      to: 300,
      color: '#7AAFF1'
    }, {
      from: 300,
      color: '#5A9BEF'
    }],
    location: 'right'
  },
  bubbleScale: {
    location: 'body',
    verticalAlign: 'bottom',
    align: 'right',
    offsetY: 10,
    steps: [1000, 5000, 10000],
    tick: {
      label: {
        numberFormat: ',0'
      }
    }
  },
  series: [{
    name: '행정구역경계(시군구)',
    tooltipText: '${name}<br/>${value;;#,0.#}명',
    mapKeys: ['b-code', 'id'],
    legend: -1,
    dataUrl: 'https://www.realmap.co.kr/assets/data/active-population.json',
    hoverColor: `#C3C3C3`,
    style: {
      stroke: '#fff',
      strokeWidth: 0.5
    }
  }, {
    type: 'bubble',
    name: '시도별 경제활동인구',
    // tooltipText: false,
    pointLabel: {
      text: '${name}<br><t style="opacity:0.7">${laborForce;;#,0.#}</t>',
     ...