—
Ep.7
지도 API란 무엇인가
지도 API(Application Programming Interface)란 웹사이트와 모바일 애플리케이션 등에서 활용하여 지도를 제작하고 컨트롤할 수 있도록 제공하는 서비스입니다. 위치 정보를 기반으로 지도 위에 마커 및 폴리 라인 등을 추가하여 사용자의 목적에 맞는 지도를 제작하고 시각화할 수 있습니다. 배경으로 일반 지도, 항공 지도 등 다양한 형태의 지도를 제공합니다.
- 이미지 지도와 벡터지도
국내 대부분의 지도 API는 이미지 기반 형태의 지도를 제공하고 있습니다. 하지만, MapboxGL, TOMTOM, HERE 등 유수의 글로벌 기업에서는 벡터 지도를 사용한 지도 API를 제공하고 있습니다. 아이나비시스템즈는 글로벌 트렌드에 맞춰 지도 API 3.0 서비스를 통해 벡터 지도와 이미지 지도를 함께 제공합니다. 이미지 지도와 벡터 지도의 차이에 대해 알아보도록 하겠습니다.
1) 이미지 지도
이미지 지도는 다수의 픽셀이 모여 이미지 타일을 구성하고, 이미지 타일을 조합하여 전체 지도가 구성되는 방식입니다. 이미지를 활용하기 때문에 고해상도 서비스가 가능하다는 장점이 있지만, 컬러 정보 등 이미지에 포함되는 정보를 모두 저장하기 때문에 용량이 크다는 단점이 있습니다. 또한 지도 서비스 이용 시 특정 위치를 확대할 경우 벡터 지도 대비 로딩 속도가 느려 이미지, 더 나아가서는 지도 화면 자체가 깨져 보이는 현상이 발생할 수 있습니다.
2) 벡터 지도
벡터 지도는 픽셀이 아닌 점, 선, 다각형과 같은 지리 공간 벡터 데이터들이 모여 벡터 타일을 구성하고, 전체 지도가 구성되는 방식입니다. 벡터 데이터를 기반으로 3D 입체 서비스를 제공하기 때문에 다양한 방향으로 지도 전환이 가능합니다. 또한 이미지를 저장하고 불러오는 것이 아닌 벡터 데이터 기반으로 데이터를 저장하기 때문에 이미지 대비 용량의 크기가 작아 고해상도 지도를 지원하며, 빠른 지도 로드 및 효율적인 캐싱이 가능해 특정 위치를 확대할 경우에도 손상 없이 지도를 확인할 수 있습니다. 또한 추가적인 데이터 조합이 가능해 개인 혹은 기업 맞춤형 제작이 용이하다는 장점이 있습니다.
2. 아이나비 지도 API 3.0
위에서 기술한 바와 같이, 아이나비시스템즈 지도 API 3.0은 벡터 지도를 지원합니다. 벡터 지도를 활용할 경우 개인만의 커스텀 지도와 시각화된 정보를 제공받을 수 있습니다.
다양한 지도 서비스 제작이 가능한 아이나비시스템즈 지도 API 3.0의 특장점을 소개하겠습니다.
1) 지도 스타일 커스텀
지도 스타일 커스텀 서비스는 개인 혹은 기업의 서비스 목적에 따라 지도의 주기, 레이어 등을 자유롭게 편집하여 활용하는 서비스입니다. 즉, 지도를 개인의 스타일에 맞춰 제작하여 서비스할 수 있습니다.
2) 데이터 시각화
지도 API를 통해 수집된 정보들은 빅데이터 분석과 통계를 바탕으로 한 데이터 선별 과정을 거쳐 다양한 형태의 지도 정보로 시각화할 수 있습니다. 이러한 정보들은 추후 재방문율, 인기 장소 표출 등 다양한 조건으로 활용이 가능합니다.
3) 지도 정보 서비스 활용
마커, 피처, 라벨, 팝업 등 230개 이상의 지도 정보 서비스 활용을 위한 풍부한 기능을 제공합니다.
AppKey 발행부터 지도 생성까지의 과정
- 아이나비 지도 API AppKey 발행 방법
아이나비 지도 API AppKey 발행은 iMPS (iNAVI Maps Platform Service) 가이드사이트에서 이용 가능합니다.
2. 발급받은 AppKey 사용하여 iNAVI 지도 생성하기
Javascript 기반 아이나비 웹 지도 API를 사용하기 위해 필요한 작업을 설명합니다.
① 지도를 표시할 엘리먼트 생성
- 지도를 표시하려면 웹 페이지에 지도를 위한 영역을 만들어줘야 합니다.
<div id="map" style="width:500px;height:500px"></div>② 지도를 초기화할 함수를 선언
- API 불러오기가 끝나야 API를 사용할 수 있으므로, 이를 가능하게 하기 위해 지도 초기화 기능을 실행할 함수를 선언합니다.
<script>
function initMap() {
// 지도 초기화
var map = new inavi.maps.Map({
container: "map",
});
}
</script>③ 인증 스크립트 추가
- 지도를 사용하기 위한 API를 불러오는 과정입니다.
iMPS에서 발급받은 AppKey 와 API를 사용해 지도를 초기화할 함수를 준비합니다.
<script src="https://maps.inavi.com/maps/v3.0/appkeys/{appkey}/maps?callback=initMap">④ 지도 생성
- 일반 지도를 생성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>지도 생성하기</title>
<style>
#map {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
const map = new inavi.maps.Map({
center: [127.110749, 37.402158],
container: "map",
zoom: 13
});
}
</script>
<script type="text/javascript" src="API인증URL&callback=initMap"></script>
</body>
</html>
마커, 피처 객체 생성 방법
1. 마커 생성하기
- 지도상에 아이콘과 같은 마커를 추가할 수 있습니다.
new inavi.maps.Marker - 필수 옵션 설정
: map: 마커가 표시될 지도 설정
: position: 마커를 표출하고 싶은 좌표 정보를 설정 - 별도의 icon을 지정하지 않는다면, 기본 마커로 설정이 됩니다.
- 부가 옵션 설정
let markerOptions = {
anchor: "bottom", // 마커의 좌표가 위치할 기준점
offset: [0, 0], // 좌표를 기준으로 이동할 픽셀 단위의 오프셋
draggable: false, // 드래그 가능 여부
position: map.getCenter(), // 기본 위치는 지도의 중심입니다.
zIndex: 0, // 마커의 z-index
opacity: 1, // 마커의 투명도
};마커 생성하기 예시
function initMap() {
const map = new inavi.maps.Map({
center: [127.110749, 37.402158],
container: "map",
zoom: 13,
});
const marker = new inavi.maps.Marker({
map: map,
position: map.getCenter(),
});
}
2. 피처 생성하기
- 원, 폴리곤, 폴리라인 등의 피처를 추가할 수 있습니다.
① 원 생성
new inavi.maps.Circle
- 필수 옵션 설정
: map: 원이 표시될 지도 설정
: position: 원의 중심 좌표 정보를 설정
: radius: 원의 반지름 설정 - Style Option 설정
style: {
fillColor: "#000000", //원의 채우기 색상
fillOpacity: 1, //원의 채우기 투명도
fillOutlineColor: "#000000", //원의 테두리 색상
},② 폴리곤 생성
new.inavi.maps.Polygone
- 필수 옵션 설정
: map: 폴리곤이 표시될 지도 설정
: path: 폴리곤의 좌표 배열 설정
→ 폴리곤이 생성되기 위해서는 첫 좌표와 마지막 좌표가 일치해야 합니다. - Style Option 설정
style: {
fillColor: "#000000", //폴리곤의 채우기 색상
fillOpacity: 1, //폴리곤의 채우기 투명도
fillOutlineColor: "#000000", //폴리곤의 테두리 색상
},③ 폴리라인 생성
new.inavi.maps.Polyline
- 필수 옵션 설정
: map: 폴리라인이 표시될 지도 설정
: path: 폴리라인 좌표 배열 설정 - Style Option 설정
style: {
lineColor: "#000000", //폴리라인의 색상
lineOpacity: 1, //폴리라인의 투명도
lineWidth: 1, //폴리라인의 두께
lineOffset: 0, //폴리라인의 오프셋, 양수인 경우 라인의 오른쪽에, 음수 인 경우 라인의 왼쪽에 오프셋을 설정
lineBlur: 0, //폴리라인의 블러
lineDashArray: [1, 1] //대시 패턴을 설정하며, 대시의 길이는 두께에 비례
};④ 피처 생성하기 예시
function initMap() {
const map = new inavi.maps.Map({
center: [127.102766, 37.401576],
container: "map",
zoom: 13,
});
const circle = new inavi.maps.Circle({
map: map,
position: [127.110749, 37.402158],
radius: 0.5,
style: {
fillOpacity: 0.7,
fillColor: "#F20554",
fillOutlineColor: "#DB4455",
},
});
const polygon = new inavi.maps.Polygon({
map: map,
path: [
[127.083712, 37.410439],
[127.097960, 37.410439],
[127.097960, 37.404371],
[127.083712, 37.404371],
[127.083712, 37.410439],
],
style: {
fillOpacity: 0.8,
fillColor: "#4772F9",
fillOutlineColor: "#031B80",
},
});
const polyline = new inavi.maps.Polyline({
map: map,
path: [
[127.092982, 37.398985],
[127.097616, 37.392711],
[127.108689, 37.392916],
[127.093067, 37.398934],
],
style: {
lineColor: "#FF1E00",
lineWidth: 8,
lineDasharray: [1, 1],
},
});
}
이 외
포스팅에서는 지도를 생성하고 마커와 피처 객체를 생성하는 기본적인 방법을 설명했습니다. 이 외에도 지도의 스타일을 변경하고, 지도의 인터랙션/컨트롤 제어, 접속 위치 기반 마커 생성, 정보창 팝업 생성, 지오코딩 및 리버스 지오코딩, POI 검색 등 다양한 지도 API의 샘플과 예제는 iMPS 가이드사이트를 통해 확인하실 수 있습니다.
🔗 iNAVI Maps Platform Service (inavisys.com)
이 글이 많은 분들에게 도움이 되길 바라며, 포스팅 내용 외 아이나비시스템즈 지도 API/Maps API에 궁금하신 내용이 있다면 댓글을 통해 문의 부탁드립니다. 답변과 함께, 이후 더 상세한 가이드 포스팅으로 돌아오겠습니다.
—
by 아이나비시스템즈 응용기술개발팀
