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

[Yellowfin](https://yellowfin.co.jp)のJavaScriptグラフで、LeafletとOpenStreetMapを使ってバブルを表示するサンプルを作成しました。

![スクリーンショット 2023-10-20 10.54.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116818/5da2a461-cfe3-f0e1-2ab5-7e14967ca222.png)

具体的な手順は[こちら](https://qiita.com/ExtremeCarvFJ/items/ee60a9fd2860d177b702)や[こちら](https://qiita.com/ExtremeCarvFJ/items/973b46e29978de2e180f)の記事を参考にしています。

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

![スクリーンショット 2023-10-20 10.55.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116818/f97ef4d1-caab-49d5-3b43-7cd027f24403.png)

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

```javascript: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:CSSタブへの記述
@import url("https://unpkg.com/leaflet@1.9.4/dist/leaflet.css");

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

## 参考

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

* [Tutorials - Leaflet](https://leafletjs.com/examples.html)
* [Documentation - Leaflet](https://leafletjs.com/reference.html)
* [JavaScript グラフ - Yellowfin Guide 9](https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293908)
* [緯度経度情報を元に走行履歴を地図上に表示 ‐ Yellowfin と Leaflet / OpenStreetMapの連携](https://qiita.com/ExtremeCarvFJ/items/ee60a9fd2860d177b702)
* [緯度経度情報を元に走行履歴を地図上に表示 ‐ Yellowfin と Leaflet / OpenStreetMapの連携 その2](https://qiita.com/ExtremeCarvFJ/items/973b46e29978de2e180f)