시작 - 첫번째 맵차트 생성해 보기

가장 간단한 맵차트 설정

설치하기를 따라 차트 모듈과 css등을 설치했다면, 최소한의 설정으로 첫번째 맵차트를 생성해 볼 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>RealMap - Tutorial</title>
    <script type="text/javascript" src="../lib/realmap-lic.js"></script>
    <script type="text/javascript" src="../lib/realmap.js"></script>
    <link href="../styles/realmap-style.css" rel="stylesheet" />
  </head>
  <body>
    <div id="realmap" style="width:850px;height:650px;"></div>
    <script type="text/javascript">
      async function createMap() {
        const chart = await RealMap.createChartAsync(document, 'realmap', {
          title: '첫 번째 RealMap',
          map: {
              url: 'https://unpkg.com/realmap-collection/kr-sido-low.geo.json'
          },
          body: {
              projection: 'mercator',
          },
          series: {
              useMapData: true,
              style: {
                stroke: 'white'
              }
          },
          credits: {
              text: '©통계지리서비스',
              url: 'https://sgis.kostat.go.kr',
          },
        });
      }
      createMap();
    </script>
  </body>
</html>

Html 페이지에 맵차트가 표시될 div 엘리먼트를 추가하고 크기를 지정한 후, 설정 정보와 함께 RealMap.createChartAsync를 호출해 차트를 생성한다. 지도 데이터를 url로 가져오므로 비동기 함수인 createChartAsync를 사용해야 한다. 동기 함수인 createChart는 url 옵션을 무시해 지도가 그려지지 않는다 (개발 Guide 참조).

시작 - 첫번째 맵차트 생성해 보기

가장 간단한 맵차트 설정

See Also