Leaflet地図上に円グラフをマーカーとして表示する

Leafletで描画した地図に円グラフをマーカーとして表示する。

円グラフをマーカーとするには、divIconオブジェクトを作成し、D3.jsで作成した円グラフのHTMLをhtmlオプションの引数として与える。

これをIconとして、L.marker関数に渡せばよい。

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オブジェクトに渡す。

var tmp = d3.select("#tmp");

グラフ一時描画用のDOM要素を選択。コード上では円グラフがこの要素内に描画されるが、すぐに削除するので表示はされない。

//色の設定(scaleOrdinalはRangeで指定した色を繰り返して使用)
var color = d3.scaleOrdinal()
    .range(["#DC3912", "#3366CC", "#109618", "#FF9900", "#990099", "#998889", "#1459AF"]);

//pieチャートデータセット用関数の設定
var pie = d3.pie()
    .value(function (d) { return d.value; })
    .sort(null);

var arc = d3.arc()
    .outerRadius(radius)
    .innerRadius(radius / 3);

d3.scaleOrdinalでグラフの色のScaleを作成。scaleOrdinal関数では、rangeメソッドで与えた色のリストを繰り返して渡す。

d3.pie関数で、pieチャート用のデータセットを作成。

d3.arcで円弧を描画する。outerRadiusで外円の弧を、innerRadiusで内円の弧を描画する。

L.markerClusterGroup()関数でマーカーをクラスタリングするためのMarkerClusterGroupを作成

var markers = L.markerClusterGroup();

sampleDataSet.forEach(sampleData => {
    var pieInputList = createPieInput(sampleData);
    //pieチャートSVG要素の設定
    tmp.append("svg").attr("transform", "translate(" + -20 + "," + -20 + ")")
        .append("g").attr("transform", "translate(" + 20 + "," + 20 + ")")
            .selectAll(".pie")
                .data(pie(pieInputList))
                .enter()
                .append("g")
                .attr("class", "pie")
                    .append("path")
                        .attr("d", arc)
                        .attr("fill", function (d) { return color(d.index) })
                        .attr("opacity", 0.75) //透過を指定するプロパティ
                        .attr("stroke", "white"); //アウトラインの色を指定するプロパティ
    var myIcon = L.divIcon({ html: tmp.html() });

    tmp.select("svg").remove();

    var marker = L.marker([sampleData.latitude, sampleData.longitude], { icon: myIcon });
    markers.addLayer(marker);
});

tmpのdivタグの中に円グラフを描画する。(gタグをtranformした分だけ、svgタグを逆方向へtransformさせて移動させるとよい)

divIcon関数でHTMLタグを子要素に持つマーカーアイコンを作成する。与えるHTMLはhtmlメソッドでselectしたDOM要素から取得する。

removeメソッドでtmpのdivタグの中身を削除する。

L.marker関数で作成したアイコンをプロットする。

markerClusterGroupオブジェクトにマーカーを追加して、クラスターに追加する。

map.addLayer(markers);