마이그레이션: v4에서 v5로 전환하기

이 문서는 NAVER 지도 API v3 기존 맵 타일에서 신규 맵 타일 (StyleMap)로 전환하는 사용자를 위해 NAVER 지도 API v3의 주요 인터페이스 중 신규 맵 타일에서 변경된 내용을 중심으로 설명합니다.

주요 변경 내용

기본 투영 변경

• 기존 맵 타일: NAVER 지도 API v3에서 기본적으로 제공하는 지도 유형(MapType)은 UTMK 투영법을 변조한 네이버 자체 투영법인 UTMK_NAVER를 사용합니다.
• 신규 맵 타일: StyleMap에서 기본적으로 제공하는 지도 유형은 웹 기반 지도 서비스에서 일반적으로 사용하는 EPSG:3857 을 기본 투영으로 사용합니다.

기본 줌 레벨

• 기존 맵 타일: 11.
• 신규 맵 타일: 16. 기존 줌 레벨과 +5 차이가 있습니다.

줌 레벨 지원 범위

• 기존 맵 타일: 1~14 레벨을 지원하고 있으며, 14 레벨이 최대 확대 레벨입니다.
• 신규 맵 타일: 0레벨이 세계지도 전도가 보이는 레벨이며, 21 레벨이 최대 확대 레벨입니다.

minZoom 제한

• 기존 맵: minZoom 초기 지도 유형의 최저 줌 레벨.
• 신규 맵: minZoom 6. 지도를 국내로 제한하면서 6으로 제한합니다.

줌 레벨 범례

기존 맵 타일

신규 맵 타일

기본 줌 변경

• 기존 맵 타일: 11을 기본 줌 레벨로 사용
• 신규 맵 타일: 16을 기본 줌 레벨로 사용
• 신규 타일은 기존 타일 줌레벨 보다 5 레벨 높습니다. 기존 타일 11 레벨이 v5 타일에서는 16 레벨입니다.

StyleMap 서브 모듈 제거

• 기존 맵 타일: stylemap 서브 모듈을 이용하여 신규 스타일 지도 표시
• 신규 맵 타일: 지도 생성 시 옵션으로 신규 스타일 지도 표시

전환 방법

지도 옵션 설정 및 참조하기

기존 맵 타일

var map = new naver.maps.Map('map', {
    zoom: 11,
    center: new naver.maps.LatLng(37.5666103, 126.9783882)
});

map.setOptions('minZoom', 10);
console.log(map.getOptions('minZoom') === 10);

신규 맵 타일

init 이벤트 시점에 옵션 값을 참조합니다.

var map = new naver.maps.Map('map', {
    zoom: 16,
    center: new naver.maps.LatLng(37.5666103, 126.9783882)
});

map.setOptions('minZoom', 10);
console.log('잘못된 참조 시점', map.getOptions('minZoom') === 10);

/* 변경점 */
naver.maps.Event.once(map, 'init', function () {
    console.log('올바른 참조 시점', map.getOptions('minZoom') === 10);
});

Examples: 지도 옵션 조정하기

NaverStyleMapTypeOptions 사용

기존 맵 타일

var registry = new naver.maps.MapTypeRegistry();

var map = new naver.maps.Map('map', {
    mapTypes: registry,
    mapTypeId: naver.maps.MapTypeId.SATELLITE
});

map.mapTypes.set(naver.maps.MapTypeId.SATELLITE, naver.maps.NaverMapTypeOptions.getSatelliteMap());
map.mapTypes.set(naver.maps.MapTypeId.HYBRID, naver.maps.NaverMapTypeOptions.getHybridMap());

신규 맵 타일

NaverStyleMapTypeOptions 사용

var registry = new naver.maps.MapTypeRegistry();

var map = new naver.maps.Map('map', {
    mapTypes: registry,
    mapTypeId: naver.maps.MapTypeId.SATELLITE
});

/* 변경점 */
map.mapTypes.set(naver.maps.MapTypeId.SATELLITE, naver.maps.NaverStyleMapTypeOptions.getSatelliteMap());
map.mapTypes.set(naver.maps.MapTypeId.HYBRID, naver.maps.NaverStyleMapTypeOptions.getHybridMap());

사용자 정의 레이어 만들기

기존 맵 타일

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    mapTypes: new naver.maps.MapTypeRegistry({
        'normal': naver.maps.NaverMapTypeOptions.getVectorMap()
    })
});

var labelMapType = new naver.maps.NaverMapTypeOptions.getNormalLabelLayer();
var labelMapTypeRegistry = new naver.maps.MapTypeRegistry({
    'label': labelMapType
});

var labelLayer = new naver.maps.Layer('label', labelMapTypeRegistry);
labelLayer.setMap(map);

