Leaflet 地図に文字列を表示する

Leaflet 1系を使用してマーカーアイコンのかわりに地図上にテキストを表示します。

注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」

マップ上にアイコンの替わりにテキストを表示できますが、次のような点から使い勝手はよくありません。

• ズームを変更しても文字の大きさは変化しないので。ズームを広域にすると東京都という文字で日本が隠れてしまいます。
• iconSizeを与えると表示領域が固定化され長い文字などは枠内に収まりません。
• 逆にiconSizeを与えないと千葉県のように縦書きになります。
• iconSizeを与えず横書きにするには、tableとスタイルシートにwhite-space: nowrapを使えば「埼玉県」のように可変長の文字に対応できますが、使用フォントなどによりブラウザごと長さが変わるのでアンカーを中央にする事ができません。

使えるシーンはズーム固定で、文字列が決まっていて短い場合などに限られそうです。

<!-- テキスト装飾用のスタイルシート -->
<style>
  .divicon1{background:white; text-align: center; font-size: 12px;}
  .divicon2{color:red;font-size: 24px}
  .divicon3{background:white;font-size: 12px;white-space: nowrap}
  .divicon3b{background:#0ff}
</style>
 
 
<div id="mapid" style="width: 100%; height: 400px;"></div> 
<script src="https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.js"></script>
<script>
  function cssLoad(cssFile){
    if(document.all){
      document.createStyleSheet(cssFile);
    }else{
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = cssFile;
      link.type = "text/css"
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
  cssLoad("https://【自分のサーバーアドレスとパス】/leaflet/v1/leaflet.css");
  function addOnload(evtFunc){
    if(window.addEventListener) {
      window.addEventListener('load', evtFunc, false);
    } else if(window.attachEvent){ //IE用
      window.attachEvent('onload', evtFunc);
    } else {
      //alert('window.onload エラー');
    }
  }
  var mymap;
  addOnload(function(){
    mymap = L.map('mapid');
    L.tileLayer('https://【タイルサーバーのアドレスとパス】/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data &copy; <a href="【タイルサーバーの著作権アドレス】" target="_blank">【タイルサーバーの著作者】</a> contributors, '
    }).addTo(mymap);
 
 
    //divIconをセット
    var divIcon1 = L.divIcon({
      html: '東京都 東京都<br>東京都 東京都',
      className: 'divicon1',
      iconSize: [80,30],
      iconAnchor: [40,15],
      popupAnchor: [0, -10]
    });
    var divIcon2 = L.divIcon({
      html: '千葉県 千葉県<br>千葉県 千葉県',
      className: 'divicon2',
    });
    var divIcon3 = L.divIcon({
      html: '<table><tr><td class="divicon3b">埼玉県 埼玉県<br>埼玉県 埼玉県</td></tr></table>',
      className: 'divicon3',
      iconSize: [0,0]
    });
 
    L.marker([35.6896, 139.6918], {icon: divIcon1}).addTo(mymap).bindPopup("東京都");  
    L.marker([35.6050, 140.1234], {icon: divIcon2}).addTo(mymap).bindPopup("千葉県");  
    L.marker([35.8572, 139.6490], {icon: divIcon3}).addTo(mymap).bindPopup("埼玉県");
 
 
    mymap.setView([35.6896, 139.6918], 9);
  });
</script>

基本的な部分はLeaflet マーカーに自作アイコン使用と同じで、アイコン(L.icon)に代わって文字(L.divIcon)を使い文字装飾用のスタイルシート(css)が追加されているだけです。

L.divIconで表示する文字と装飾用のClass名(=divicon1)をセットします。あとのiconSize・iconAnchor・popupAnchorはアイコンと同じです。iconSizeを指定した場合は文字列が長いかったり大きいと正しく表示できません。逆にiconSizeを指定しないと縦向きに表示されます。要注意です。個人的には埼玉県の例のようにtableでラップしてwhite-space:nowrapで自動改行を防ぐのが最良な気がしますがOSやブラウザによって文字列長が変わるためアンカーをセンターにできません。

  var divIcon1 = L.divIcon({
    html: '東京都 東京都<br>東京都 東京都', //表示する文字 html使用可能
    className: 'divicon1', //装飾用のclass名
    iconSize: [80,30], //表示エリアの大きさ(幅,高さ)
    iconAnchor: [40,15], //アンカー位置：0,0を指定するとアイコンの左上が地図座標と一致します
    popupAnchor: [0, -10] //ポップアップの表示位置：0,0を指定するとアンカ位置からポップアップ表示します
  });

アイコンのスタイルをセットします。

  .divicon1{background:white; text-align: center; font-size: 12px;}