Download presentation
Presentation is loading. Please wait.
1
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 #pronama</twitter>
2
Profile 5zj (Twitter: @jz5) プログラミング生放送 @pronama
Site: Blog: Work: LSI 設計・検証 <twitter>jz5:ぷれぜんなう #pronama #kyotogtug</twitter>
3
プログラミング生放送 ニコニコ動画内のコミュニティ プログラミング生放送勉強会 INETA Japan, UGSS 加盟
IT・開発系ノンジャンル INETA Japan, UGSS 加盟 Microsoft とは関係ありません。 プログラミング生放送勉強会
4
集めました。 開発に役立つ サンプル コード集 便利！ コードレシピ
5
Agenda About Bing Maps Development Bing Maps AJAX Control
Bing Maps REST Services
6
About Bing Maps
7
<twitter>jz5:#Bing http://bing
<twitter>jz5:#Bing #pronama #kyotogtug</twitter> ©Microsoft ©Japan Travel Bureau/Photolibrary
8
「Bing マップは、簡単に言うと Google マップのことです」
Bing Maps ? 「Bing マップは、簡単に言うと Google マップのことです」 愛媛のイベントでの某 Microsoft 社員の発言 （中国 GTUG の Y さんからの情報）
9
diff 5zj's Selection Demo Bird's eye（概観図） Map Apps Silverlight Control
Recently features And Licensing Demo
10
Bird's eye Bird's eye （概観図）
11
Map Apps Go to Bing in English Click "explorer map apps"
12
Silverlight Control Enhanced mapping experience! Map platform
13
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!
14
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>
15
OpenStreetMap フリーの地理情報データを作成するプロジェクト 誰でも自由に参加 誰でも自由に編集 誰でも自由に利用
<twitter>jz5:OpenStreetMap #pronama</twitter>
16
航空写真の提供
17
OpenStreetMap on Bing Maps
Map App
18
Thus… OpenStreetMap 東海 早川さんの発言 NGK 忘年会 2010 昼の部
<twitter>jz5:こうして、MSは神になりました #pronama</twitter> OpenStreetMap 東海 早川さんの発言 NGK 忘年会 2010 昼の部
19
Development with Bing Maps
20
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
21
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
22
Choose your Bing Maps API
Bing Maps AJAX Control Bing Maps REST Services HTTP(S), JavaScript, (X)HTML, HTML5, CSS
23
Getting Started Bing Maps Key の取得
24
Bing Maps AJAX Control
25
Bing Maps AJAX Control 7.0 JavaScript Library XHTML/HTML5
Road maps, Aerial photo views, Bird's eye
26
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 And Mobile 3GS/4.0 iPhone Browser Android 2.X Browser
27
Let's Coding! Displaying the Map Adding Entities Event
Pushpin, Polygon and Polyline Custom Tile Event <twitter>jz5:Operaとはいったいなんだったのか。 #pronama</twitter> コードが出てきますが気にしないように。 詳しくは参考サイト参照。
28
Displaying the Map(1/2) Reference script
Add <div> element in <body> Create Map object <script charset="UTF-8" type="text/javascript" src=" <div id="map" style="position:absolute; width:512px; height:152px;"></div> var map = new Microsoft.Maps.Map( document.getElementById("map"), {credentials:"BingMapsKey"});
29
Displaying the Map(2/2) XHTML and UTF-8 Localize Using SSL mkt=ja-jp
<script charset="UTF-8" type="text/javascript" src=" </script>
30
Adding Entities 地図に追加（表示）できるもの Pushpin Polygon and Polyline Tile
地図を構成するタイル状の画像 EntityCollection 上記の４種類のコレクション
31
Pushpin Pushpin Class var center = map.getCenter();
var pin = new Microsoft.Maps.Pushpin(center); map.entities.push(pin); <twitter>jz5:ここらへんは適当に流します #pronama</twitter>
32
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);
33
DEMO
34
Tile オリジナルのタイル画像を“重ねて”表示可能 TileSource & TileLayer Class
タイル画像の URL 書式を指定 var format = " var tileSource = new Microsoft.Maps.TileSource({ uriConstructor: format }); var tilelayer = new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity: 0.9 }); map.entities.push(tilelayer);
35
Tile System QuadKeys
36
DEMO
37
Event Events Object var id = Microsoft.Maps.Events.addHandler(map, "viewchangedend", function(e){ /* Handle the event */ }); Microsoft.Maps.Events.removeHandler(id);
38
AJAX Control Info Bing Maps REST Services シンプルな構成 ダイアログなどは実装する必要あり
住所から地理情報を得るには……？ Bing Maps REST Services
39
Bing Maps REST Services
<twitter>jz5:そんな時間配分で大丈夫か？ #pronama</twitter>
40
REST Services Location API Imagery API Routes API
住所・経緯度・検索クエリーから 地理情報の取得 Imagery API 画像の取得，メタデータの取得 Routes API ルート探索
41
Points リクエストの送信 レスポンスの受信 共通のフォーマット SSL 対応 JSON/XML
Structured URL（path 指定） Unstructured URL（param 指定） SSL 対応 http → https レスポンスの受信 JSON/XML
42
Location API(1/3) 住所から地理情報を取得
countryRegion=JP& adminDistrict=東京& locality=新宿区& addressLine=西新宿二丁目8番1号& key=BingMapsKey& c=ja-jp& o=xml <twitter>jz5:ここらへんも適当に流します #pronama</twitter>
43
Location API(2/3) 経緯度から地理情報を取得
key=BingMapsKey& c=ja-jp& o=xml
44
Location API(3/3) クエリーから地理情報を取得
query=東京都新宿区西新宿二丁目8番1号& key=BingMapsKey& c=ja-jp& o=xml
45
Imagery API(1/2) 画像の取得 指定 描画
指定 地図の種類 大きさ 位置・表示範囲 描画 Pushpin ルート探索結果 クエリー検索結果 交通情報
46
Imagery API(2/2) メタデータの取得 タイル画像のURLの構成 指定した地点のタイル画像情報
47
Routes API ルート探索 ※日本語・日本 未対応
wp.1=Eiffel Tower& wp.2=louvre museum& optmz=distance& key=BingMapsKey& o=xml ※日本語・日本 未対応
48
DEMO Location API と AJAX Control との連携
49
REST Services Info 日本対応が弱い Yahoo! PlaceFinder Google Geocoding API
Reverse Geocoding が都道府県レベル Geocoding API ランキング by 5zj Yahoo! PlaceFinder Google Geocoding API Bing Maps Location API
50
（おまけ） Development Environment
51
WebMatrix 無償の Web サイト開発環境
<twitter>jz5:WebMatrix #pronama</twitter>
52
WebMatrix 特長 Web サイトの作成 ローカルサーバー: IIS Express データベース アップロード SEO ツール
Open Source(WordPress, OpenPNE, …) Templates ローカルサーバー: IIS Express PHP, ASP.NET データベース MySQL, SQL Compact アップロード FTP, SFTP, WebDeploy SEO ツール
53
おわりに
54
今後の Bing Maps 予想 Bing Maps Services Bing Maps API/SDK
HTML5対応が進む？ Silverlight は？ 米国と日本 Bing Maps API/SDK AJAX, REST API/SDK の Update？ Silverlight Control？ フィードバックしましょう！
55
まとめ Bing Maps API/SDK Bird's eye, Map App and Silverlight Control
Licensing and Recently Features API/SDK AJAX Control REST Services
56
参考 Bing Maps APIs, SDK MSDN Library Bing Services Bing Community
MSDN Library Bing Services Bing Community 使ってみよう！Bing API/SDK
57
しつもんたいむ 質問時間
58
ご清聴ありがとうございました Twitter: @jz5 Site: katamari.jp Blog: LiveSpac.es
<twitter>jz5:ぷれぜんだん #pronama</twitter> Site: katamari.jp Blog: LiveSpac.es
Similar presentations
