グレおやぢの日常

1.概要 地図については、 Leafletで地図を作ろう － (気象庁震度観測点マップ) でJavaScriptで作成したものを 紹介していますが、今回は、このLeaflet地図をHSP言語に一部移植して見ました。JavaScript版では、外部ファイル化した定義コードやライブラリもあり、それらをHSPコード内に記述するのも めんどうだったので、サンプルということで簡易版として再現して見ました。 2.ソースコード ソースコードは下記の通りです。HSPからHTMLコードなどを記述して生成後、起動させる方法として 良く利用される手法を使っています。具体的なコードとしては、193～197行目となります。 マーカーやポップアップの定義部分をデータベースのテーブルとして持ち、読み出して他のコードと同様に バッファに格納して一時ファイルとして保存後、 ie->"Navigate" で起動させています。 該当部分は、115行～136行目の部分です。他の部分としては、ウィンドウ制御として起動時の最大化処理と リサイズ処理をWindows APIを利用して処理しています。 地図としてメインとなるHTML(Javascript)は、 Leafletで地図を作ろう － (気象庁震度観測点マップ) を 参照願います。 ;**************************************************************************************** ;* ;* 気象庁震度観測点マップ (eqmpoint) Ver1.0 ;* ;* ＜処理の概要＞ ;* 本プログラムは、象庁震度観測点一覧表の住所から緯度・経度を調査して ;* 整理したものから、leafletを利用してマッピングしたものである。 ;* ;* ;* 出典： 気象庁震度観測点一覧表 ;* URL https://www.data.jma.go.jp/svd/eqev/data/kyoshin/jma-shindo.html ;* 地図 : leaflet (オープンソースJavascript ライブラリ) ;* 地

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.安楽寺 (あんらくじ)"}

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.甲州三嶌越"},

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.品川宿 (しながわ)

1.都道府県別人口統計マップ 作品例として、都道府県別人口統計マップを作成します。この題材はベース地図タイル上に都道府県別の人口統計人数をレンジ(10段階)に 設定した範囲に応じた都道府県境界を設定した色にて塗りつぶし色分けして表示します。 ソースコードの大部分は、すでに公開している 「気象庁震度観測点マップ」からの流用です。内容が重複するので「気象庁震度観測点マップ」で説明していない 追加、変更部分のみを中心に 説明 していきます。 都道府県別の色分け描画部分のソースコードは、下記のサイト様のサンプルコードより借用させて頂きました。 URL : https://knooto.info/leaflet-examples/ URL : https://knooto.info/example/leaflet/pref-map-chart.html マップポリゴンデータ (var prefs)は、下記のサイト様より入手したものを利用させて頂きました。 データ元 : https://www.itdashboard.go.jp/js/data/prefectures.geojson 参考 : https://rch850.hatenablog.com/entry/2019/05/21/013618 2.ソースコードの説明 都道府県人口統計マップのメインとなる(demographics.html)コードです。各実装部品の定義ファイル類は外部ファイルとしています。 leaflet.css、all.css、demogra.css、leaflet.js、SlideMenu.js、jsframe.js、demographics.js、pospop.js、prefs.jsライブラリ等をヘッダー部分に指定しています。 demogra.css、demographics.js、pospop.jsは筆者が作成したものです。尚、マップポリゴンデータ(geoJSONデータ)は上記で入手したものをprefs.jsとしました。 DEMO //***** テキスト時計 ***** function clock() { var twoDigit =function(num){ 　 var digit