駅すぱあと路線図でLeaflet.jsを触ってみる（Tooltip篇）

11144 ワード
駅すぱあと路線図 leaflet 駅すぱあと leaflet テキストリンク

ヴァル研究所 Advent Calendar 2019 5日目の記事です。

駅すぱあと路線図はLeaflet.jsを利用しています。
駅すぱあと路線図のリファレンスにはないけど、Leaflet.jsのリファレンスにはある機能を触っていきたいと思います。
今回は、Tooletipという機能を利用してみます。

はじめに

駅すぱあと路線図とは？

「駅すぱあと路線図」とは、株式会社ヴァル研究所が提供している路線図です。
詳しく知りたい方は、以下の記事をご覧ください。
今から、すぐに、始める駅すぱあと路線図 - Qiita

Leaflet.jsとは？

Leaflet.jsは、JavaScriptの地図のオープンソースライブラリになります。
駅すぱあと路線図は、このLeaflet.jsを利用しています。

Leaflet.jsについて知りたい方は、以下の記事が参考になりそうです。
地図ライブラリの本命「Leaflet」を5分で理解&導入する - Qiita

なお、駅すぱあと路線図は2019年12月3日現在で、Leaflet.jsのバージョン1.5.1を利用しているので、参考にするドキュメントは以下のバージョン1.5.0及び1.5.1用のものを参照します。
Documentation - Leaflet - a JavaScript library for interactive maps

ツールチップとは？

Wikipediaより引用。

ツールチップ（英: tooltip）とは、マウスオーバーした際に表示される枠内の補足説明などのことである。

GithubやSlackなんかで「○ days ago」みたいなところにマウスを当てると、タイムスタンプが表示されたりするやつですね。
（↓ こんなやつ）

Leaflet.jsにもTooltip機能はありますが、駅すぱあと路線図のリファレンスにはありません。

駅すぱあと路線図からLeaflet.jsのTooltipを触ってみる

今回は、駅すぱあと路線図の駅のマーカーにツールチップを設定してみます。

Leaflet.jsのTooltipは、Markerオブジェクトに設定できるものになります。
https://leafletjs.com/reference-1.5.0.html#tooltip

駅すぱあと路線図では、setStationMarkerのようなメソッドの戻り値で、Leaflet.jsのMarkerオブジェクトを取得することができます。
ただし、メソッドの戻り値自体はPromiseオブジェクトになるため、Promiseの知識が多少必要になります。ただ、Promiseの使い方についても、駅すぱあと路線図のリファレンスに説明があるので、それを見れば大体わかります。
http://rmap.ekispert.jp/production/doc/document.html#preface

サンプルコード

駅すぱあと路線図を表示するテンプレートは駅すぱあと路線図サンプル集のサイトからダウンロードできます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello.html</title>

<link rel="stylesheet" href="https://rmap.ekispert.jp/production/rosen.css" />
<script src="https://rmap.ekispert.jp/production/rosen.js"></script>

<style>

  html, body { width: 100%; height: 100%; }
  #map { width: 100%; height: 100%; }
  /* ツールチップにCSSを適用することもできる */
  .custom-tooltip {background-color: rgba(255,0,0); color: white;}

</style>

<script type="text/javascript">

  var rosen;

  function init() {
    rosen = new Rosen("map", {            
      apiKey: "************",             // アクセスキー
      apiSetting: "https",                // HTTPS版のAPIサーバを指定
      tileSetting: "https",               // HTTPS版のタイルサーバを指定
      centerStation: 22671                // 初期表示の位置を高円寺駅に設定
    });

    // 高円寺駅にカスタムマーカーをセット
    rosen.setStationMarker(22671).then(function (marker) {
      // カスタムマーカーにツールチップを設定
      marker.bindTooltip("高円寺", {
        offset: [0,0],
        direction: "center",
        // permanent: true,
        // sticky: false,
        // opacity: 1.0,
        // className: 'custom-tooltip'
      });
    });
  }

  window.addEventListener('load', init);

</script>
</head>
<body>
  <div id="map"></div>
</body>
</html>

サンプルコードのポイント

PromiseからMarkerオブジェクトを取得してTooltipを設定する

:
    rosen.setStationMarker(22671).then(function (marker) {
      // カスタムマーカーにツールチップを設定
      marker.bindTooltip("高円寺", {
        offset: [0,0],
        direction: "center",
      });
    });
:

駅すぱあと路線図のsetStationMarkerのリファレンスに、指定した駅コードの駅にマーカーをセットします。 成功時コールバックの引数は L.Marker オブジェクトです。 という説明があるので、成功時のコールバック引数に bindTooltip を設定します。

デモ

こんな感じで簡単に駅すぱあと路線図にLeaflet.jsのTooltipを適用することができました。

駅すぱあと路線図はズームアウトするとピンを立てた駅が何か分かりづらくなってしまいますが、Tooltipを利用するとマウスオーバーするだけで何駅かを表示することもできたりするので便利ですね。

おわりに

自分はJavaScriptもLeaflet.jsも詳しくないため、今回は簡単になりましたが、Leaflet.jsのドキュメントを見るとTooltipにイベントを設定することもできたりするなど、色々と拡張することができそうです。

とりあえず今回は、簡単に駅すぱあと路線図からLeaflet.jsを触ってみることが分かったので、他にも試してみたいと思います。