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'
// }ここまで無事に設定できると、テキスト作図ボタンが現れるはずです。完成はこちら（デモページ）。
作図したテキストはGeojson形式でエクスポートすることができます。
下図は、地理院地図で、このエクスポートされたGeojson形式のデータを読み込んだところ。書かれたテキストは、ポイントデータの「属性」として、その内容が保存されています。
（式）
広告
