Leaflet.drawを使って、地図上に図形を描く

今日はLeaflet.drawというプラグインを使って、
leafletの地図上に図形やマーカーを追加する機能を作ってみます。

leafletの地図の表示についてはこちらを参照

まずは、スタイルシートとjsを読み込みます。

1
2
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js'></script>

追加した図形をまとめるためのオブジェクトFeatureGroupを宣言し、
図形を追加するためのコントローラを追加します。

1
2
3
4
5
6
7
8
9
10
11
// 図形をまとめるためのオブジェクト
var drawnItems = new L.FeatureGroup().addTo(map);
// 図形を描くためのコントローラ
// 位置のデフォルトは左上ですが、右上に指定を変えています。
var drawControl = new L.Control.Draw({
  edit: {
    featureGroup: drawnItems
  }
  ,position: 'topright'
}).addTo(map);

図形が描かれたときに、
その図形をレイヤに追加するよう設定します。

1
2
3
map.on('draw:created', function(e) {
  drawnItems.addLayer(e.layer);
});

こうすると地図上にコントローラが現れ、
ポリライン、ポリゴン、四角形、丸、マーカーを、追加したり編集したり削除したりできるようになります。

leaflet.draw

もちろんいろいろなカスタマイズも可能です。
試しにこんなカスタマイズをしてみました。

  • 追加できるのをポリラインとマーカーだけにする
  • ポリラインの色と透明度を変える
  • マーカーを連続で作成できるようにする
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var drawControl = new L.Control.Draw({
  draw: {
    polyline: {
      shapeOptions:{
        color: '#C3415D',
        opacity: 0.8
      }
    }
    ,polygon: false
    ,rectangle: false
    ,circle: false
    ,marker: {
      repeatMode: true
    }
  }
  ,edit: {
    featureGroup: drawnItems
  }
  ,position: 'topright'
}).addTo(map);

leaflet.draw

この技術を生かして、自分で地図上の情報を編集したり、参照したりできるようにしたいな〜
と思いつつ、今日はここまで〜