**文書の過去の版を表示しています。**
Leaflet地図上に円グラフをマーカーとして表示する
Leafletで描画した地図に円グラフをマーカーとして表示する。
円グラフをマーカーとするには、divIconオブジェクトを作成し、D3.jsで作成した円グラフのHTMLをhtmlオプションの引数として与える。
これをIconとして、L.marker関数に渡せばよい。
Leafletで地図を描画する
var radius = 20;
//地図を描画するDOM要素を選択し、デフォルトの緯度経度、縮尺を設定。
var map = L.map("map").setView([35.7, 139.7], 5);
//地図データの取得元とZoom範囲を設定する。
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 2, maxZoom: 18 }).addTo(map);
L.map関数で地図を描画する要素を指定し、setViewメソッドでデフォルトの緯度経度、縮尺を選択。
L.tileLayer関数でタイルサーバと最大・最小の縮尺を指定し、addToメソッドでmapオブジェクトに渡す。