SOP JavaScript 를 가장 쉽게 배울 수 있는 방법은 간단한 예제를 한번 작성해 보는 것입니다.
아래에 기술된 HTML페이지는 서울시 종로구 경복궁을 중심으로 지도를 출력합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>SOP JavaScript : Map Simple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://sgisapi.kostat.go.kr/OpenAPI3/auth/javascriptAuth?consumer_key=[발급받은 서비스키]"></script>
</head>
<body>
<div id="map" style="width:500px; height:500px;"></div>
<script type="text/javascript">
var map = sop.map('map');
map.setView(sop.utmk(953820, 1953437), 9);
</script>
</body>
</html>
웹브라우저에 지도를 표출하기 위해서는 먼저 Javascript API를 불러와야 합니다.
위의 스크립트 태그를 <head> 또는 <body> 태그 안에 넣습니다.
단, 실행코드 보다 먼저 선언되어야 합니다.
서비스키는 인증키 신청을 통해 발급받을 수 있습니다.
다음으로 지도를 표출할 영역을 생성해야 합니다.
웹페이지에서 지도를 출력하기 위해서는 지도가 그려질 영역을 확보해야 합니다.
이를 위해 일반적으로 div 엘리먼트를 DOM에 추가하고 이 엘리먼트의 레퍼런스를 활용합니다.
위의 예제에서는 "map" 을 아이디로 갖는 <div> 엘리먼트를 생성하고, CSS Style 속성을 이용해서 크기를 지정했습니다.
다음으로 지도를 표출할 영역을 생성해야 합니다.
지도를 나타내는 Javascript 클래스는 sop.Map 클래스입니다. 이클래스는 객체는 웹페이지 내에서 하나의 지도를 정의합니다.
물론, 페이지 내에서 하나 이상의 Map 객체를 생성할 수 있으며, 이때 각각의 Map 객체는 서로 다른 지도를 나타냅니다.
맵 객체를 생성할 때, sop.map 함수에 파라미터로 웹페이지 내에 맵이 출력될 영역에 해당하는 <div>의 엘리먼트 아이디를 넣습니다.
이렇게 생성된 맵 객체에 setView 함수로 센터좌표와 줌 레벨을 설정하여 실제 지도를 화면에 표출합니다.
센터좌표는 UTMK 좌표계를 사용하며, 좌표는 위도(latitude) 와 경도(longitude) 순으로 넣고, 다음으로 줌 레벨을 지정해줍니다.