커스텀 타일셋2

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

original docs : https://apis.map.kakao.com/web/sample/getTile/

결과

Loading...

라이브 에디터

function(){ const Main = () => { useEffect(() => { const tileset = new kakao.maps.Tileset({ width: 256, height: 256, getTile: (x, y, z) => { const 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; } }) kakao.maps.Tileset.add("TILE_NUMBER", tileset) }, []) return ( <> <Map // 지도를 표시할 Container center={{ lat: 37.566826, lng: 126.9786567, }} style={{ width: "100%", height: "450px", }} level={3} // 지도의 확대 레벨 onCreate={map => map.addOverlayMapTypeId(kakao.maps.MapTypeId["TILE_NUMBER"])} > </Map> </> ) } return (<Main/>) }

function(){
  const Main = () => {
    useEffect(() => {
      const tileset = new kakao.maps.Tileset({
        width: 256,
        height: 256,
        getTile: (x, y, z) => {
            const 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;
        }
      })
      kakao.maps.Tileset.add("TILE_NUMBER", tileset)
    }, [])

    return (
      <>
        <Map // 지도를 표시할 Container
          center={{
            lat: 37.566826,
            lng: 126.9786567,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
          onCreate={map => map.addOverlayMapTypeId(kakao.maps.MapTypeId["TILE_NUMBER"])}
        >
        </Map>
      </>
    )
  }
  return (<Main/>)
}