20110212 silverlight から bing maps に触れる
DESCRIPTION
2011年2月12日開催の「Google and Bing Maps Hackthon in Japan」の勉強会にてOn BrowserとWindows Phone 7からBing Mapsはどのように操作出来るかについて、お話をさせて頂きました。TRANSCRIPT
![Page 1: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/1.jpg)
Silverlightから Bing Mapsに触れる
Microsoft MVP for Device Application Development CH3COOH(酢酸)
![Page 2: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/2.jpg)
CH3COOH(酢酸) @ch3cooh
大阪で働く 雑食系プログラマ 携帯電話は、ドライバからミドル、アプリまで
業務系では基幹システムのバッチとか
最近は、iPhoneアプリ開発しかやってません!
自己紹介
![Page 3: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/3.jpg)
時計Viewer for WM
某美人時計とそのクローンのViewer
Pixiq for WM
Pixiv Viewer。フリック対応の2を出す予定だったが、WP7の登場と共に熱意が……
Library Guide for iPhone
図書館の蔵書と貸出状況が調べられるアプリ MA6で楽天賞を頂きました
今までに作ったアプリとか
![Page 4: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/4.jpg)
アジェンダ
![Page 5: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/5.jpg)
Silverlightとは
使うだけなら No programing でOK
簡単な操作は JavaScript と組み合わせ
複雑な操作は C#、VB.NET etc で
Silverlight (On Browser)編
![Page 6: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/6.jpg)
Windows Phone 7とは
VS2010で Bing Maps をぽとぺた
WP7版のBing Maps Controlの機能
実機で Bing Maps をみてみましょう
Bing Maps Controlとの連携
おまけ
Windows Phone編
![Page 7: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/7.jpg)
Silverlight編
![Page 8: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/8.jpg)
Web Browser Plugin
数秒でインストール完了!
クロスプラットフォームで、 OSやブラウザなど実行環境に依存しない
対応OS:Windows 、 Mac、Linux
対応ブラウザ:IE、Firefox、Safari、Chrome
Silverlight とは
![Page 9: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/9.jpg)
http://www.microsoft.com/getsilverlight/get-started/install/default.aspx 正式なサポートではないが、実質OperaやLinuxでも動作する(らしい)
対応OS/ブラウザの組み合わせ
OS Internet Explorer 8+
Firefox 3+ Safari 3+ Chrome 4+
Windows 7 ○ ○ - ○ Windows Vista ○ ○ - ○
Windows XP SP2 ○ ○ - ○ Mac OS X - ○ ○ ○
![Page 10: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/10.jpg)
HTML5との違い
Browser
Technology
Web
Desktop
Mobile
Out of Browser
・COM Automation
・Web Browser
・P/Invoke
Streaming,
Live Streaming
Media
Printing
Web Camera
Mic
Controls Business
![Page 11: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/11.jpg)
今年の春には、 Silverlight5がリリース
Windows Phone 7もSilverlightを採用
アウトオブブラウザ(ブラウザ外実行)で、COM AutomationやP/Invokeに対応
マイクロソフト的に、今後の主力をSilverlightとし
て、ブラウザだけでなくデスクトップやモバイルでの展開を想定している ・・・のかも?
マイクロソフトの本気
![Page 12: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/12.jpg)
Bing Maps Controlを ブラウザ上で使ってみよう!
![Page 13: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/13.jpg)
No programing
地図の表示はプログラミング丌要
With JavaScript
簡単な操作は JavaScript で可能
Silverlight programing
地図アプリケーションの作成
C#, Visual Basic, etc…
Silverlight Control
![Page 14: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/14.jpg)
<ifram>
Demo
No Programing
<iframe width="512" height="512"
frameborder="0" scrolling="no"
marginheight="0" marginwidth="0"
src="http://dev.virtualearth.net/embeddedMap/v1/silverl
ight/road?zoomLevel=15¢er=35.1813139560218_1
36.9064892&pushpins=35.1813139560218_136.9064892
" />
![Page 15: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/15.jpg)
地図を使いたいだけなら これでOK
![Page 16: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/16.jpg)
<object>
With JavaScript(1/2)
<object id="control" data="data:application/x-silverlight"
type="application/x-silverlight-2" width="512" height="512">
<param name="source"
value="http://dev.virtualearth.net/silverlight/mapcontrol/v1/Micr
osoft.Maps.MapControl.xap" />
<param name="enableHtmlAccess" value="true" />
<param name="initParams"
value="ApplicationId=BingMapKey"/>
</object>
![Page 17: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/17.jpg)
JavaScript
Demo
With JavaScript(2/2)
var control = document.getElementById("control");
var map = control.Content.map;
var mode =
control.Content.services.createObject("Microsoft.Ma
ps.MapControl.AerialMode");
map.Mode = mode;
![Page 18: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/18.jpg)
地図の表示座標を大阪、名古屋、東京を数秒ごとに変更しています
JavaScriptでBing Mapsのobjectを取ってきて、移動させているだけ
簡単な操作であれば これだけでOKです
![Page 19: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/19.jpg)
for End-User
User Experience
for Developer
.NET Languages
豊富な Class Libraries
Silverlight Control の特徴
![Page 20: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/20.jpg)
Visual Studio 2010 Professional
Expression Studio Ultimate 4.0(Option)
¥123,400 + ¥63,093 = ¥186,493
Silverlight 4 Tools for Visual Studio 2010 ※DreamSpark(学生)、BizSpark(ベンチャー)なら無償でOK
開発環境 (1/2) 有料プラン
参考価格
![Page 21: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/21.jpg)
Visual Web Developer 2010 Expression
Silverlight 4 Tools for Visual Studio 2010
※有料プランとの違いは、VSSとの統合、バグトラッキング、 ビルドの自動化が出来ない(Professional)、 コードカバレッジ、コード分析、UIテストが使えない(Premium)
開発環境 (2/2) 無料プラン
![Page 22: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/22.jpg)
XAMLで記述
地図の表示
xmlns:m="clr-
namespace:Microsoft.Maps.MapControl;assembly=Mic
rosoft.Maps.MapControl“
<m:Map x:Name="MyMap" CredentialsProvider=“Bing
maps key" >
![Page 23: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/23.jpg)
Pushpin の追加
Polygon and Polyline の追加
Silverlight Control の追加
まとめてデモをご覧ください
エンティティを追加
![Page 24: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/24.jpg)
地図のプラットフォームとして使用可能で、 ゼロからオリジナルの地図を作ることが可能
MapMode FlatMapMode平面で表現
MercatorMode: 円筒で表現
RoadMode(道路表示)、 AerialMode (航空写真表示)
3Dの概念も用意(MapMode3D) Pitch, Heading
Map Platform としての Map Control
![Page 25: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/25.jpg)
MercatorModeを継承すると、真っ白で何もない地図モードを作れる
その上に、日本地図を適当に点を引いて書いてみました
Demo
Remove the Base Map Tile
![Page 26: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/26.jpg)
オリジナルの地図を自分で作るのは大変!
エアリアルモードを継承して、ズーム可能な範囲と表示範囲を限定するくらいであれば、難しくはない
Demo
Custom Map Mode
![Page 27: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/27.jpg)
Streetsideは、Google MapsのStreet View
Bird’s eyeは、鳥観
Demo
Extented Mode Betaが更新されておらず、今のところSilverlight 4では使えない
Streetside and Bird’s eye
![Page 28: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/28.jpg)
簡単に地図が使えることが分かりました
JavaScriptからも.NETからも操作は簡単
MapControlは、地図のカスタマイズも可能 自分がどこにいて、どの角度で、どの方角を向いているのか、情報は持っているので、どんな地図でも作れるはずだが・・・
SilverlightでのBing Maps まとめ
![Page 29: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/29.jpg)
Windows Phone 7
![Page 30: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/30.jpg)
Microsoftからリリースされた 新しいスマートフォンプラットフォーム
2010年12月にアメリカで発売されました
開発環境の提供やライセンス形態は、 ほとんどiPhoneと同じ
アプリは、Silverlightを使って開発します
Windows Phone 7 とは
![Page 31: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/31.jpg)
日本では現時点では未発売
現時点では、日本語が使えないので どのキャリアからも発売予定は、無し!
我慢出来ずにうっかりする人が多数。。。
![Page 32: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/32.jpg)
開発ツールは無償で提供されている Expression Blend for Windows Phone(デザイン)
Visual Studio 2010 Express for Windows Phone(コード)
アプリケーションの開発は、全て『無料』でxap(WP7での実行形式)まで作れます
ただし、実機転送とアプリ公開は、 AppHubメンバーにしかできず『有料』
開発環境
![Page 33: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/33.jpg)
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=04704acf-a63a-4f97-952c-8b51b34b00ce
2011年1月度アップデートで、コピペに対応 http://www.microsoft.com/downloads/en/details.as
px?FamilyID=49B9D0C5-6597-4313-912A-F0CCA9C7D277
地図関係では、Bing Mapsのパフォーマンスが向上
Windows Phone Developer Tools
![Page 34: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/34.jpg)
Visual Studio 2010 Express Edition for Windows Phone
プログラマ向けの開発ツールの王道
WP7向け専用のエディション
![Page 35: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/35.jpg)
Microsoft Expression Blend for Windows Phone
デザイナ向けのツール
Expreesionシリーズで唯一無料で使える(?)
開発環境(VS)がなくても、デバイスへのデプロイが可能
複雑なXAMLもStoryBoardで簡単に
![Page 36: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/36.jpg)
WP7向けアプリストア
サービスが開始してから3ヶ月で7,000本オーバーを達成!
Windows Phone 7 Marketplace
![Page 37: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/37.jpg)
開発したアプリを公開するのは
野良アプリの存在が許されていません 相手がアンロックした端末を持っているのであれば、
xapを渡して、自前でデプロイしてもらう方法があります
「XAPでくれ!」
一般のユーザーに使ってもらう為には、 正規の手順でAppHubへSubmitする
![Page 38: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/38.jpg)
iOS Developer Programのようなもの
WP7、Xbox 360での実機デバッグ Marketplaceへのアプリリリースが可能
会費は、99$ USドル/年
学生は無償でメンバーシップになれます 詳しくは、DreamSpark Programを
AppHub メンバーシップ
![Page 39: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/39.jpg)
Bing Maps Controlを 使ってみよう
![Page 40: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/40.jpg)
ToolBoxからMapを貼り付けて、実行するだけ
1StepでWP7アプリでMap Controlが使えます
VS2010からBing Mapを使う
![Page 41: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/41.jpg)
DEMO1 実行結果
![Page 42: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/42.jpg)
Bing Maps Controlの 基本的な機能
![Page 43: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/43.jpg)
標準コントロールとして提供されている
ピンチイン・アウトによるズームや、パンなど基本的な地図コントロールとしての機能を持つ
Bing Maps Silverlight Control for Windows Phone
![Page 44: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/44.jpg)
Modeプロパティの設定に、『Road』を設定
地図の表示モード 地図表示
![Page 45: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/45.jpg)
Modeプロパティの設定に、『Aerial』を設定
地図の表示モード 航空写真表示
![Page 46: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/46.jpg)
Modeプロパティの設
定に、『AerialWithLabels』を設定
地図の表示モード 航空写真+ラベル表示
![Page 47: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/47.jpg)
プッシュピンを刺すのには、PushPinクラスを使う
PushPinクラスを継承
することで、任意の表示のピンが作れる
PushPin
![Page 48: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/48.jpg)
地図上に線を引くには、MapPolylineクラスを使う
Polygonを使うと、矩形
を描画することが出来ます
Polyline と Polygon
![Page 49: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/49.jpg)
地図上に画像を置くには、MapLayerを用意します
ImageLayerの上にImageを置き、地図に設定するだけ
Layer
![Page 50: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/50.jpg)
GPSと地図を連携させる
![Page 51: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/51.jpg)
GPSから位置情報を取得して、 プッシュピンを立ててみましょう
GPSを使って位置測位するための準備
System.Device.dllを参照して、System.Device.Location名前空間のGeoCoordinateWatcherクラスを使う
GPSと地図の連携
![Page 52: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/52.jpg)
位置情報取得開始
位置変更イベント
地図へピンを刺す
ザックリとはこんな感じ
![Page 53: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/53.jpg)
GeoCoordinateWatcher watcher; // GeoCoordinateWatcherの初期化を行う watcher = new GeoCoordinateWatcher ( GeoPositionAccuracy.High ); // 位置変更イベントのイベントハンドラを追加 // watcher_PositionChanged watcher.PositionChanged += 省略 // データの取得を開始する watcher.Start();
位置情報を取得する
![Page 54: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/54.jpg)
コントロールへの操作はメインスレッドで行う必要がある
イベントハンドラでは、メインスレッドへDispatchして処理をデリゲートします
Deployment.Current.Dispatcher.BeginInvoke(() => MyPositionChanged(e));
位置情報の通知を受け取る
![Page 55: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/55.jpg)
// 位置情報を取得する GeoCoordinate co = watcher.Position.Location; // プッシュピンを作る var pin = new Pushpin() { Location = co }; map1.Children.Add(pin); // 位置測位を終了 watcher.Stop();
位置情報をもとにピンを刺す
![Page 56: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/56.jpg)
PhotoChooserTaskと地図を 連携させる
![Page 57: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/57.jpg)
地図上に写真を配置していくにはどうしよう?
Bing Maps上に画像を配置
Chooserの立ち上げ
Complatedイベントで画像を取得
画像をレイヤーに配置
地図にレイヤーを設定
![Page 58: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/58.jpg)
アプリから直接ファイルシステムにアクセスする方法が提供されていません
「Chooser」を通す必要が
あり。静止画像の選択にはPhotoChooserTaskを使う
どうやって画像を取得しよう?
![Page 59: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/59.jpg)
Microsoft.Phone.Tasks名前空間に各タスクは扱い方がほぼ一緒で使いやすい
var task = new PhotoChooserTask(); // タスクが完了すると、イベントハンドラが呼び出される
task.Completed += (sx, ex) => {省略}task.Show();
PhotoChooserTask
![Page 60: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/60.jpg)
// 取得できていれば、Imageに設定
var bmp = new BitmapImage(); bmp.SetSource(ex.ChosenPhoto); // Imageの表示時の設定 var image = new Image() { Source = bmp }; var imageLayer = new MapLayer(); var position = PositionOrigin.BottomLeft; // 画像レイヤーにUIElement(Image)を追加 imageLayer.AddChild(image, map1.Center, position); // 地図に画像レイヤーを追加します map1.Children.Add(imageLayer);
アルバムの中から写真の 選択結果を受け取る
![Page 61: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/61.jpg)
Bing Maps Controlに 足りないものを足してみる
![Page 62: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/62.jpg)
MSと地図提供会社との大人の事情のせいか、 日本の地図はかなり残念
このままでは、WP7
が、日本で受け入れてもらえない!!
Bing Map Controlの 地図はかなり残念・・・
大阪駅付近の詳細地図
![Page 63: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/63.jpg)
Google and Bing Maps Hackathonなので、 2つのそれぞれ良いところを頂きます!
WP7にはGoogle Mapのコントロールが無い だったら、ベースにはBing Maps Control
Bing Map for WP7の地図はとても残念 だったら、Google Mapの地図を使おう
Google Map on Bing Map Control
![Page 64: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/64.jpg)
Bing Mapsでは、最大ズーム時で 1,073,741,824ピクセルx1,073,741,824ピクセル
の超高画質の地図を使っているみたい
このBing Maps Controlでは、『Deep Zoom』と呼ばれる技術が使われています
どうやって作る?
![Page 65: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/65.jpg)
超高画質の画像を小さな単位(タイル)にします
表示に必要な部分だけのタイルを読み込んで、操作をスムーズにします
Deep Zoomとは
![Page 66: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/66.jpg)
地図をズームレベルに応じて、範囲を狭く、そして詳細に
タイルのイメージ
より詳細に
![Page 67: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/67.jpg)
タイルの単位は 256 x 256
Google Mapsのタイルの大きさは、
256 x 256
Bing Mapsのタイルの大きさも、
256 x 256
あとは、お察しの通り。。。
![Page 68: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/68.jpg)
Bing Maps Controlは、表示したい位置座
標を元にして、タイル画像が格納されているサーバーからダウンロードしてる
このタイル画像のURLを、生成しているメ
ソッドをオーバーライドして書き換えれば、Google Mapsのタイル画像が使える!
具体的にどうやって作るの?
![Page 69: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/69.jpg)
Microsoft.Phone.Controls.Maps名前空間のTileSourceクラスの以下のメソッド
Uri GetUri(int x, int y, int zoomLevel)
Google MapsのタイルURLは以下の通り
http://mt{server}.google.com/vt/lyrs={type}&x={x値}&y={y値}&z={zoom-level}
URLはGetUriメソッドで作ってる
![Page 70: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/70.jpg)
実際にアプリの動きをみてみましょう
Google Map on Bing Map Control デモ
![Page 72: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/72.jpg)
Google Mapのライセンス的にNGなような気
がします。容量・用法を守って正しくお使いください
ご使用上の注意
![Page 73: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/73.jpg)
Bing Maps Silverlight Control for Windows Phone
http://msdn.microsoft.com/en-us/library/ff941096%28v=VS.92%29.aspx
How to: Use the Bing Maps Silverlight Control for Windows Phone
http://msdn.microsoft.com/en-us/library/ff941093%28v=VS.92%29.aspx
Working with Pushpins in the Map Control
http://msdn.microsoft.com/en-us/library/gg588383%28v=VS.92%29.aspx
Differences Between Silverlight and Silverlight for Windows Phone
http://msdn.microsoft.com/en-us/library/ff426930%28VS.95%29.aspx
本セッションの補足資料
![Page 74: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/74.jpg)
スマートフォン勉強会のスタッフ
既にユーザーの方や興味のある方と、 スマートフォンアプリの開発者をつなぐ勉強会
関西と関東は定期開催
関西は奇数月に、関東は偶数月に
スマートフォン勉強会
![Page 75: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/75.jpg)
2/19 Windows Phone 7 ブーストアップ
2/26 スマートフォン勉強会@関東#11
3/26 スマートフォン勉強会@関西#14
スマートフォン勉強会の告知
![Page 76: 20110212 Silverlight から Bing Maps に触れる](https://reader034.vdocuments.mx/reader034/viewer/2022052216/54556058af79594f558b485e/html5/thumbnails/76.jpg)
ご清聴ありがとうございました
本セッションについて何かありましたら
blog http://d.hatena.ne.jp/ch3cooh393/
site http://ch3cooh.jp/
Twitter @ch3cooh