Leaflet Javascript マーカーツールチップのカスタマイズ

Leaflet Javascript マーカーツールチップのカスタマイズについて備忘録しておきます。

1) スタイルの設定
2) ツールチップにスタイルとコンテンツをセット
3) マーカーにバインド

[ コード例 ]

// ツールチップスタイルのセット //
const tooltipStyleWP = {direction: 
            "right",
            offset: L.point(-30, 24), // x, y <= のオフセット位置
            opacity: 0.8,
            permanent: isPermanetTooltip || isPermanentTarget ? true : false,
            className: "waypointTTClass" + CLASS_TAIL

          };

// ツールチップ、スタイルとコンテントのセット //
const ttp = L.tooltip(tooltipStyleWP).setContent(feature.properties.ident);

// マーカーアイコンのセット //
icn = L.icon({
            iconUrl: feature.properties.icon,
            iconSize: [12, 12]
          });

// マーカーにバインド //
L.marker(latlng, {icon: icn}).bindTooltip(ttp);

[ className CSS例 ]


      /* 飛行機マーカーツールチップ */
      /* 暗色 */
      .aircraftTTClass {
        background: transparent;
        border: 1px solid #FFFFFF;
        font-size: 13px;
        color: #FFFFFF;
        padding: 2px;
      }
      .leaflet-tooltip-left.aircraftTTClass::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.aircraftTTClass::before {
        border-right-color: transparent;
      }

      /* 明色 */
      .aircraftTTClassL {
        background: #f2f2f2;
        border: 1px solid navy;
        font-size: 13px;
        color: #222222;
        padding: 2px;
      }
      .leaflet-tooltip-left.aircraftTTClassL::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.aircraftTTClassL::before {
        border-right-color: transparent;
      }

      /* Waypointマーカーツールチップ */
      /* 暗色 */
      .waypointTTClass {
        background: transparent;
        border: 1px solid #FFFF00;
        font-size: 11px;
        color: #FFFF00;
        padding: 2px;
      }
      .leaflet-tooltip-left.waypointTTClass::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.waypointTTClass::before {
        border-right-color: transparent;
      }

      /* 明色 */
      .waypointTTClassL {
        background: transparent;
        border: 1px solid navy;
        font-size: 11px;
        color: #868600;
        padding: 2px;
      }
      .leaflet-tooltip-left.waypointTTClassL::before {
        border-left-color: transparent;
      }
      .leaflet-tooltip-right.waypointTTClassL::before {
        border-right-color: transparent;
      }

[ 画面例 ]