HSPでleafletを使って地図を作る(サンプル)

-
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 ライブラリ)
	;*           地図タイル : 国土地理院タイル、オープンストリートマップ
	;*           URL  https://maps.gsi.go.jp/development/ichiran.html
	;*
	;*
	;****************************************************************************************

	#include "sqlele.hsp"

	#packopt type 0
	#packopt name "eqmpoint"
	#packopt runtime "hsprt"
	#packopt manifest "app.manifest"
	#packopt icon "SetDisp.Ico"
	#packopt hide 1
	
	#uselib "user32.dll"
	#func   SetWindowLong "SetWindowLongA" int,int,int
	#func   GetWindowLong "GetWindowLongA" int,int
	#func   InvalidateRect "InvalidateRect" int,int,int
	#func   MoveWindow "MoveWindow" sptr,sptr,sptr,sptr,sptr,sptr
	#func   DestroyWindow "DestroyWindow" int
	#func   GetWindowRect "GetWindowRect" int,var

	#define DIID_DWebBrowserEvents2     "{34A715A0-6587-11D0-924A-0020AFC7AC4D}"
	#define DISPID_NAVIGATECOMPLETE2    252
	#define TEMP_FILE dir_cur+"/exec.tmp"
	#define WS_MAXIMIZEBOX  0x00010000
	#define WS_SIZEBOX      0x00040000
	#define WM_SYSCOMMAND	$00000112
	#define WM_COMMAND		$00000111
	#define WM_SIZE			$00000005
	#define SC_MAXIMIZE		$0000F030

	#module
	#uselib "kernel32.dll"
	#cfunc  CreateMutex "CreateMutexA" int,int,sptr
	#cfunc  GetLastError "GetLastError"

	;***** 二重起動防止 *****
	#deffunc wexapend str prm1
	strname=prm1
	;***** 名前の文字列が省略された場合 *****
	if strlen(strname)==0 : strname="HSP340ONIWND"  ;Default String
	ret=CreateMutex(0,1,strname)
	;二重起動か？
	if GetLastError()==0    : return 0	;同じジョブが起動していない
	if GetLastError()==183  : return 1	;既に起動している
	return -1
	#global

	;***** 起動ディレクトリ取得 *****
	sdim Startdir,512
	if hspstat&1=0 { Startdir=dir_exe+"¥¥" : chdir dir_exe
	} else {
		Startdir=dir_cur+"¥¥"
	}
	chdir Startdir

	;***** データベース存在確認 *****
	exist Startdir+"setting¥¥eqmpoint.ini"
	if strsize ==-1 {
		dialog "データベースファイルが見つかりません。",0 : end
	}
	await

	wexapend "eqmpoint" : if stat : end

	;***** データベースオープン *****
	sql_open Startdir+"setting¥¥eqmpoint.ini"
	onexit goto *owari
	
	screen 0,ginfo_dispx,ginfo_dispy,2,(ginfo_dispx-728)/2,(ginfo_dispy-600)/2,728,600
	GetWindowLong hwnd, -16
	SetWindowLong hwnd, -16, stat | WS_MAXIMIZEBOX | WS_SIZEBOX
	color 240,240,240 : boxf
	pos 0, 0 : axobj ie, "Shell.Explorer.2", ginfo_dispx+16, ginfo_dispy-26 : objIE=stat
	
	hwndIE=objinfo(objIE, 2)
	if objIE == -1 {
		dialog "ActiveXコントロールの配置に失敗しました。", 1
		end
	}

	;***** HTMLタグ生成 *****
	sdim buff,10000 : sdim UPD_INFO,128,7
	
	buff = "<!DOCTYPE html>¥n"
	buff+= "<html>¥n"
	buff+= "<head>¥n"
	buff+= "  <meta charset=¥"shift-jis¥">¥n"
	buff+= "  <title>気象庁震度観測点マップ</title>¥n"
 	buff+= " <link rel=¥"stylesheet¥" href=¥"https://unpkg.com/leaflet@1.3.0/dist/leaflet.css¥" />¥n"
	buff+= "  <script src=¥"https://unpkg.com/leaflet@1.3.0/dist/leaflet.js¥"></script>¥n"
	buff+= "  <style>¥n"
	buff+= "        a        { font-size: 12px;text-decoration:none;color:#0000aa;font-family:Meiryo; }¥n"
	buff+= "        a:link   { font-size: 12px;text-decoration:none;color:#0000aa;font-family:Meiryo; }¥n"
	buff+= "        a:hover  { font-size: 12px;text-decoration:none;color:#aa0000;font-family:Meiryo; }¥n"
	buff+= "        body     { ont-size: 12px;font-family:Meiryo; }¥n"
	buff+= "  </style>¥n"
	buff+= "  <script>¥n"
	buff+= "    //***** マーカーに表示したい対象の緯度経度とポップアップする名称を設定 *****¥n"
	buff+= "    var gmapstr = ¥"https://maps.google.co.jp/maps?q=¥";¥n"
	buff+= "    var markerList = [

	sql_q "SELECT * FROM eqmaptbl"
	count = stat
	repeat count,1
		UPD_INFO(1)  = sql_v("Tcode")
		UPD_INFO(2)  = sql_v("Tfuken")
		UPD_INFO(3)  = sql_v("ChikiName")
		UPD_INFO(4)  = sql_v("MoniPoint")
		UPD_INFO(5)  = sql_v("MoniAdd")
		UPD_INFO(6)  = sql_v("Ido")
		UPD_INFO(7)  = sql_v("Keido")

		buff+= "      { pos: ["+UPD_INFO(6)+","+UPD_INFO(7)+"], name: ¥""+UPD_INFO(4)+"<br><a href=¥'¥"+gmapstr+"
		buff+= "¥""+UPD_INFO(6)+","+UPD_INFO(7)+"¥' target=¥'_blank¥'>"+UPD_INFO(5)+"</a>¥" },¥n"

		sql_next
	loop
	sql_close
	
	buff+= "    ];¥n"
	buff+= "    function init(){¥n"
	buff+= "      var map = L.map(¥'mapcontainer¥');¥n"
	buff+= "      //***** 座標の指定 *****¥n"
	buff+= "      var mpoint = [38.757436, 140.312227];¥n"
	buff+= "      map.setView(mpoint, 6);¥n"
	buff+= "      //***** 3つの地図タイルを切り替える *****¥n"
	buff+= "      var gsi =L.tileLayer(¥'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png¥',¥n"
	buff+= "        {attribution: ¥"<a href=¥'https://maps.gsi.go.jp/development/ichiran.html¥' target=¥'_blank¥'>地理院タイル</a>¥"});¥n"
	buff+= "      var gsipale = L.tileLayer(¥'http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png¥',¥n"
	buff+= "        {attribution: ¥"<a href=¥'http://portal.cyberjapan.jp/help/termsofuse.html¥' target=¥'_blank¥'>地理院タイル</a>¥"});¥n"
	buff+= "      var osm = L.tileLayer(¥'http://tile.openstreetmap.jp/{z}/{x}/{y}.png¥',¥n"
	buff+= "        {  attribution: ¥"<a href=¥'http://osm.org/copyright¥' target=¥'_blank¥'>OpenStreetMap</a> contributors¥" });¥n"
	buff+= "      //baseMapsオブジェクトのプロパティに3つのタイルを設定¥n"
	buff+= "      var baseMaps = {¥n"
	buff+= "        ¥"地理院地図¥" : gsi,¥n"
	buff+= "        ¥"淡色地図¥" : gsipale,¥n"
	buff+= "        ¥"オープンストリートマップ¥"  : osm¥n"
	buff+= "      };¥n"
	buff+= "      L.control.layers(baseMaps).addTo(map);¥n"
	buff+= "      gsi.addTo(map);¥n"
	buff+= "      //***** 画像マーカを設定 *****¥n"
	buff+= "      var markerIcon = L.icon({¥n"
	buff+= "           iconUrl: './image/ball.png',¥n"
	buff+= "           iconRetinaUrl: './image/ball.png',¥n"
	buff+= "           iconSize: [18,18],¥n"
	buff+= "           iconAnchor: [8,8],
	buff+= "           popupAnchor: [0,-16]¥n"
	buff+= "      });¥n"
	buff+= "      //***** マーカー全体が入るボックスを作る *****¥n"
	buff+= "      var bound = L.latLngBounds(markerList[0].pos, markerList[0].pos);¥n"
	buff+= "      //***** markerListの設定でマーカーを追加 *****¥n"
	buff+= "      for (var num in markerList) {¥n"
	buff+= "        var mk = markerList[num];¥n"
	buff+= "        var popup = L.popup().setContent(mk.name);¥n"
	
	;***** マーカ画像がない場合は、標準マーカを使用 *****
	exist Startdir+"image¥¥ball.png"
	if strsize ==-1 {
		buff+= "        //●標準マーカ (使用しない)¥n"
		buff+= "        L.marker(mk.pos).bindPopup(popup).addTo(map);¥n"
	}else{
		buff+= "        //●画像マーカ¥n"
		buff+= "        L.marker(mk.pos,{ icon:markerIcon }).bindPopup(popup).addTo(map);¥n"
	}
	
	buff+= "        //***** マーカー全体が入るボックスを広げる *****¥n"
	buff+= "        bound.extend(mk.pos);¥n"
	buff+= "      }¥n"
	buff+= "    }¥n"
	buff+= "  </script>¥n"
	buff+= "</head>¥n"
	buff+= "<body onload=¥"init()¥">¥n"
	buff+= "  <div id=¥"mapcontainer¥" style=¥"position:absolute;top:0;left:0;right:0;bottom:0;¥"></div>¥n"
	buff+= "</body>¥n"
	buff+= "</html>¥n"

	;***** 一時ファイルとしてセーブ *****
	bsave TEMP_FILE, buff, strlen(buff)
	;***** HTMLファイルを起動 *****
	ie->"Navigate" "file:///"+TEMP_FILE
	comevent ie_event, ie, DIID_DWebBrowserEvents2, *event

	;***** ウィンドウを最大化 *****
	oncmd gosub *GUIResize,WM_SIZE
	sendmsg hwnd,WM_SYSCOMMAND,SC_MAXIMIZE,0
	gsel 0,1
	stop

