커스텀 타일셋1

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

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

결과

Loading...

라이브 에디터

function(){ const Main = () => { const domain = 'https://i1.daumcdn.net' const path = '/dmaps/apis/openapi/sampleimg/' const plan = (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" } } useEffect(() => { const tileset = new kakao.maps.Tileset({ width: 512, height: 512, urlFunc: plan, dark: false, minZoom: 0, maxZoom: 2, }) kakao.maps.Tileset.add("PLAN", tileset) }, []) return ( <> <Map // 지도를 표시할 Container projectionId={null} center={{ x: 650, y: -550, }} style={{ width: "100%", height: "450px", }} level={3} // 지도의 확대 레벨 onCreate={(map) => map.setMapTypeId(kakao.maps.MapTypeId["PLAN"])} > <MapMarker position={{ x: 650, y: -550, }}> <div style={{color: "#000000" }}>커스텀 타일셋을 올릴수 있습니다!</div> </MapMarker> </Map> </> ) } return (<Main/>) }

function(){
  const Main = () => {
    const domain = 'https://i1.daumcdn.net'
    const path = '/dmaps/apis/openapi/sampleimg/'

    const plan = (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"
      }
    }

    useEffect(() => {
      const tileset = new kakao.maps.Tileset({
        width: 512,
        height: 512,
        urlFunc: plan,
        dark: false,
        minZoom: 0,
        maxZoom: 2,
      })
      kakao.maps.Tileset.add("PLAN", tileset)
    }, [])

    return (
      <>
        <Map // 지도를 표시할 Container
          projectionId={null}
          center={{
            x: 650,
            y: -550,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
          onCreate={(map) => map.setMapTypeId(kakao.maps.MapTypeId["PLAN"])}
        >
          <MapMarker position={{
            x: 650,
            y: -550,
          }}>
            <div style={{color: "#000000" }}>커스텀 타일셋을 올릴수 있습니다!</div>
          </MapMarker>
        </Map>
      </>
    )
  }
  return (<Main/>)
}