Bing Maps で Web 開発 5zj(@jz5) Microsoft MVP for Windows Live Platform 2011/2/12, 19 Google and Bing Maps Hackathon in Japan <twitter>jz5:test http://nico.lv/39585939 #pronama</twitter>
Profile 5zj (Twitter: @jz5) プログラミング生放送 @pronama Site: http://katamari.jp Blog: http://LiveSpac.es Work: LSI 設計・検証 <twitter>jz5:ぷれぜんなう http://nico.lv/39585939 #pronama #kyotogtug</twitter>
プログラミング生放送 ニコニコ動画内のコミュニティ プログラミング生放送勉強会 INETA Japan, UGSS 加盟 IT・開発系ノンジャンル INETA Japan, UGSS 加盟 Microsoft とは関係ありません。 プログラミング生放送勉強会
集めました。 開発に役立つ サンプル コード集 便利！ コードレシピ http://msdn.microsoft.com/ja-jp/samplecode.recipe.aspx
Agenda About Bing Maps Development Bing Maps AJAX Control Bing Maps REST Services
About Bing Maps
<twitter>jz5:#Bing http://bing <twitter>jz5:#Bing http://bing.jp #pronama #kyotogtug</twitter> ©Microsoft ©Japan Travel Bureau/Photolibrary http://Bing.jp
「Bing マップは、簡単に言うと Google マップのことです」 Bing Maps ? 「Bing マップは、簡単に言うと Google マップのことです」 愛媛のイベントでの某 Microsoft 社員の発言 （中国 GTUG の Y さんからの情報）
diff 5zj's Selection Demo Bird's eye（概観図） Map Apps Silverlight Control Recently features And Licensing Demo
Bird's eye Bird's eye （概観図）
Map Apps Go to Bing in English Click "explorer map apps"
Silverlight Control Enhanced mapping experience! Map platform http://msdn.microsoft.com/en-us/library/ee681884.aspx http://www.microsoft.com/maps/isdk/silverlight/
Recently Features Interior Views Mall Maps Announcing New Bing Maps & Local Features: Interior Views… Mall Maps Bing’s new mall maps: Get in, get out, and avoid the crowds Pickup!
Licensing Developers Mobile Enterprise Government Broadcast Education Not-for-Profit Google JavaScript Maps API 2,500 geocoding/24H(1IP) Bing Maps(Developers) 125,000 sessions or 500,000 transactions /12 month <twitter>jz5:MS「僕と契約して、地図アプリ作ってよ」 #pronama</twitter> http://www.microsoft.com/maps/product/licensing.aspx
OpenStreetMap フリーの地理情報データを作成するプロジェクト 誰でも自由に参加 誰でも自由に編集 誰でも自由に利用 http://www.openstreetmap.jp/ <twitter>jz5:OpenStreetMap http://www.openstreetmap.jp http://nico.lv/39585939 #pronama</twitter>
航空写真の提供
OpenStreetMap on Bing Maps Map App http://www.bing.com/maps/explore/#5003/s=w/5872/style=Mapnik&pid=50735
Thus… OpenStreetMap 東海 早川さんの発言 NGK 忘年会 2010 昼の部 <twitter>jz5:こうして、MSは神になりました http://nico.lv/39585939 #pronama</twitter> OpenStreetMap 東海 早川さんの発言 NGK 忘年会 2010 昼の部
Development with Bing Maps
Bing Maps Platform Bing Maps Services Bing Maps Platform Map App REST Map Apps Bing Maps Platform Map App SDK AJAX Controls REST Services … Bird's eye Geocoding
Bing Maps API/SDKs Map Controls AJAX Control Silverlight Control for Desktop/WP7 Web Services REST Services Spatial Data Services SOAP Services Others Map App SDK
Choose your Bing Maps API Bing Maps AJAX Control Bing Maps REST Services HTTP(S), JavaScript, (X)HTML, HTML5, CSS
Getting Started Bing Maps Key の取得 https://www.bingmapsportal.com
Bing Maps AJAX Control
Bing Maps AJAX Control 7.0 JavaScript Library XHTML/HTML5 Road maps, Aerial photo views, Bird's eye
Supported Browsers On the PC On the Mac And Mobile Google Maps JavaScript API がサポートしているブラウザ Google Maps JS API V3: ・IE 7.0 以降（Windows） ・Firefox 3.0 以降（Windows|Mac|Linux） ・Safari 4 以降（Mac|iPhone） ・Chrome（Windows|Mac|Linux） ・Android http://code.google.com/intl/ja/apis/maps/faq.html And Mobile 3GS/4.0 iPhone Browser Android 2.X Browser
Let's Coding! Displaying the Map Adding Entities Event Pushpin, Polygon and Polyline Custom Tile Event <twitter>jz5:Operaとはいったいなんだったのか。 http://nico.lv/39585939 #pronama</twitter> コードが出てきますが気にしないように。 詳しくは参考サイト参照。
Displaying the Map(1/2) Reference script Add <div> element in <body> Create Map object <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> <div id="map" style="position:absolute; width:512px; height:152px;"></div> var map = new Microsoft.Maps.Map( document.getElementById("map"), {credentials:"BingMapsKey"});
Displaying the Map(2/2) XHTML and UTF-8 Localize Using SSL mkt=ja-jp <script charset="UTF-8" type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&ssl=1"> </script>
Adding Entities 地図に追加（表示）できるもの Pushpin Polygon and Polyline Tile 地図を構成するタイル状の画像 EntityCollection 上記の４種類のコレクション
Pushpin Pushpin Class var center = map.getCenter(); var pin = new Microsoft.Maps.Pushpin(center); map.entities.push(pin); <twitter>jz5:ここらへんは適当に流します http://nico.lv/39585939 #pronama</twitter>
Polygon and Polyline Polygon & Polyline Class var l1 = new Microsoft.Maps.Location(35.6, 139.6); var l2 = new Microsoft.Maps.Location(35.7, 139.7); var l3 = new Microsoft.Maps.Location(35.6, 139.8); var vertices = new Array(l1, l2, l3); var color = new Microsoft.Maps.Color(200, 200, 0, 200); var polyline = new Microsoft.Maps.Polyline(vertices, { strokeColor: color, strokeThickness: 3 }); map.entities.push(polyline); var polygon = new Microsoft.Maps.Polygon(vertices, { fillColor: color, strokeColor: color }); map.entities.push(polygon);
DEMO
Tile オリジナルのタイル画像を“重ねて”表示可能 TileSource & TileLayer Class タイル画像の URL 書式を指定 var format = "http://localhost/{quadkey}.png"; var tileSource = new Microsoft.Maps.TileSource({ uriConstructor: format }); var tilelayer = new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity: 0.9 }); map.entities.push(tilelayer);
Tile System QuadKeys
DEMO
Event Events Object var id = Microsoft.Maps.Events.addHandler(map, "viewchangedend", function(e){ /* Handle the event */ }); Microsoft.Maps.Events.removeHandler(id);
AJAX Control Info Bing Maps REST Services シンプルな構成 ダイアログなどは実装する必要あり 住所から地理情報を得るには……？ Bing Maps REST Services
Bing Maps REST Services <twitter>jz5:そんな時間配分で大丈夫か？ #pronama</twitter>
REST Services Location API Imagery API Routes API 住所・経緯度・検索クエリーから 地理情報の取得 Imagery API 画像の取得，メタデータの取得 Routes API ルート探索
Points リクエストの送信 レスポンスの受信 共通のフォーマット SSL 対応 JSON/XML Structured URL（path 指定） Unstructured URL（param 指定） SSL 対応 http → https レスポンスの受信 JSON/XML
Location API(1/3) 住所から地理情報を取得 http://dev.virtualearth.net/REST/v1/Locations? countryRegion=JP& adminDistrict=東京& locality=新宿区& addressLine=西新宿二丁目8番1号& key=BingMapsKey& c=ja-jp& o=xml <twitter>jz5:ここらへんも適当に流します http://nico.lv/39585939 #pronama</twitter>
Location API(2/3) 経緯度から地理情報を取得 http://dev.virtualearth.net/REST/v1/Locations/35.68918461,139.69163358? key=BingMapsKey& c=ja-jp& o=xml
Location API(3/3) クエリーから地理情報を取得 http://dev.virtualearth.net/REST/v1/Locations? query=東京都新宿区西新宿二丁目8番1号& key=BingMapsKey& c=ja-jp& o=xml
Imagery API(1/2) 画像の取得 指定 描画 http://dev.virtualearth.net/REST/v1/Imagery/Map/AerialWithLabels/35.689184611,139.691633583/17?key=BingMapsKey 指定 地図の種類 大きさ 位置・表示範囲 描画 Pushpin ルート探索結果 クエリー検索結果 交通情報
Imagery API(2/2) メタデータの取得 タイル画像のURLの構成 指定した地点のタイル画像情報 http://dev.virtualearth.net/REST/v1/Imagery/Map/AerialWithLabels/35.689184611,139.691633583/17?key=BingMapsKey
Routes API ルート探索 ※日本語・日本 未対応 http://dev.virtualearth.net/REST/v1/Routes/Walking? wp.1=Eiffel Tower& wp.2=louvre museum& optmz=distance& key=BingMapsKey& o=xml ※日本語・日本 未対応
DEMO Location API と AJAX Control との連携
REST Services Info 日本対応が弱い Yahoo! PlaceFinder Google Geocoding API Reverse Geocoding が都道府県レベル Geocoding API ランキング by 5zj Yahoo! PlaceFinder Google Geocoding API Bing Maps Location API
（おまけ） Development Environment
WebMatrix 無償の Web サイト開発環境 <twitter>jz5:WebMatrix http://www.microsoft.com/web/webmatrix #pronama</twitter>
WebMatrix 特長 Web サイトの作成 ローカルサーバー: IIS Express データベース アップロード SEO ツール Open Source(WordPress, OpenPNE, …) Templates ローカルサーバー: IIS Express PHP, ASP.NET データベース MySQL, SQL Compact アップロード FTP, SFTP, WebDeploy SEO ツール
おわりに
今後の Bing Maps 予想 Bing Maps Services Bing Maps API/SDK HTML5対応が進む？ Silverlight は？ 米国と日本 Bing Maps API/SDK AJAX, REST API/SDK の Update？ Silverlight Control？ フィードバックしましょう！
まとめ Bing Maps API/SDK Bird's eye, Map App and Silverlight Control Licensing and Recently Features API/SDK AJAX Control REST Services
参考 Bing Maps APIs, SDK MSDN Library Bing Services Bing Community http://www.microsoft.com/maps/ MSDN Library Bing Services http://msdn.microsoft.com/en-us/library/dd877956.aspx Bing Community http://www.bing.com/community 使ってみよう！Bing API/SDK http://gihyo.jp/dev/serial/01/bing-sdk/
しつもんたいむ 質問時間
ご清聴ありがとうございました Twitter: @jz5 Site: katamari.jp Blog: LiveSpac.es <twitter>jz5:ぷれぜんだん http://nico.lv/39585939 #pronama</twitter> Twitter: @jz5 Site: katamari.jp Blog: LiveSpac.es