Bootstrap Tooltip을 지도 마커 라벨로 설정

Bootstrap Tooltip 는 잘 알고 있다고 생각합니다. 이거.



이것을 Leaflet.js 의 마커의 라벨 표시에 응용합니다.
Leafle.js 플러그인에는 레이블 표시를위한 몇 가지 라이브러리가 있지만 Bootstrap을 함께 사용한다고 가정하면이 방법을 사용하면 플러그인을 사용하지 않고 레이블 표시를 실현할 수 있습니다. 네요.

Bootstrap Tooltip

Bootstrap Tooltip은 DOM에 필요한 속성을 제공하고 JS로 초기화합니다.
아래 코드는 Bootstrap 페이지에 있는 스니펫 그대로입니다.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Leaflet 마커에 적용

Leaflet.js 의 마커도 물론 DOM 을 가지고 있으므로, 같은 요령으로 하면 마커에 tooltip 를 적용할 수 있습니다.
아래의 코드는 GeoJSON에서 읽은 여러 마커에 tooltip을 적용하는 경우의 구현 예입니다.
쉽고 편리하기 때문에 꼭보십시오.

var geojson = L.geoJson(data).addTo(map);
// GeoJSON の各マーカーをループ処理で参照
geojson.eachLayer(function (layer) {
  // マーカーの DOM 要素
  var markerElm = $(layer._icon);
  // Bootstrap tooltip 適用のための属性を追加
  markerElm.attr({
    'data-toggle': 'tooltip',
    'data-placement': 'top'
  });
  // マーカー要素の tooltip 初期化と属性データを表示テキストに指定
  markerElm.tooltip({ title: layer.feature.properties['場所名'], container: 'body' });
});

실제로 움직이는 데모와 코드는 여기에 있으므로 함께 봐주세요.
이번 구현은 No.22의 Bootstrap Tooltip입니다.