ホチキス先生の「プログラマーと呼ばれたい」

InfoPath & SQL Server !

Archive for the ‘Bing Maps’ Category

SQL Server に都市名を保存しておき Bing Maps から緯度経度値を取得する。そしてWebBrowser コントトールにカスタム URL を使って Bing Map を表示する。

leave a comment »

Bing Maps は単にブラウザを使って地図を表示するだけではなく、様々なオプションが用意されており開発者にとって使いやすい環境を提供している。たとえば Bing Maps のマッピングソリューションとカスタム URL を利用することによって、SQL Server データベースに都市名を取得しておき、データグリッドビューに表示してクリックすることで WebBrowser コントロールにマップを表示するようなアプリケーションを簡単に作ることができる。

BingMapVisualStudio_001_mid_640

試しにテスト用のアプリケーションを作ってみたのが上のものだ。SQL Server には世界各国の首都データがストアしてあり、首都名から Bing Maps API を使って緯度経度値を取得している。その緯度経度値から Bing Maps のカスタム URL を使って地図を WebBrowser に表示している。

このアプリケーションを本校の地理の授業で使ってもらおうと思っている。世界の都市を分類し、単元の目標に応じた地図を世界地図上で示す。拡大縮小をしマップをドラッグすることで地理がわかる。

この Bing Maps を使う Tips については、2019年6月22日(土)開催の .NETラボで解説します。場所は東京品川、日本マイクロソフト本社。

勉強会の申し込みはこちら「connpass」から。
https://dotnetlab.connpass.com/event/133891/?fbclid=IwAR3DsFRd4xIPZ5BO4wUN6HV_atukJCRgPfLp44r-rcfq7QzLdcks2eLvcrk

.NETラボ
http://dotnetlab.net/

2019年6月1日

松本 吉生(まつもとよしお)

Microsoft MVP Data Platform
京都に生まれ、神戸で幼少期を過ごす。大学で応用化学を学んだのち、理科教諭として高等学校に勤務する。教育の情報化が進む中で校内ネットワークの構築運用に従事し、兵庫県立明石高等学校で文部科学省の「光ファイバー網による学校ネットワーク活用方法研究開発事業」に携わる。兵庫県立西宮香風高等学校では多部制単位制の複雑な教育システムを管理する学籍管理データベースシステムをSQL ServerとInfoPath、AccessなどのOfficeソフトウエアによるOBA開発で構築・運用する。2015年から2017年まで兵庫県立神戸工業高等学校でC#プログラミング、IoTなどのコンピュータ教育を行い、現在は兵庫県立神戸甲北高等学校に勤務する。2004年からマイクロソフトMVP(Microsoft Most Valuable Professional)を受賞し、現在15回目の連続受賞。2016年にマイクロソフト認定教育者(Microsoft Innovative Educator Experts : MIEE)を受賞し、現在4回目の連続受賞。

Visual Studio 2019 C# アプリケーション開発 – SQL Server と Bing Maps (1) – 緯度経度情報から地図を表示する Bing Maps のカスタム URL について

leave a comment »

住所や緯度経度情報から地図を表示するアプリケーションを作るにあたって気づいたことがいくつかある。ひとつはWebBrowserコントロールに Bing Maps を表示するとき、カスタムサイズの地図取得をするには embed オプションを使うことだった。embed オプションを使ったカスタム URL ならフォーム上の WebBrowser コントトールにぴったり収まる地図を取得することができる。これについては以前に書いた記事を見てほしい。

Bing Maps をアプリケーションで利用する – カスタムサイズのマップを WebBrowser コントロールに表示する – Visual Studio 2019 C#

Bing Maps のカスタム URL を使えば、緯度経度情報を指定して地球上の任意の地点を中心とする地図を取得することができる。たとえば兵庫県の神戸三ノ宮駅の緯度経度情報は、経度 135.194900、緯度 34.694840 であり、この地点を中心とする地図を表示するカスタム URL は次のようになる。

https://www.bing.com/maps?cp=34.694840~135.194900

cp オプションの後ろに緯度と経度の値をチルダで挟む書き方だ。これに地図の拡大率を指定するlvlオプションを使い、もっと拡大した地図を表示させてみよう。オプションを追加するには & 記号でつないていく。なおレベルのオプションは 1 から 20 までで、徒歩での行き先を示すための一般的な地図利用なら 18 くらいが適当だろう。

https://www.bing.com/maps?CP=34.694840~135.194900&lvl=18

地図上にコレクションのマークを付けることもできる。コレクションの位置を指定するオプションは sp で、緯度経度の指定を point オブジェクトで記述する。point オブジェクトの記述方法は、point に続いてドットをはさみ経度と緯度の値をアンダースコアで繋いで記述する。

https://www.bing.com/maps?CP=34.694840~135.194900&lvl=18&sp=point.34.694840_135.194900

「無題のアイテム」という名前のコレクションが表示されるはずだ。カスタム URL の point オブジェクトには緯度経度情報に加えてコレクションに表示する文字列を送ることもできる。このとき、文字にスペースを入れるには制御文字 %20 を使う。

