카카오 지도 api 표시할때 css 오버레이로 흑백처리

카카오맵 API (지도/로컬)
1

지도 div 의 img, div 등
css 의 filter 속성으로 이런식으로 흑백 처럼 보여지게 커스텀이 가능할까요?
서비스 운영시 커스텀이 사용가능한 부분인지 문의드립니다.

map img[src*=“tile”],
map img[src*=“map”],
map div[style*=“background-image”]:not(.CustomOverlay) {
filter: grayscale(100%) !important;
}

2

Tileset을 이용해서 흑백 스타일을 갖는 타일을 올릴 수 있습니다.
https://apis.map.kakao.com/web/documentation/#Tileset

// Tileset을 생성하고 지도 오버레이로 추가합니다
kakao.maps.Tileset.add('DIM', 
    new kakao.maps.Tileset({
        width: 256,
        height: 256,
        getTile: function(x, y, z) {
            let div = document.createElement('div');            
            div.style.background = 'rgba(0,0,0,0.5)';
            div.style.border = '1px dashed #bbb';
            return div;
        }
    }));

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

오 답변 감사합니다.

css 로
img[src*=“tile”],
map img[src*=“map”],
map div[style*=“background-image”]:not(.CustomOverlay) 선택자에 filter 속성을 입히는 부분은 금지되어있는지요?

타일셋으로 올리니까 딤처리된 효과밖에 나오지 않아서요.

4

금지 사항은 아니지만 전체 스타일에 영향을 줄 수 있으므로, 이에 따른 부작용을 잘 관리해 주시기 바랍니다.
또한, 지도에 노출되는 CI나 BI를 가리거나 변형될 경우는 제재 대상이 될 수 있으니 참고해 주세요.