Leafletで地図を作ろう － (富嶽三十六景浮世絵マップ)
1.富嶽三十六景浮世絵マップ 作品例として、富嶽三十六景浮世絵マップを作成します。この題材は葛飾北斎の富嶽三十六景の浮世絵を利用して 浮世絵が書かれた場所と思われる所にアイコン画像マーカーを配置しています。 マーカーをクリックするとポップアップに広重の浮世絵画像と浮世絵名や場所などを表示します。 ソースコードの大部分は、すでに公開している「気象庁震度観測点マップ」からの流用です。内容が重複するので「気象庁震度観測点マップ」で説明していない 追加、変更部分のみを中心に説明 していきます。 浮世絵の画像素材は、下記サイト様にて提供されているものを利用させて頂きました。 取得先 : 著作権フリー作品「富嶽三十六景」 2.ソースコードの説明 富嶽三十六景浮世絵マップのメインとなる(toukaidou.html)コードです。各実装部品の定義ファイル類は外部ファイルとしています。 leaflet.css、all.css、fugaku.css、leaflet.js、SlideMenu.js、fugaku.js、fugakuidef.jsライブラリ等をヘッダー部分に指定しています。 fugaku.cssとfugaku.js、fugakuef.jsは筆者が作成したものです。 DEMO //***** 浮世絵名配列 ***** var selbox= [ { val:"",name:"浮世絵名"},{val:"0",name:"01.磯川雪ノ旦"},{val:"1",name:"02.遠江山中"},{val:"2",name:"03.尾州不二見原"}, { val:"3",name:"04.五百らりん寺さざねどう"},{val:"4",name:"05.御厩川岸より両国橋夕陽見"},{val:"5",name:"06.江戸日本橋"},{val:"6",name:"07.甲州三嶌越"},
