Kakao
Maps API

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

커스텀 타일셋1

직접 만든 타일 이미지로 타일셋을 만들어 사용할 수 있습니다.

직접 해보기

Javascript

var domain = 'https://i1.daumcdn.net';
var path = '/dmaps/apis/openapi/sampleimg/';
var plan = function( x, y, z ) {
    y = -y - 1;
    var limit = Math.ceil( 3 / Math.pow( 2, z ) );

    if ( 0 <= y && y < limit && 0 <= x && x < limit ) {
        return domain + path + 'planh' +
            z + '_' + y + '_' + x + '.png';
    } else {
        return 'https://i1.daumcdn.net/dmaps/apis/white.png';
    }
};

kakao.maps.Tileset.add( 'PLAN',
        new kakao.maps.Tileset(
            512, 512, plan, '', false, 0, 2 ) );

var node = document.getElementById( 'map' );
var map = new kakao.maps.Map( node, {
    projectionId: null,
    mapTypeId: kakao.maps.MapTypeId.PLAN,
    $scale: false,
    center: new kakao.maps.Coords( 650, -550 ),
    level: 2
} );
var center = map.getCenter();
var marker = new kakao.maps.Marker({
    position: center
});
marker.setMap(map);

var infowindow = new kakao.maps.InfoWindow({
    content: '커스텀 타일셋을 올릴수 있습니다!'
});
infowindow.open(map, marker);

Javascript + HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>커스텀 타일셋1</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 domain = 'https://i1.daumcdn.net';
var path = '/dmaps/apis/openapi/sampleimg/';
var plan = function( x, y, z ) {
    y = -y - 1;
    var limit = Math.ceil( 3 / Math.pow( 2, z ) );

    if ( 0 <= y && y < limit && 0 <= x && x < limit ) {
        return domain + path + 'planh' +
            z + '_' + y + '_' + x + '.png';
    } else {
        return 'https://i1.daumcdn.net/dmaps/apis/white.png';
    }
};

kakao.maps.Tileset.add( 'PLAN',
        new kakao.maps.Tileset(
            512, 512, plan, '', false, 0, 2 ) );

var node = document.getElementById( 'map' );
var map = new kakao.maps.Map( node, {
    projectionId: null,
    mapTypeId: kakao.maps.MapTypeId.PLAN,
    $scale: false,
    center: new kakao.maps.Coords( 650, -550 ),
    level: 2
} );
var center = map.getCenter();
var marker = new kakao.maps.Marker({
    position: center
});
marker.setMap(map);

var infowindow = new kakao.maps.InfoWindow({
    content: '커스텀 타일셋을 올릴수 있습니다!'
});
infowindow.open(map, marker);
</script>
</body>
</html>