YellowfinでLeaflet＋OpenStreetMapを使ってバブルチャートを表示するサンプル #OpenStreetMap

YellowfinのJavaScriptグラフで、LeafletとOpenStreetMapを使ってバブルを表示するサンプルを作成しました。

具体的な手順はこちらやこちらの記事を参考にしています。

まず、Yellowfinのサンプルデータ（SkiTeam）を使って、以下のような表を作成。

そしてグラフ画面でJSグラフを選択し、JavaScriptタブとCSSタブにそれぞれ以下を記述します。

JavaScriptタブへの記述

//generateChartは必須の関数であり、Javascriptグラフの作成において呼び出しされます
generateChart = function(options) {
    
    // 地図描画用のdiv作成
    var $chartDiv = $(options.divSelector);
    $chartDiv.append('<div id="yfmap"></div>');

    // requireを使用して必要なJavascriptライブラリを読み込み
    require(['https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'], function(leaflet) {
        
        // 地図オブジェクトの生成
        let yfmap = L.map('yfmap', {
            center: [35.7, 139.7],
            zoom: 9,
        });
            
        // OpenStreetMapの画像タイルレイヤー追加
        let tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
            });
        tileLayer.addTo(yfmap);

        // 作成した表のデータセット取得
        let dataset = options.dataset.data;
        
        // レコードの数だけループ
        for (var i = 0; i < dataset.athlete_id.length; i++) {
            
            var athlete_id = dataset.athlete_id[i].raw_data;
            var latitude = dataset.athlete_latitude[i].raw_data;
            var longitude = dataset.athlete_longitude[i].raw_data;
            var invoiced_amount = dataset.invoiced_amount[i].raw_data;
            var invoiced_amount_formatted = dataset.invoiced_amount[i].formatted_data;
            var radius_size = invoiced_amount / 10000;
            if (radius_size > 50) {radius_size = 50}
            if (radius_size < 2) {radius_size = 2}

            //描画する丸形マーカーのオプション
            var circleMarkerOptions = {
                radius: radius_size,  //半径
                fillColor: "#009EEC", //塗りつぶし色
                color: "#009EEC",     //外枠の線の色
                weight: 1,            //外枠の線の太さ
                opacity: 0.8,           //外枠の線の不透明度
                fillOpacity: 0.3      //塗りつぶしの不透明度
            };
            
            //座標の指定
            var position = [latitude, longitude];

            // 丸形マーカーのレイヤー追加
            var circleLayer = 
                L.circleMarker(position, 
                    circleMarkerOptions
            ).addTo(yfmap); 
            
            // ツールチップの追加
            var tooltip_text = "ID:" + athlete_id + " 売上:" + invoiced_amount_formatted;
            circleLayer.bindTooltip(tooltip_text);

        // forループの終わり
        }
    
    // requireの終わり
    });

// generateChartの終わり
};

CSSタブへの記述

@import url("https://unpkg.com/leaflet@1.9.4/dist/leaflet.css");

#yfmap{
    width:800px;
    height:500px;
}

参考

詳細な解説は以下を参照してください。