駅すぱあと路線図で路線をハイライトしてみた

ヴァル研究所 Advent Calendar 2018 の20日目の記事です。
今回は、駅すぱあと路線図の「路線」をハイライトしてみます。

はじめに

駅すぱあと路線図は、鉄道の一枚絵の路線図です。
その特徴として、路線（つまり線路）に対してハイライトなどの処理ができることが上げられると思います。
今回は、そんな「路線」に関する機能をいくつか触ってみたいと思います。

駅すぱあと路線図については、以下の記事で簡単に紹介しています。
今から、すぐに、始める駅すぱあと路線図 - Qiita

今回やってみたこと

クリック（タップ）した路線をハイライトして、路線名をポップアップで表示
（駅すぱあとPlaygroundでできます）

コード

駅すぱあとPlaygroundのデフォルトでは、駅を選択すると駅名がアラート表示されます。
今回はその部分を書き換えるだけです。

書き換える既存コード部分

:
    // 駅がクリックされたら駅名を表示する
    rosen.on("selectStation", function(data) {
      if (data.stations) {
        data.stations.forEach(function(station) {
          alert(station.name);
        });
      }
    });
:

書き換えた後のコード（上記の部分をコピペで置き換えるだけです）

:
    // 路線がクリックされたら、ハイライトして路線名をポップアップする
    rosen.on('selectLine', function(data) {
      // クリック時に既存のハイライトとポップアップをクリア
      rosen.clearAll();

      // クリックした地点の付近に路線が複数ある場合は、近い路線を取得（近い順でソート）
      var line = data.lines[0];

      // 指定した路線をハイライト
      rosen.highlightLine(line.code, {color: '#' + line.color, opacity: 0.5, weight: 10});

      // 選択した路線に合わせてズームを調整
      rosen.fitBoundsByLineCode(line.code);

      // 路線の真ん中にポップアップを表示
      rosen.getSectionsByLineCode(line.code).then(function(sections) {
        var middle_index = Math.floor(sections.length / 2);   // 真ん中
        var section = sections[middle_index];
        var popup = Rosen.textPopup().setComment(line.name);

        rosen.setSectionPopup(section.code, popup);
      });
    });
:

ちょっと解説

と、言っても今回は公式で公開されているサンプル集とAPIリファレンスを基本的にはコピペしてちょっと手を加えただけですが。

路線選択のイベントをハンドル

    // 路線がクリックされたら、ハイライトして路線名をポップアップする
    rosen.on('selectLine', function(data) {

selectLineを指定することで、路線が選択された時のイベントをハンドルできます。

ハイライトとポップアップを初期化

      // クリック時に既存のハイライトとポップアップをクリア
      rosen.clearAll();

駅すぱあと路線図では、クリアしないと既存のハイライトやポップアップが残ります。
なので、必要に応じてクリアする処理を入れます。

路線情報の取得

      // クリックした地点の付近に路線が複数ある場合は、近い路線を取得（近い順でソート）
      var line = data.lines[0];

線上に複数の路線が存在する場合、それらが配列で取得できます。
今回は簡単にするために、最初の路線を取得しています。
取得した複数の路線に対して処理をしたい場合には、以下のサンプルが参考になると思います。
駅すぱあと路線図 | クリックで路線を選択する

路線のハイライト

      // 指定した路線をハイライト
      rosen.highlightLine(line.code, {color: '#' + line.color, opacity: 0.5, weight: 10});

路線のハイライトでは、色や透明度、太さなどの指定ができます。
APIリファレンスには、「Leaflet.jsのPathと同じオプションが使える」と、あるので、その辺に詳しいともう少しリッチにできるかもしれません。

画面のズーム

      // 選択した路線に合わせてズームを調整
      rosen.fitBoundsByLineCode(line.code);

指定した路線の路線全体が画面に収まるように表示範囲・ズームを変更する機能です。
面白い機能だと思ったので、とりあえず使ってみました（笑）

ポップアップの表示

        // 路線の真ん中にポップアップを表示
        rosen.getSectionsByLineCode(line.code).then(function(sections) {
          var middle_index = Math.floor(sections.length / 2);   // 真ん中
          var section = sections[middle_index];
          var popup = Rosen.textPopup().setComment(line.name);

          rosen.setSectionPopup(section.code, popup);
        });

以下のサンプルのコピペです。
駅すぱあと路線図 | 駅間にポップアップを置く

結果

以下のような感じになります。

おわりに

駅すぱあと路線図は、駅だけでなく、路線に対しても色々と処理ができるので楽しいですね。
路線にも手が加えられることで、実現したいことの幅も広がる気がしました。