連想語・関連語API（メタデータ株式会社）と駅すぱあと路線図を連携してみた

:
<script src="https://rmap.ekispert.jp/production/rosen.js"></script>

<!-- jqueryの追加 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
:

:
<script>
    :
    rosen.on('selectStation', function(data) {
      // 駅がクリックされたら既にあるポップアップなどを全てクリアします
      rosen.clearAll();

      // 選択された駅を取得（１つだけ）
      select_station = data.stations[0];
      // 選択された駅にマーカーを表示
      rosen.setStationMarker(select_station.code);

      // 中野(東京都)のような都道府県部分があると関連語が取れないため削除
      // 駅を関連語として取得しやすくするために末尾に「駅」を追加
      query_name = select_station.name.split('(')[0] + "駅";
      $.ajax
        ({
          type: "GET",
          url: "http://wordassociator.ap.mextractr.net/word_associator/api_query",
          dataType: 'json',
          async: false,
          data: {
            query: query_name,
          },
          beforeSend: function (xhr) {
            // usernameとpasswordは別途設定。値は最初に登録したもの。
            xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
          },
          success: function (data){
            // 選択した駅に結果をポップアップで表示
            var message = "■" + select_station.name + "駅\n";
            data.forEach( function(value) {
              message = message + "関連語: " + value[0] + "(" + value[1] +")\n";
            })
            var text_popup = Rosen.textPopup();
            text_popup.setComment(message);
            rosen.setStationPopup(select_station.code, text_popup);

            // 関連語から末尾が駅のものだけ抽出
            var result_stations = data.filter( function( value ) {
              return value[0].lastIndexOf('駅') == (value[0].length - 1);
            })

            // 駅名から駅コードを取得してプロット（とりあえず上位5つ）
            for(let i = 0; i < 5; i++) {
              search_st_name = result_stations[i][0].substr(0, result_stations[i][0].length - 1);
              rosen.searchStationsByName(
                search_st_name,
                {limit: 1}
              ).then(function(stations){
                console.log(stations[0].code);
                rosen.setStationMarker(stations[0].code, {type: "circle", radius: result_stations[i][1]*50, color: "#0000ff", opacity: 0.3});
              });
            }
          }
        });
    });
</script>
:

  beforeSend: function (xhr) {
    // usernameとpasswordは別途設定。値は最初に登録したもの。
    xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));