Atlan Map Javascript API

개요

본 사이트는 Atlan Map Javascript API를 이용하는 개발자를 위한 개발 가이드입니다.
Web상에서 사용 가능한 Javascript 프로그래밍 언어로 제작된 버젼이며, 기본적인 API 사용법을 간단한 예제를과 통해 설명합니다.

Atlan Map Javascript API란?

Atlan Map Javascript API는 웹브라우저에 지도를 표시할 수 있는 기본적인 기능들을 제공합니다.
Atlan Map Javascript API는 지도 데이터, 검색 결과, 경로탐색 결과 등을 서버로부터 받아오기 때문에 반드시 네트워크에 연결된 상태에서 실행되어야 합니다.

참고사항

- 좌표계는 UTM-K를 사용합니다.
- 본 API는 인증키(API_KEY)를 발급 받아야 사용하실 수 있습니다.
- 지도를 사용하고자 하는 웹페이지에 Javascript를 include하여 주십시요.
- 본 사이트는 Atlan Map Javascript API V1.3을 기준으로 작성되었습니다.
- 개발 또는 서비스 환경의 방화벽 설정으로 본 API 로 접근이 안될때는 다음의 도메인 및 포트를 방화벽 정책에 추가하여 주십시오.
* 지도API : apis.atlan.co.kr (103.243.203.222)
* 이미지 지도 : map.ecn.cdn.ofs.kr, smap.ecn.cdn.ofs.kr (115.71.28.3)
* port : 80(http), 443(https)
(위 정보는 변경이 일어날수 있는 정보이므로 테스트 시 도메인의 IP를 확인해 주십시오.)

기본 API 사용예제

지도 생성

웹브라우저에 지도를 생성합니다.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Atlan Map
<script type="text/javascript" src="//apis.atlan.co.kr/maps/map.js?key=YOUR_API_KEY"></script>
<script type="text/javascript">
	var map;
	function initialize() {
		var mapOpts = {
		center : new atlan.maps.UTMK(953933.75, 1952050.75),
		zoom : 11
	};
	map = new atlan.maps.Map(document.getElementById('map'), mapOpts);
	};
	window.onload = initialize;
</script>
<body>
	<div id="map" style="width:800px;height:600px;"></div>
</body>
</html>


Note
- Script 태그를 head 태그 사이에 include 합니다.
- 지도가 표시될 div를 생성합니다.
- 지도 처음 로딩시 중심 default 좌표를 지정합니다.(center)
- 지도 처음 로딩시 Default Level을 지정합니다.(zoom)
- window.onload 함수에서 지도 객체를 초기화 합니다.

지도 컨트롤

MapOption을 이용하여 컨트롤 객체를 설정할 수 있습니다.


<script type="text/javascript">
	var map;
	function initialize() {
		var mapOpts = {
		mapTypeId : 'ROADMAP',
		disableDefaultUI : true, // 전체 컨트롤 삭제
		copyrightControl : true, // CopyrightControl 생성
		zoomControl : true, // ZoomControl 생성
		scaleControl : true, // ScaleControl 생성
		center : new atlan.maps.UTMK(965932.5, 1945566),
		zoom : 11
		};
	= new atlan.maps.Map(document.getElementById('map'), mapOpts);
	};
	window.onload = initialize;
</script>

Note

기본 컨트롤을 사용치 않을 때에는 disableDefaultUI 값을 true 로 설정합니다.

변수 설명
disableDefaultUI 기본 컨트롤 생성 여부. 기본값: false
copyrightControl CopyrightControl 생성 여부. 기본값: true.
mapTypeControl MapTypeControl 생성 여부. 기본값: true.
panControl PanControl 생성 여부. 기본값: true.
scaleControl ScaleControl 생성 여부. 기본값: true.
zoomControl ZoomControl 생성 여부. 기본값: true.

마커

지도에 마커를 생성합니다.


<script type="text/javascript">
	var map, marker;
	function initialize() {
		var mapOpts = {
			center : new atlan.maps.UTMK(953933.75, 1952050.75),
			zoom : 11
		};
		= new atlan.maps.Map(document.getElementById('map'), mapOpts);
		marker = new atlan.maps.overlay.Marker({
			position : new atlan.maps.UTMK(953933.75, 1952050.75),
			icon : {
			url : 'http://map.ecn.cdn.ofs.kr/images_20160226/img/marker.png',
			size : new atlan.maps.Size(30, 43)
		},
		map : map,
		title : '서울시청'
	});
	marker.setMap(map);
	};
	window.onload = initialize;
</script>

Note

- 마커는 지도에 위치를 식별합니다.
- 기본적으로 표준 이미지를 사용하지만 아이콘으로 설정할 수 도 있습니다.
- 기본적인 파라미터는 아래 테이블을 참조하십시오

변수 설명
position 마커의 위치 좌표 입니다.(필수)
icon 마커의 아이콘을 지정할 수 있습니다.
map 마커가 표시될 지도를 지정할 수 있습니다.
title 마커의 툴팁 입니다.

정보창

정보창을 표시합니다.


