Kakao
Maps API

검색하기
지도
오버레이
로드뷰
정적지도
라이브러리

커스텀 타일셋2

Tileset 객체를 생성할 때 getTile 함수를 파라미터로 입력하면 지도 위에 이미지 URL이 아닌 다른 HTML Element를 타일로 표시할 수 있습니다. 이 예제에서는 Div Element에 지도 타일 좌표와 레벨을 표시합니다.

직접 해보기

Javascript

var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var dmap = new kakao.maps.Map(mapContainer, mapOption);

// Tileset을 생성하고 지도 오버레이로 추가합니다
kakao.maps.Tileset.add('TILE_NUMBER', 
    new kakao.maps.Tileset({
        width: 256,
        height: 256,
        getTile: function(x, y, z) {
            var div = document.createElement('div');
            div.innerHTML = x + ', ' + y + ', ' + z;
            div.style.fontSize = '36px';
            div.style.fontWeight = 'bold';
            div.style.lineHeight = '256px'
            div.style.textAlign = 'center';
            div.style.color = '#4D4D4D';
            div.style.border = '1px dashed #ff5050';
            return div;
        }
    }));

// 지도 위에 TILE_NUMBER 오버레이 레이어를 추가합니다
dmap.addOverlayMapTypeId(kakao.maps.MapTypeId.TILE_NUMBER);

Javascript + HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>커스텀 타일셋2</title>
    
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var dmap = new kakao.maps.Map(mapContainer, mapOption);

// Tileset을 생성하고 지도 오버레이로 추가합니다
kakao.maps.Tileset.add('TILE_NUMBER', 
    new kakao.maps.Tileset({
        width: 256,
        height: 256,
        getTile: function(x, y, z) {
            var div = document.createElement('div');
            div.innerHTML = x + ', ' + y + ', ' + z;
            div.style.fontSize = '36px';
            div.style.fontWeight = 'bold';
            div.style.lineHeight = '256px'
            div.style.textAlign = 'center';
            div.style.color = '#4D4D4D';
            div.style.border = '1px dashed #ff5050';
            return div;
        }
    }));

// 지도 위에 TILE_NUMBER 오버레이 레이어를 추가합니다
dmap.addOverlayMapTypeId(kakao.maps.MapTypeId.TILE_NUMBER);

</script>
</body>
</html>