신규 맵 타일

NaverStyleMapTypeOptions 사용, init 이벤트 시점에 layer 설정

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    mapTypes: new naver.maps.MapTypeRegistry({
        'normal': naver.maps.NaverStyleMapTypeOptions.getVectorMap()
    })
});

/* 변경점 */
naver.maps.Event.once(map, 'init', function () {
    var labelMapType = new naver.maps.NaverStyleMapTypeOptions.getNormalLabelLayer();
    var labelMapTypeRegistry = new naver.maps.MapTypeRegistry({
        'label': labelMapType
    });

    var labelLayer = new naver.maps.Layer('label', labelMapTypeRegistry);
    labelLayer.setMap(map);
});

Examples: 사용자 정의 레이어 만들기

그리기 도구 서브 모듈 사용하기

기존 맵 타일

var map = new naver.maps.Map('map');
var drawingManager = new naver.maps.drawing.DrawingManager({map: map});

신규 맵 타일

onJSContentLoaded 이벤트 핸들러 시점에 생성

var map = new naver.maps.Map('map');

/* 변경점 */
naver.maps.onJSContentLoaded = function() {
    var drawingManager = new naver.maps.drawing.DrawingManager({map: map});
};

데이터 시각화 서브 모듈 사용하기

기존 맵 타일

var data = [
    new naver.maps.LatLng(37.75,125.4),
    new naver.maps.LatLng(35.42,128.56),
    new naver.maps.LatLng(35.57,128.34),

    // (생략)

    new naver.maps.LatLng(36.30,125.9),
    new naver.maps.LatLng(35.80,128.2),
    new naver.maps.LatLng(38.70,127.9)
];

var heatmap = new naver.maps.visualization.HeatMap({
    map: map,
    data: data
});

신규 맵 타일

onJSContentLoaded 이벤트 핸들러 시점에 생성

var data = [
    new naver.maps.LatLng(37.75,125.4),
    new naver.maps.LatLng(35.42,128.56),
    new naver.maps.LatLng(35.57,128.34),

    // (생략)

    new naver.maps.LatLng(36.30,125.9),
    new naver.maps.LatLng(35.80,128.2),
    new naver.maps.LatLng(38.70,127.9)
];

/* 변경점 */
naver.maps.onJSContentLoaded = function() {
    var heatmap = new naver.maps.visualization.HeatMap({
        map: map,
        data: data
    });
};

Examples: 열지도 시각화하기

사용자 정의 컨트롤

기존 맵 타일

var locationBtnHtml = '<a href="#" class="btn_mylct"><span class="spr_trff spr_ico_mylct">NAVER 그린팩토리</span></a>';
var map = new naver.maps.Map('map');

//customControl 객체 이용하기
var customControl = new naver.maps.CustomControl(locationBtnHtml, {
  position: naver.maps.Position.TOP_LEFT
});

customControl.setMap(map);

var domEventListener = naver.maps.Event.addDOMListener(customControl.getElement(), 'click', function() {
  map.setCenter(new naver.maps.LatLng(37.3595953, 127.1053971));
});

//Map 객체의 controls 활용하기
var $locationBtn = $(locationBtnHtml),
    locationBtnEl = $locationBtn[0];

map.controls[naver.maps.Position.LEFT_CENTER].push(locationBtnEl);

var domEventListener = naver.maps.Event.addDOMListener(locationBtnEl, 'click', function() {
  map.setCenter(new naver.maps.LatLng(37.3595953, 127.1553971));
});

신규 맵 타일

init 이벤트 시점에 생성

var locationBtnHtml = '<a href="#" class="btn_mylct"><span class="spr_trff spr_ico_mylct">NAVER 그린팩토리</span></a>';
var map = new naver.maps.Map('map');

/* 변경점 */
naver.maps.Event.once(map, 'init', function () {
    //customControl 객체 이용하기
    var customControl = new naver.maps.CustomControl(locationBtnHtml, {
        position: naver.maps.Position.TOP_LEFT
    });

    customControl.setMap(map);

    var domEventListener = naver.maps.Event.addDOMListener(customControl.getElement(), 'click', function() {
        map.setCenter(new naver.maps.LatLng(37.3595953, 127.1053971));
    });

    //Map 객체의 controls 활용하기
    var $locationBtn = $(locationBtnHtml),
        locationBtnEl = $locationBtn[0];

    map.controls[naver.maps.Position.LEFT_CENTER].push(locationBtnEl);

    var domEventListener = naver.maps.Event.addDOMListener(locationBtnEl, 'click', function() {
        map.setCenter(new naver.maps.LatLng(37.3595953, 127.1553971));
    });
});

Examples: 사용자 정의 컨트롤 만들기