logo
Tutorials Examples naver map js api v3 네이버 지도 API 기존 맵 타일에서 신규 맵 타일(StyleMap)으로 전환하기

기존 맵 타일에서 신규 맵 타일(StyleMap)으로 전환하기

이 문서는 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으로 제한합니다.

줌 레벨 범례

기존 맵 타일

레벨 범례                                            
1 ~ 2 국가
3 ~ 5 시도
6 ~ 8 시군구
9 ~ 10 읍면동
11 ~ 12 거리
13 ~ 14 부동산

신규 맵 타일

레벨 범례                                            
5 ~ 6 국가
7 ~ 9 시도
10 ~ 12 시군구
13 ~ 14 읍면동
15 ~ 16 거리
17 ~ 20 부동산

기본 줌 변경

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

StyleMap 서브 모듈 제거

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

전환 방법

지도 초기화하기

기존 맵 타일

var map = new naver.maps.Map('map', {
    size: new naver.maps.Size(300, 400)
});

신규 맵 타일

옵션에 useStyleMap: true 을 설정합니다.

var map = new naver.maps.Map('map', {
    /* 변경점 */
    useStyleMap: true,
    size: new naver.maps.Size(300, 400)
});

Examples: 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_stylemap 이벤트 시점에 옵션 값을 참조합니다.

var map = new naver.maps.Map('map', {
    /* 변경점 */
    useStyleMap: true,
    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_stylemap', function () {
    console.log('올바른 참조 시점', map.getOptions('minZoom') === 10);
});

Examples: StyleMap 옵션 설정과 참조 예제

NaverStyleMapTypeOption 사용

기존 맵 타일

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.NaverMapTypeOption.getSatelliteMap());
map.mapTypes.set(naver.maps.MapTypeId.HYBRID, naver.maps.NaverMapTypeOption.getHybridMap());

신규 맵 타일

NaverStyleMapTypeOption 사용

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

var map = new naver.maps.Map('map', {
    /* 변경점 */
    useStyleMap: true,
    mapTypes: registry,
    mapTypeId: naver.maps.MapTypeId.SATELLITE
});

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

기본 레이어 표시하기

기존 맵 타일

var cadastralLayer = new naver.maps.CadastralLayer();
var streetLayer = new naver.maps.StreetLayer();
var bicycleLayer = new naver.maps.BicycleLayer();
var trafficLayer = new naver.maps.TrafficLayer();

cadastralLayer.setMap(map);
streetLayer.setMap(map);
bicycleLayer.setMap(map);
trafficLayer.setMap(map);

신규 맵 타일

레이어 생성 시 useStyleMap: true 을 설정합니다.

/* 변경점 */
var cadastralLayer = new naver.maps.CadastralLayer({ useStyleMap: true });
var streetLayer = new naver.maps.StreetLayer({ useStyleMap: true });
var bicycleLayer = new naver.maps.BicycleLayer({ useStyleMap: true });
var trafficLayer = new naver.maps.TrafficLayer({ useStyleMap: true });

cadastralLayer.setMap(map);
streetLayer.setMap(map);
bicycleLayer.setMap(map);
trafficLayer.setMap(map);

Examples: StyleMap 지적도 레이어 표시하기

사용자 정의 레이어 만들기

기존 맵 타일

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

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

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

신규 맵 타일

NaverStyleMapTypeOption 사용, init_stylemap 이벤트 시점에 layer 설정

var map = new naver.maps.Map('map', {
    /* 변경점 */
    useStyleMap: true,
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    mapTypes: new naver.maps.MapTypeRegistry({
        'normal': naver.maps.NaverStyleMapTypeOption.getVectorMap()
    })
});

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

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

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

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

기존 맵 타일

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

신규 맵 타일

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

var map = new naver.maps.Map('map', {
    /* 변경점 */
    useStyleMap: true
});

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: StyleMap 열지도 사용 예제

사용자 정의 컨트롤

기존 맵 타일

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

//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_stylemap 이벤트 시점에 생성

var locationBtnHtml = '<a href="#" class="btn_mylct"><span class="spr_trff spr_ico_mylct">NAVER 그린팩토리</span></a>';
var map = new naver.maps.Map('map', {
        /* 변경점 */
        useStyleMap: true,
        zoom: 13
    });

/* 변경점 */
naver.maps.Event.once(map, 'init_stylemap', 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: StyleMap 사용자 정의 컨트롤 예제