Leafletで地図を作ろう － (四国遍路巡礼マップ)
1.四国遍路巡礼マップ 作品例として、四国遍路巡礼マップを作成します。この題材は弘法大師空海のゆかりの地を地図上で巡ります。 八十八ヶ所の寺院などを選び四国八十八ヶ所霊場を開創された空海の御跡である八十八ヶ所霊場にアイコンマーカーを配置しました。 マーカーをクリックするとポップアップに寺院名や場所などを表示します。 ソースコードの大部分は、すでに公開している「気象庁震度観測点マップ」からの流用です。内容が重複するので「気象庁震度観測点マップ」で説明していない 追加、変更部分のみを中心に説明 していきます。 ポップアップ内で利用しているお坊さんの画像素材は、下記サイト様にて提供されているものを利用させて頂きました。 取得先 : イラストポップ(出典：illpop) お坊さんのイラスト 2.ソースコードの説明 四国遍路巡礼マップのメインとなる(henro.html)コードです。各実装部品の定義ファイル類は外部ファイルとしています。 leaflet.css、all.css、henro.css、leaflet.js、SlideMenu.js、henrodef.js、henro88.jsライブラリ等をヘッダー部分に指定しています。 henro.cssとhenrodef.js、henro88.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.安楽寺 (あんらくじ)"}
