Leafletでテキストを作図する

Leafletでマップ上にテキストを記述するためには、プラグイン”Leaflet.Illustrate“を利用します。

動作イメージはデモページをご覧下さい。

マップを表示するhtmlファイル（index.html）にLeaflet.Illustrate.cssとLeaflet.Illustrate.jsへの参照パスを記述。

<head>
  …
  <link rel="stylesheet" href="css/Leaflet.Illustrate.css"/>
  < script src= "js/Leaflet.Illustrate.js"> </script>
  …
</head>

上記ファイルはここからダウンロードします。このとき、imageフォルダ内の画像データも忘れずに。

index.htmlの<script>タグ内に下記を記述。

new L.Illustrate.Control({
edit: {
featureGroup: drawnItems
}
}).addTo(map);

map.on('draw:created',function(evt){
var type = evt.layerType,
layer = evt.layer;
drawnItems.addLayer(layer);
});

デフォルトのままだと”pointer”というちょっとわからない図形を作図するボタンも表示されるので、これはjs側（Leaflet.Illustrate.js）でオフ（コメントアウト）にしました。（もっとスマートなやり方があるのかもしれませんが）

//            {
//                enabled: this.options.pointer,
//                handler: new L.Illustrate.Create.Pointer(map, this.options.pointer),
//                title: 'Add a pointer'
//            }

ここまで無事に設定できると、テキスト作図ボタンが現れるはずです。完成はこちら（デモページ）。