MapBox + IONIC 조합문제

mapbox와 ionic을 조합할땐 Angular 때문에 여러 문제가 있다.

touch또는 click에서 Angular의 ng-click과 mapbox 이벤트의 click이벤트가 겹치고

또한 Ionic에서 tab 문제라던지 여러 이벤트가 겹친다. (거기다 부트스트랩 모달 이슈까지)

따라서 해결책을 위해 여러 문서가 있기는 하지만 찾기가 여간 힘든게 아니다.

그래서 mapbox, ionic, angular, modal의 이슈에 관한 문제를 정리하기로 했다.

1. mapbox + ionic + angular의 tab 또는 touch,click 이슈 해결법

mapbox뿐만 아니라 구글맵등 지도 라이브러리를 사용할때 지도의 click이벤트와 모바일 기기에서 tab 이벤트가 겹칠 수 있다

따라서 

<div data-tap-disabled="true" style="height: 100%">
  <div id="map"></div>
</div>

map을 이러한 div 태그로 감싸준다

2. ionic + mapbox + angular에서 마커클릭 이벤트중 터치이슈

웹에서는 발생하지 않지만 app에서는 발생하는 터치이슈로 원인은 정확하지 않치만 cursor문제일 수 있다.

어딘가 angular 라이브러리 이슈에서 본 문제인데 angular는 cursor를 default로 지정하는 반면에 mapbox에서는 마커를 cursor로 두므로

이 둘 사이에 어딘가에서 문제가 발생하는것 같다(정확한 원인은 아니고 실험적 결과에서 알아내었다.)

.leaflet-overlay-pane path,
.leaflet-marker-icon {
  cursor: pointer;
}
.leaflet-clickable {
  cursor: pointer;
}

이러한 css를 추가하도록 한다.

3. mapbox + bootstrapModal

bootstrapModal을 이용할때 map이 자바스크립트에 의해 display: none; 속성이 적용되면 map이 제대로 로딩이 안 될수 있다는 이슈다.

//Your map is hidden

//If you’re hiding your map initially with something like display:none and showing it dynamically with JavaScript, it may have some problems appearing and sizing correctly. The map can’t figure out its own size when it’s hidden from the page, since it doesn’t have a size in the browser’s calculation.
//The solution is to call map.invalidateSize() after showing the map:

// your code that shows the map div
  $('#map-div').show();

// invalidate the size of your map
map.invalidateSize();
//For instance, in the case of Bootstrap’s modals, they have an event you can bind to in order to trigger the size change:

// Given that your modal has the id #modal
// and your map is under the variable map
  $('#modal').on('shown.bs.modal', function() {
    map.invalidateSize();
  });

이렇게 모달이 shown될때 map.invalidateSize() 로 해결된다.