*GUIResize
	;***** リサイズ処理 *****
	gsel 0,1
	InvalidateRect hwndIE,0,1
	MoveWindow hwndIE, 0, 0, ginfo_winx+16, ginfo_winy-26, 1
	color 240,240,240 : boxf
	color 200,200,200
	line 0,ginfo_winy-26,ginfo_winx+16, ginfo_winy-26
	font "Meiryo UI",11,0 : color 20,20,20
	pos 10,ginfo_winy-20 : mes "出典：国土地理院 - 地理院地図、淡色地図 | OpenStreetMap - contributors"
	return

*event
	dispid = comevdisp(ie_event)
	if dispid = DISPID_NAVIGATECOMPLETE2 : title "気象庁震度観測点マップ"
	return


*owari
	;***** 終了処理 *****
	gsel 0,0
	await
	;***** 一時ファイルを削除 *****
	exist TEMP_FILE
	if strsize !=-1 {
		delete TEMP_FILE
	}
	delcom ie
	end

3.ダウンロード

提供するソースコードのライセンスは、CC0 (クレジット表示不要、改変可、商用可) とします。自由に利用して頂いてかまいません。 尚、データの取得やプログラム実行において損害等が生じた場合は、筆者は一切の責任も負いません。全て自己責任でお願いします。

