leaflet-rotate.js 적용 시, leaflet.js scrollWheelZoom 제어 안됨

 

leaflet.js를 활용하여 개발을 진행하던 중, 지도의 회전을 위해 leaflet-rotate.js를 적용하게 되었는데 회전을 위한 코드 두 줄을 추가한 뒤 부터 map 객체의 scrollWheelZoom을 false로 적용하여도 계속 스크롤 줌이 동작했다.

 

여러 시도를 병행해 보았는데, 아래와 같은 순서로 접근해보았다.

 

목차

---

 

script 참조 순서 변경

플러그인의 초기화 순서로 인해 설정이 덮어씌워져 본인이 설정한 scrollWheelZoom false설정이 무시될 가능성이 있다고 해서 다음과 같은 순서로 참조 목록을 수정해보았다.

<script src="leaflet.js"></script>
<script src="leaflet-rotate.js"></script>
<script src="지도 제어 관련하여 직접 작성한 js"></script>

 

하지만 상황은 개선되지 않았다..

 

 

 

 

이벤트 비활성화 강제 적용

검색에서 가장 많이 언급된 내용은 런타임에서 scrollWheelZoom속성을 강제로 비활성화 하라는 것이었다.

// 맵 객체 초기화 후
var map = L.map('map', {
    rotate: true,
    scrollWheelZoom: false,
}).setView([51.505, -0.09], 13);

// 강제 비활성화 해보기
map.scrollWheelZoom.disable();

 

하 지 만 마찬가지로 상황은 개선되지 않았다 ^^

 

 

 

 

shiftKeyRotate 값 조작

왜 안될까 고민하다가 그냥 lealfet-rotate.js의 내용을 확인해보았는데, shiftKeyRotate클래스 선언 내용이 scrollWheelZoom 제어에 영향을 준다는 것을 깨닳았다. shiftKeyRotate가 기본값이 true인데, 해당 객체가 활성화된 상태라면 scrollWheelZoom를 true로 활성화하는 코드가 있는 것이 문제였다!

 

내 지도는 사용자 조작을 최소화 한다.

// 맵 객체 초기화 후
var map = L.map('map', {
    rotate: true,
    scrollWheelZoom: false,
    shiftKeyRotate: false
    
}).setView([51.505, -0.09], 13);

 

그리고 드디어 제어 성공.......