<script type="text/javascript">
	var infoContent = '<h3 class="destination">서울시청</h3>'
	+ '<dl class="basic-box">'
		+ '<dt class="addr-road"><span class="ad-label">신주소</span> <span>서울특별시 중구 세종대로 110 </span></dt>'
		+ '<dd class="addr"><span class="ad-label">구주소</span> <span>서울특별시 중구 태평로1가(명동) 31</span></dd>'
	+ '</dl>'
	+ '<div class="addr-footer">'
		+ '<p class="addr-tel"><span>02) 120</span></p>'
		+ '<p class="btn-set">'
			+ '<a class="btn-style move-start" href="#" data-adcr="to_start">출발</a>'
			+ '<a class="btn-style move-end" href="#" data-adcr="to_start">도착</a>'
		+ '</p>'
	+ '</div>';
	
	var map, marker;
	var initialCenter = new atlan.maps.UTMK(953933.75, 1952050.75);
	window.onload = function() {
		map = new atlan.maps.Map(document.getElementById('map'), {
				center : initialCenter,
				zoom : 11
		});
	
		marker = new atlan.maps.overlay.Marker({
			position : new atlan.maps.UTMK(953933.75, 1952050.75),
			map : map,
			caption : "서울시청",
			title : "Infowindow"
		});
	
		var infowindow = new atlan.maps.overlay.InfoWindow({
			content : infoContent
		});
		
		infowindow.open(map, marker);
		
		marker.onEvent('click', function() {
			infowindow.open(map, marker);
		});
	};
</script>

Note

- 지도 위의 정보창에 컨텐츠(보통 텍스트 또는 이미지)를 표시합니다.
- InfoWindow 클래스의 open 메소드를 이용하여 정보창을 표시합니다.

검색을 요청합니다.


<script type="text/javascript">
	var map, markers = [];
	window.onload = function() {
		map = new atlan.maps.Map(document.getElementById('map'), {
			center : new atlan.maps.UTMK(953933.75, 1952050.75),
			zoom : 11
		});
		
		var keyword = encodeURIComponent('맵퍼스');
		var searchRequest = {
			schType : 0, 			// 0: 통합검색
			keyword : keyword,	// 검색어
			curPosX : 965932.5,	// 현위치 X좌표
			curPosY : 1945566,	// 현위치 Y좌표
			sort : 2,		// 0: 이름순, 1: 거리순, 2: 조회순 , 3: 체크인순 , 4: 추천순-Default
			page : 1,		// 검색결과 페이지 번호
			rows : 10		// 한 페이지에 출력될 검색 결과 건수
		};
		// 검색 요청
		var placeService = new atlan.maps.local.PlaceService("YOUR_API_KEY");
		placeService.search(searchRequest, "search_callback");
	};
		
	function search_callback(searchResult) {
		if (searchResult.ItemCnt != "0") {
			for (var i = 0; i < Number(searchResult.ItemCnt); i++) {
				marker = new atlan.maps.overlay.Marker({
				position : new atlan.maps.LatLng(searchResult.Item[i].PoiY, searchResult.Item[i].PoiX),
					map : map,
					title : searchResult.Item[i].LHCodeNm
				});
				markers.push(marker);
			}
			if (Number(searchResult.ItemCnt) > 0) {
				map.setCenter(new atlan.maps.LatLng(searchResult.Item[0].PoiY, searchResult.Item[0].PoiX));
			}
		}
	}		
</script>

Note

- 통합검색 서비스를 이용할 때에도 인증키(API_KEY)가 필요합니다.
- PlaceService 클래스의 search 메소드를 이용하여 통합검색을 요청합니다.

경로탐색

경로탐색을 요청하고, 탐색 결롸를 표시합니다.


<script type="text/javascript">
	var map;
	var routeType = directionsService = directionsRenderer = null;
	window.onload = function() {
		map = new atlan.maps.Map(document.getElementById('map'), {
			center : new atlan.maps.UTMK(953933.75, 1952050.75),
			zoom : 11
		});
		
		var directionsRendererOptions = {
		map : map,
			keepView : true,
			offMarkers : false,
			offPolylines : false
		};
		
		directionsRenderer = new atlan.maps.local.DirectionsRenderer(directionsRendererOptions);
		
		var directionsRequest = {
			origin : new atlan.maps.UTMK(965937, 1945556),
			destination : new atlan.maps.UTMK(1151394, 1686202),
			waypoints : [],
			routeType : atlan.maps.local.DirectionsRouteType.TYPE_1,
			routeOption : atlan.maps.local.DirectionsRouteOption.OPTION_1
		};
		directionsService = new atlan.maps.local.DirectionsService("YOUR_API_KEY");
		//경로 탐색 요청
		directionsService.route(directionsRequest, "directionsService_callback");
	};
		
	function directionsService_callback(data) {
		var directionsResult = directionsService.parseRoute(data);
		
		if (directionsResult.errcd != 0) {
			alert("경로 검색에 이상이 있습니다.\n잠시 후 다시 이용해 주시기 바랍니다.");
			} else {
			directionsRenderer.removeDirections(); // 기존 경로 삭제
			directionsRenderer.setDirections(directionsResult); // 경로 그리기
		}
	}
</script>

Note

- 경로탐색 서비스를 이용할 때에도 인증키(API_KEY)가 필요합니다.
- DirectionsService 클래스의 route 메소드를 이용하여 경로탐색을 요청합니다.
- DirectionsRenderer 클래스의 setDirections 메소드를 이용하여 경로를 그릴 수 있습니다.