実行形式(exe)ファイルとソースコード一式のアーカイブは下記よりダウンロードして下さい。

ダウンロード

■関連記事
・Leafletで地図を作ろう － (気象庁震度観測点マップ)

コメント

コメントを投稿

このブログの人気の投稿

キーボードのキーコードの一覧表

-
イメージ
1.概要 HSPやExcel VBAなどを利用していて、キーボードのキー定数が知りたい場合があります。その都度、ネットで調べているのが手間なので、 一覧表にして見ました。このキーコードは、 Win32API の keybd_event 関数等を利用して送信することができるコードです。 プログラム上からキーコードを送信する場合は、誤操作防止のため十分なウェイトを入れるなりの工夫が必要です。 2.キーボードのキーコード一覧表 キーボードのキーコード一覧表です。全部で127個あります。 キーボードのキーコード一覧表 No. 記号定数名 値 ( HEX ) 値 ( DEC ) 意味 ( 該当するキー ) 1  VK_LBUTTON $01 01 2  VK_RBUTTON $02 02 3  VK_CANCEL $03 03  Cancel（[Ctrl]+[Break]) 4  VK_MBUTTON $04 04 5  VK_BACK $08 08  [BackSpace] 6  VK_TAB $09 09  [Tab] 7  VK_CLEAR $0C 12 8  VK_RETURN $0D 13  [Enter] 9  VK_SHIFT $10 16  [Shift] 10  VK_CONTROL $11 17  [Ctrl] 11  VK_MENU $12 18  [Alt] 12  VK_PAUSE $13 19  [Pause] 13  VK_CAPITAL $14 20  [CapsLock] 14  VK_ESCAPE $1B 27  [Esc] 15  VK_SPACE $20 32  [スペースキー] 16  VK_PRIOR $2...

