[JS]なにこれ楽しい！インタラクション満載の路線図を実装するスクリプト -transitive.js

サイト構築 -JavaScript

Post on:2014年5月23日

sponsorsr

路線図の入り組んでいるところって、分かりにくいですよね。
そんな問題を解決するCanvasで実装するインタラクション満載の路線図のスクリプトを紹介します。

↓くっついてて分かりにくい箇所も、こんな感じに移動できます。

transitive.js -GitHub

実際の動作は、下記ページで確認できます。

デモページ

上のアニメーションgifみたいに移動させることだけでなく、ホイール操作での拡大縮小やドラッグ操作などもできます。

路線図は各要素（駅やルートなど）のテキストファイルを元に、Canvasで描画されています。
各要素のデータ（オレンジのルート）はこんな感じです。

"route": "ORANGE",
      "from": "12488",
      "to": "7588",
      "fromName": "COURTHOUSE METRO STATION",
      "toName": "METRO CENTER METRO STATION",
      "routeShortName": "Orange",
      "routeLongName": "Metrorail Orange Line",
      "rideStats": {
        "min": 600,
        "avg": 600,
        "max": 600,
        "num": 459
      },

実装のテクノロジは、下記ページをご覧ください。