https://www.bing.com/maps?CP=34.694840~135.194900&lvl=18&sp=point.34.694840_135.194900_Kobe%20Sannomiya%20Station

コレクションの表示を日本語にすることもできる。

https://bing.com/maps/default.aspx?CP=34.694840~135.194900&lvl=18&sp=point.34.694840_135.194900_神戸三ノ宮駅

2019年5月12日

松本 吉生(まつもとよしお)

Microsoft MVP Data Platform
京都に生まれ、神戸で幼少期を過ごす。大学で応用化学を学んだのち、理科教諭として高等学校に勤務する。教育の情報化が進む中で校内ネットワークの構築運用に従事し、兵庫県立明石高等学校で文部科学省の「光ファイバー網による学校ネットワーク活用方法研究開発事業」に携わる。兵庫県立西宮香風高等学校では多部制単位制の複雑な教育システムを管理する学籍管理データベースシステムをSQL ServerとInfoPath、AccessなどのOfficeソフトウエアによるOBA開発で構築・運用する。2015年から2017年まで兵庫県立神戸工業高等学校でC#プログラミング、IoTなどのコンピュータ教育を行い、現在は兵庫県立神戸甲北高等学校に勤務する。2004年からマイクロソフトMVP(Microsoft Most Valuable Professional)を受賞し、現在15回目の連続受賞。2016年にマイクロソフト認定教育者(Microsoft Innovative Educator Experts : MIEE)を受賞し、現在4回目の連続受賞。

Bing Mapsをアプリケーションで利用する – カスタムサイズのマップを WebBrowser コントロールに表示する – Visual Studio 2019 C#

leave a comment »

WebBrowserコントロールを利用するとアプリケーション内で簡単にWebページを表示できる。Visual Studio 2019 を使って Windows フォームアプリケーションのプロジェクトを開始し、ツールボックスから WebBrowser コントロールを選んでフォームにドラッグするだけだ。

WebBrowserBingmaps_001_mid_640.png

WebBrowserBingmaps_002_mid_640.png

この WebBrowser コントロールに Bingmap で地図を表示するために、テスト用のボタンを作り、WebBrowser コントロールの Navigate メソッドで Bingmap を表示する URL を指定する。

——————————————————————————————————————–

private void Button1_Click(object sender, EventArgs e)
{
webBrowser1.Navigate("https://www.bing.com/maps");
}

——————————————————————————————————————–

このプロジェクトで WebBrowser コントロールのサイズを 300 × 300 にしているのだが、取得した Bingmap は大きすぎてコントロールに収まらない。全体を見るにはスクロールする必要がある。これでは使いにくい。

WebBrowserBingmaps_003.png

Bingmap を必要なサイズで取得するには、embed オプションを利用したカスタム URL を利用する。カスタム URL はオプションを & 記号でつなぐようになっている。たとえば地図の拡大レベルを 18、緯度経度が 34.723653, 135.146139 のポイントを幅 300 ピクセル、高さ 300 ピクセルで表示するには次のようなカスタム URL を利用する。

——————————————————————————————————————–

https://www.bing.com/maps/embed?LVL=18&CP=34.723653~135.146139&W=300&H=300

——————————————————————————————————————–

フォームにもう一つボタンを作り、Click イベントに上記のカスタム URL を WebBrowser コントロールの Navigate メソッドに記述して試してみよう。

——————————————————————————————————————–

private void Button2_Click(object sender, EventArgs e)
{
webBrowser1.Navigate("https://www.bing.com/maps/embed?LVL=18&CP=34.723653~135.146139&W=300&H=300 ");
}

——————————————————————————————————————–

WebBrowserBingmaps_005_mid_640

WebBrowserBingmaps_006_mid_640.png

プロジェクトをビルドして実行し、ボタンをクリックして Bingmap を表示させてみよう。フォーム上の WebBrowser コントロールにぴったりの大きさで Bingmap を表示し、ナビゲートできるようになった。

WebBrowserBingmaps_007.png

2019年5月11日

松本 吉生(まつもとよしお)

Microsoft MVP Data Platform
京都に生まれ、神戸で幼少期を過ごす。大学で応用化学を学んだのち、理科教諭として高等学校に勤務する。教育の情報化が進む中で校内ネットワークの構築運用に従事し、兵庫県立明石高等学校で文部科学省の「光ファイバー網による学校ネットワーク活用方法研究開発事業」に携わる。兵庫県立西宮香風高等学校では多部制単位制の複雑な教育システムを管理する学籍管理データベースシステムをSQL ServerとInfoPath、AccessなどのOfficeソフトウエアによるOBA開発で構築・運用する。2015年から2017年まで兵庫県立神戸工業高等学校でC#プログラミング、IoTなどのコンピュータ教育を行い、現在は兵庫県立神戸甲北高等学校に勤務する。2004年からマイクロソフトMVP(Microsoft Most Valuable Professional)を受賞し、現在15回目の連続受賞。2016年にマイクロソフト認定教育者(Microsoft Innovative Educator Experts : MIEE)を受賞し、現在4回目の連続受賞。