Excelアドインで日本語形態素解析

-
イメージ
1.概要 日本語形態素解析とは、文法的な情報の注記の無い自然言語のテキストデータ（文）から、対象言語の文法や、辞書と呼ばれる単語の品詞等の情報に基づき、 形態素（Morpheme, おおまかにいえば、言語で意味を持つ最小単位）の列に分割し、それぞれの形態素の品詞等を判別する作業です。（出典:Wikipedia） 形態素解析エンジンとしては、Mecabが有名です。筆者もPythonにインストールして、テキストマイニングに利用しています。しかし、会社などで利用したい 場合は、このような環境を個人的な利用目的で構築するにしても、セキュリティ上の問題などでIT管理者などから利用許可が下りない場合があります。 今回は、普段から利用しているExcelのアドインでテキストマイニングをして見たいと思います。特別なサーバーなどへのインストールなしで、 個人PCにアドインのインストール許可さえもらえれば誰でも簡単にテキストマイニング(ワードクラウド)分析をすることができます。 2.利用方法 (1)Excelのアドインである「E2D3」を追加します。「挿入」→「アドインを入手」をクリックし      「データ分析」を選択して、「E2D3」を探します。見つかったら、「追加」をクリックしま      す。これで、「E2D3」が利用できるようになります。 (2)分析するデータ(テキスト文書)を準備します。 (3)下記サイトの日本語形態素解析サービス(無料ツール)を利用して、文書を解析し品詞毎に分解、      統計データとして出力します。 日本語形態素解析サービス(無料ツール) URL : https://opendata-web.site/tool/parse/ ※ブックマーク等に登録しておくと良いでしょう。 (4)分析するデータ(テキスト文書)をテキストボックスに貼付け、解析ボタンをクリックします。 (5)解析結果が日本語形態素と統計の2種類画面出力されるので、統計の表をコピペして、Excelの      空きシートに一時的に貼り付けます。 (...

階層構造JSONファイルの作成

-
イメージ
1.はじめに 仕事や趣味でいろいろなデータを扱いますが、プログラミングで扱うデータ形式も多種多様でデータベース、テキスト、csv、xml、json形式など 思い付くだけで数十種類でてきます。データの見える化 (可視化) をやりたくて階層構造のJSON形式のファイルを扱う必要性があり、 元データ収集・編集 ⇒ Excelでデータ作成 ⇒ CSV出力 ⇒ 階層構造のJSONファイルへ変換出力と言ったステップでJSONファイルを作成して見ましたので紹介致します。 2.階層構造CSVtoJSONコンバータ 最初は、テキストエディタで手作業でJSONファイルを作成しょうと試みましたが、{}の対応付けや[,などの挿入漏れなど ミスすることが多くてデータを読み込むとエラーで動かないことの連続でした。何とか効率良く元データより階層構造の JSON形式のファイルを作成することができないものかとネット検索しても意図したものを見つけ出すことが出来ませんでした。 そこで今回、試行錯誤してExcel VBAで作成した 「階層構造CSVtoJSONコンバータ」 によるデータ作成手順をまとめて見ました。 階層構造のJSONファイルとは、 親、子、孫、曾孫・・・といった 階層構造のデータ形式のァイル です。 2-1.データの収集について まずは、目的とすべき元となるデータを収集しなければなりません。データの入手や収集手段はいろいろあると思いますが、 1回限りでのみ利用する場合や不定期、日次、週次、月次など継続的に利用する場合に応じて効率良い方法を選択する必要があります。 企業では自社内の各種システムにて収集や加工・編集などができるツール類もあると思いますが、個人ではなかなか揃えられません。 尚、今回は小規模なデータを扱うことを前提としているので効率的なデータの収集方法などについては別の機会にでも考えていきたいと 思います。ここでは、 「階層構造CSVtoJSONコンバータ」 の説明のためのテストデータを利用しての手順について説明します。 2-2.作成手順 (1)元データの準備 (テスト用に鳥類目録データの一部を利用) (2)Excelで元データを利用して、階層構造のデータ表を作成する。     ※【お願い】ファイルの終端判定のため、A列の末...

TOP