グレおやぢの日常

1.概要 コロナ渦の中で、旅行にも行けず外出も自粛している人も多いのではないでしょうか？せめて旅行気分を 味わってみようと、地図上で東海道五十三次を巡っています。東海道五十三次については、当ブログ記事で ルートマップ として公開しています。 その地図の作成過程で調べた資料を纏めて見ました。地図のスライドメニューからのリンクでも閲覧できるようにしていますが、 せっかく作成したコンテンツが埋もれてしまうので、紹介することとしました。 2.宿場の概要と距離換算表 東海道五十三次基本情報として、宿場の概要と距離の換算表の二種類について纏めてみました。 宿場の概要を纏めるに当たり、下記サイト様を参考とさせて頂きました。 ●出典・引用・参考サイト 1.距離データは、下記サイトで提供している計算ツールにて得られた結果を利用しました。 ・keisan 江戸 ウオーキング東海道五十三次 2.浮世絵画像は、下記サイトで提供している画像ファイルを利用しました。 ・浮世絵著作権フリー作品「東海道五十三次」 3.掲載されている五十三次の一覧より宿場名や距離、リンクされる各宿場の概要を参考     および一部を抜粋しました。 ・ウィキペディア（Wikipedia）「東海道五十三次」 4.東海道への誘いのＱ＆Ａから五十三次の意味について参考・引用しました。 ・「東海道への誘い」 国土交通省関東地方整備局 横浜国道事務所 2-1.宿場の概要 東海道は、江戸日本橋の武蔵国から相模、伊豆、駿河、遠江、三河、尾張、伊勢、伊賀、近江、山城の国々を通り、 京都の 三条大橋まで五十三次あります。その総距離は約490kmでありました。徳川家康は、慶長６年 (１６０１年)に東海道に 宿駅伝馬制度を敷き、街道沿いに宿場を設けました。公用の旅人や物資の輸送は無料で次の宿駅まで送り継ぐという制度でありました。 輸送の範囲は原則として隣接する宿場までで、これを越えて運ぶことは禁止されていました。 東海道には江戸から京都までの間に ５３の宿場があり、江戸から京都まで物資を運ぶ場合は５３回の継ぎ替えをする ことから「五十三次」と呼ばれるようになったようです。 DEMO    宿場の概要 2-2.距離換算表 東海道五十三次は、江戸日本橋を起点として各宿場

1.東海道五十三次ルートマップ 作品例として、東海道五十三次ルートマップを作成します。この題材は歌川広重の東海道五十三次の浮世絵を利用して 江戸(日本橋)から京都(三条大橋)までの487.8キロメートルのルートを辿っていきます。起点から終点までの間の宿場地点に 1番から55番までのアイコン画像マーカーを配置しています。マーカーをクリックするとポップアップに広重の浮世絵画像と宿場名や距離などを 表示します。 ソースコードの大部分は、すでに公開している 「気象庁震度観測点マップ」からの流用です。内容が重複するので「気象庁震度観測点マップ」で説明していない 追加、変更部分のみを中心に 説明 していきます。 浮世絵の画像素材は、下記サイト様にて提供されているものを利用させて頂きました。 取得先 : 浮世絵著作権フリー作品「東海道五十三次」 作品例のポイントとなる部分は、日本橋から京都までの約500キロメートルのルート線データの作成方法です。地図上の旧東海道を探しながら 線と線を繋いでいきます。線を繋ぐ位置の座標(緯度・経度)を取得して指定いかなければなりません。作成方法についても詳しく説明します。 2.ソースコードの説明 東海道五十三次ルートマップのメインとなる(toukaidou.html)コードです。各実装部品の定義ファイル類は外部ファイルとしています。 leaflet.css、all.css、toukaidou.css、leaflet.js、SlideMenu.js、toukaidou.js、toukaidef.js、route531.js、route532.jsライブラリ等をヘッダー部分に指定しています。 toukaidou.cssとtoukaidou.js、toukaidef.js、route531.js、route532.jsは筆者が作成したものです。 DEMO //***** 宿場名配列 ***** var selbox= [ { val:"",name:"宿場名"},{val:"0",name:"01.日本橋 (にほんばし)"},{val:"1",name:"02.品川宿 (しながわ)