신규 맵 타일 소개

이 문서는 NAVER 지도 API v3 신규 맵 타일 (StyleMap)을 소개합니다.

투영

StyleMap에서 기본적으로 제공하는 지도 유형은 웹 기반 지도 서비스에서 일반적으로 사용하는 EPSG:3857 을 기본 투영으로 사용합니다.

줌 레벨

기본 줌 레벨

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

줌 레벨 지원 범위

신규 맵 타일: 5레벨이 국가가 보이는 레벨이며, 21 레벨이 최대 확대 레벨입니다.

줌 레벨 범례

신규 맵 타일

기본 줌 변경

신규 맵 타일: 16을 기본 줌 레벨로 사용

신규 타일은 기존 타일 줌레벨 보다 5 레벨 높습니다. 기존 타일 11 레벨이 v5 타일에서는 16 레벨입니다.

신규 맵 타일 변경점

지도 옵션 설정 및 참조하기

기존 맵 타일

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: 사용자 정의 컨트롤 만들기