SlideShare a Scribd company logo
1 of 62
Xamarinで作る 
「オリジナルタイル地図」アプリ 
Code for NARA 大塚恒平 
@kochizufan 
http://www.slideshare.net/kokogiko/jxug2014-osaka-3-2 
1 2014/11/08
目次 
1.自己紹介 
2.タイル地図って? 
3.TMSを使う場合 
4.MBTilesを使う場合 
5.TMSからMBTilesキャッシュ 
6.Google Maps以外の選択 
2 2014/11/08
1.自己紹介 
2001年頃に自学でGISを勉強しジオメディア業界へ 
2007〜2009年、マピオンで位置ゲー「ケータイ国盗り合戦」 
を企画開発 
2010〜2011年、ATR(けいはんな研究機関)でiOS古地図アプ 
リ「ちずぶらり」を企画開発 
現在、某大手ポータルのフリーWiFi網構築事業の開発を担 
当(Web、サーバサイド) 
Code for NARAで、奈良のオープンデータ活用活動をボラン 
タリーで 
3 2014/11/08
Xamarinとの出会い 
モバイル開発離れたけど、余暇でも自分でなんかやりたい 
な 
どうせならAndroidでも動くマルチプラットフォームで作ってみ 
たいな 
でもHTML5でUI作ってガワアプリってなんかちゃうよな 
特にモバイル地図はHTML5とネイティブで使用感がダンチ 
UIはネイティブ、バックエンドロジックは共通化= Xamarin、 
おおこれや! 
1年ほど前から余暇で触ってます 
4 2014/11/08
C#暦ありません(汗 
LINQ、Rx…あまり判ってません 
ネイティブ(Java)Android開発歴もありません 
iOS8もLolipopも未体験 
現役モバイル開発者ちゃうし 
MVVMとかFormsとか全く追いついてません 
現役(ry 
今日もお客さんのつもりが、話してと言われたさかいに… 
地図は得意なので、Xamarinでの特殊な地図アプリの作り方を話 
します 
5 2014/11/08
来年は客席で待つ! 
(。+・`ω・´) 
Xamarinは君を欲している! 
立てよX6ama民! 2014/11/08
2.タイル地図って? 
みなさんスマホ開発での地図というと何を想像されま 
すか? 
MapKit? 
Google Maps? 
Y!地図? 
7 © Apple/Google/2Y0A14H/1O1/O08 Japan
実はこんなんも使えます 
OpenStreetMap 
(OpenMapsより) 
地理院地図 
(FieldAccessより) 
© OpenStreetMap/8 IZE Ltd./国土地理院2/d01e4n/1d1r/0o8copos
こんなんだって 
© ovalgear/国土地理院/埼玉大学/Mapbox 
古地図(time toursより) 
官製地形図 
(今昔マップon the webより) 
デザイン地図 
(Mapbox社) 
9 2014/11/08
これみんなタイル地図 
GoogleがGoogle Mapsで発明した、球面メルカトル図 
法を使った四分木タイル地図 
南北緯85度付近以上を除く世界全域が正方形画像で 
表せる(最小ズームで256px四方) 
ズームを一つ大きくする度、タイルを四分割 
競合他社(マイクロソフト等)やオープンソースも採用し、 
事実上Web地図標準 
10 2014/11/08
こんな感じ 
Google Maps APIリファレンスより 
ズームレベル0 ズームレベル2 
256px 
256px 
11 2014/11©/0 G8oogle
難しいかもしれませんが 
ズームレベルzとx座標x、y座標yを指定されたら、そこ 
に対応する地図画像を返してやると地図表示できる仕 
様と思っておk 
ぶっちゃけ対応している地図APIなら、インタフェースで 
勝手にx, y, zを与えてくれるので、対応する画像や画像 
URLを返してやるだけ 
MapKitは対応してなかったはず…使うなら自分で原理 
を理解して各位置の画像をオーバーレイ 
12 2014/11/08
使える地図は? 
OpenStreetMap系 
OpenStreetMapをいろんなデザインでレンダリングした 
タイルセットが利用できます 
http://wiki.openstreetmap.org/wiki/Tiles に一覧 
13 © O2p0e1n4S/1t1r/e0e8tMap
OpenStreetMap系 
14 © O2p0e1n4S/1t1r/e0e8tMap
使える地図、他には? 
国土地理院系 
国土地理院が用意した様々なタイルセット(昔の航空 
写真とかもあります)が利用できます 
http://portal.cyberjapan.jp/help/development/ichiran. 
html に一覧 
探せば 
他にもたくさん 
15 2©01 国4/1土1/0地8 理院
地理院地図の数々 
16 2©01 国4/1土1/0地8 理院
自分で作る事もできます 
ラスタ画像地図から作成 
GISツール(gdal2tiles等)を使います 
詳細は拙Slideshare参照 
http://www.slideshare.net/kokogiko/ss-15067961 
これ説明し出すと 
マジXamarin関係なくなってしまう 
17 2014/11/08
こんな感じで作れます 
© Google/国土地理院/気仙沼市 
気仙沼市ハザードマップから 
官製地形図から 
地形数値データから 
陰影図描画して 
18 2014/11/08
OpenStreetMapの 
データから独自デザイン 
Mapboxという会社のMapbox Studioというアプリで自 
由デザイン 
https://www.mapbox.com/mapbox-studio/ 
←cssみたいな感じで 
地図をデザイン 
19 2014/©11 /M08apbox
Mapboxはこんな感じ 
20 2014/©11 /M08apbox
タイル地図を使うと 
誰もが使うMapKitやGoogle Maps等とは一味違う地図アプリが作 
れます! 
(ニーズがあるかはさておき^^) 
むしろ地図自身が表現手段になる! 
Webもアプリも共通仕様!(Google Earthで使うには一工夫必要) 
Google Maps SDKはタイル地図が使えて、iOS/Android両方で提 
供されているので、Xamarinでタイル地図を使うのに向いてます 
以後の説明のソースコードは 
https://github.com/tilemapjp/xamarinMapJXUG 
で公開しています 
21 2014/11/08
3.TMSを使う場合 
TMS(Tile Map Service)とは? 
タイル地図で画像のURLを指定する仕様 
例:地理院地図標準レイヤ 
http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png 
ズームz,x座標,y座標の値で{z},{x},{y}を置き換えてやれ 
ば画像のURLになる 
このURLをSDKにあげればいい 
簡単! 
22 2014/11/08
下準備 
(SharedProject or PCL) 
public partial class URLConstructor { 
private string baseURL = "http://t.tilemap.jp/jcp_maps/harima/{z}/{x}/{y}.png"; 
private string regexURL = null; 
public URLConstructor () { 
regexURL = baseURL.Replace("{x}", "{0}"); 
regexURL = regexURL.Replace("{y}", "{1}"); 
regexURL = regexURL.Replace("{z}", "{2}"); 
} 
public string GetUrl(int x, int y, int z) { 
//TMS形式はGoogleのY座標と正負の方向が逆なので直す 
y = (int)Math.Pow (2.0, (double)z) - y - 1; 
string url = String.Format (regexURL, x, y, z); 
return url; 
} 
} 
元定義 
23 2014/11/08
下準備 
(SharedProject or PCL) 
public partial class URLConstructor { 
private string baseURL = "http://t.tilemap.jp/jcp_maps/harima/{z}/{x}/{y}.png"; 
private string regexURL = null; 
public URLConstructor () { 
regexURL = baseURL.Replace("{x}", "{0}"); 
regexURL = regexURL.Replace("{y}", "{1}"); 
regexURL = regexURL.Replace("{z}", "{2}"); 
} 
TMS表記をFormat表記に 
public string GetUrl(int x, int y, int z) { 
//TMS形式はGoogleのY座標と正負の方向が逆なので直す 
y = (int)Math.Pow (2.0, (double)z) - y - 1; 
string url = String.Format (regexURL, x, y, z); 
return url; 
} 
} 
24 2014/11/08
下準備 
(SharedProject or PCL) 
public partial class URLConstructor { 
private string baseURL = "http://t.tilemap.jp/jcp_maps/harima/{z}/{x}/{y}.png"; 
private string regexURL = null; 
public URLConstructor () { 
regexURL = baseURL.Replace("{x}", "{0}"); 
regexURL = regexURL.Replace("{y}", "{1}"); 
regexURL = regexURL.Replace("{z}", "{2}"); 
} 
public string GetUrl(int x, int y, int z) { 
//TMS形式はGoogleのY座標と正負の方向が逆なので直す 
y = (int)Math.Pow (2.0, (double)z) - y - 1; 
string url = String.Format (regexURL, x, y, z); 
return url; 
} 
} 
これは何? 
25 2014/11/08
TMS仕様には 
2つの流儀がある 
GIS業界型(本来のTMS) Web地図業界型 
x、y、z x、y、z 
・y座標が南から北へ 
・GISツールで作るとこちらになる 
・y座標が北から南へ 
・Google、OpenStreetMap、 
国土地理院、Mapbox他 
26 2014/11/08
GISツールで作ったデータを 
Google Maps SDKで使うに 
は 
y座標が逆向きなので変換してやる必要がある 
定型文で覚えれば無問題 
y = (int)Math.Pow (2.0, (double)z) - y - 1; 
このくらい覚えろ! 
すみません覚えてください 
27 2014/11/08
Xamarin iOS 
URLConstructor constructor = new URLConstructor (); 
… 
MapView mapView = new MapView (); 
… 
var tmsProvider = UrlTileLayer.FromUrlConstructor ((uint x, uint y, uint zoom) => { 
string url = constructor.GetUrl((int)x,(int)y,(int)zoom); 
return new NSUrl(url); 
}); 
tmsProvider.Map = mapView; 
UrlTileLayer.FromUrlConstructorに 
NSUrlを生成するラムダ式を食わせて 
UrlTileLayerを生成し 
MapプロパティにMapViewを指定するだけ 
28 2014/11/08
Xamarin Android(1) 
若干面倒くさい 
class URLTilesProvider : UrlTileProvider 
{ 
private URLConstructor constructor; 
UrlTileProviderを継承 
public URLTilesProvider () : base (256, 256) { 
constructor = new URLConstructor (); 
} 
public override Java.Net.URL GetTileUrl (int x, int y, int z) { 
var url = constructor.GetUrl (x, y, z); 
return new Java.Net.URL (url); 
} 
} 
Java.Net.URLを返すGetTileUrlメソッドを実装 
29 2014/11/08
Xamarin Android(2) 
protected override void OnResume () 
{ 
var mapView = ((MapFragment)FragmentManager.FindFragmentById 
(Resource.Id.map)).Map; 
MapViewはMapFragmentから取得 
if (mapView != null) { 
var tmsProvider = new URLTilesProvider (); 
var mbOptions = new TileOverlayOptions(); 
mapView.AddTileOverlay( mbOptions.InvokeTileProvider(tmsProvider) ); 
} 
} TileOverlayOptions#InvokeTileProviderに 
作成したUrlTileProviderを食わせ、 
TileOverlayを生成してMapViewにAddTileOverlay 
30 2014/11/08
TMS利用の結果 
簡単…ですよね? 
なんとこれだけで 
一味違うタイル地図が 
あなたのお手元に! 
31 2014/11/08
TMSの問題点 
地図画像をURL指定でネットから取ってくるために… 
描画がネットレイテンシのため遅い 
オフラインで使えない 
「せっかく自分で地図用意してるのに、オフラインでも使 
いたいんだよ!」 
というワガママなあなたのために… 
32 2014/11/08
4.MBTilesを使う場合 
MBTilesとは 
タイル地図画像をオフラインで保持・流通させるための 
フォーマット仕様 
SQLiteファイル形式を使用 
なので普通のSQLite APIで余裕で使える 
33 2014/11/08
MBTilesのスキーマ 
(Ver.1.0) 
CREATE TABLE metadata (name text, value text); 
CREATE TABLE tiles (zoom_level integer, tile_column integer, tile_row integer, tile_data blob); 
ズームレベルx座標y座標画像 
ぶっちゃけこれだけ!! 
(インデックスも張られますが…) 
34 2014/11/08
MBTilesのスキーマ 
(私が今使ってるもの) 
CREATE TABLE map ( zoom_level INTEGER, tile_column INTEGER, tile_row INTEGER, tile_id TEXT, grid_id 
TEXT );"); 
正規化されたり 
CREATE TABLE grid_key ( grid_id TEXT, key_name TEXT );"); 
他のデータも加わってるが、 
CREATE TABLE keymap ( key_name TEXT, key_json TEXT );"); 
CREATE TABLE grid_utfgrid ( grid_id TEXT, grid_utfgrid BLOB );"); 
viewがあるのでSELECT 
CREATE TABLE images ( tile_data blob, tile_id text );"); 
する分には1.0と同じ 
CREATE TABLE metadata ( name text, value text );"); 
CREATE UNIQUE INDEX map_index ON map (zoom_level, tile_column, tile_row);"); 
CREATE UNIQUE INDEX grid_key_lookup ON grid_key (grid_id, key_name);"); 
CREATE UNIQUE INDEX keymap_lookup ON keymap (key_name);"); 
CREATE UNIQUE INDEX grid_utfgrid_lookup ON grid_utfgrid (grid_id);"); 
CREATE UNIQUE INDEX images_id ON images (tile_id);"); 
CREATE UNIQUE INDEX name ON metadata (name);"); 
CREATE VIEW tiles AS SELECT map.zoom_level AS zoom_level, map.tile_column AS tile_column, map.tile_row 
AS tile_row, images.tile_data AS tile_data FROM map JOIN images ON images.tile_id = map.tile_id;"); 
CREATE VIEW grids AS SELECT map.zoom_level AS zoom_level, map.tile_column AS tile_column, map.tile_row 
AS tile_row, grid_utfgrid.grid_utfgrid AS grid FROM map JOIN grid_utfgrid ON grid_utfgrid.grid_id = 
map.grid_id;"); 
CREATE VIEW grid_data AS SELECT map.zoom_level AS zoom_level, map.tile_column AS tile_column, 
map.tile_row AS tile_row, keymap.key_name AS key_name, keymap.key_json AS key_json FROM map JOIN 
grid_key ON map.grid_id = grid_key.grid_id JOIN keymap ON grid_key.key_name = keymap.key_name;"); 
実は仕様の出所不明… 
と最近気付いた 
謎仕様!!! 
35 2014/11/08
MBTilesを作るには 
Mapbox Studio等からは直接生成可能 
GISツールから画像タイルを作成した際等は、拙作の 
Tile2MBTiles 
https://github.com/tilemapjp/Tile2MBTiles 
等を使ってMBTiles化 
できあがりは謎仕様です 
仕様簡単なので自前でプログラムも君達なら楽勝のはず! 
最近はGISツールからも直接出せるようになったという話も 
(未確認) 
36 2014/11/08
Shared Project (or PCL) MBTiles 
ファイルのコピー処理 
MBTilesファイルはEmbededResourceを使ってプロジェ 
クトに含める 
MBTilesファイルのコピー先は 
System.Environment.GetFolderPath(System.Environ 
ment.SpecialFolder.MyDocuments); 
で取得すると、マルチプラットフォームで共通化できる 
こうするとSQLite周りの処理はコピーからデータ読み込 
みまで全部マルチプラットフォーム化できてウマーー 
37 2014/11/08
EmbededResource? 
これ 
iOSにも 
Androidにもあるよ! 
38 2014/11/08
EmbededResourceを 
使う利点と欠点 
利点 
MBTilesファイル処理周りを全部共通ロジック化できる! 
プラットフォームでの処理分けが不要! 
欠点 
AndroidのAssetsはともかく 
iOSのBundleResourceは直接MBTilesとしてリードオン 
リーで開けるので、初回に本来無用なコピー処理が発生 
する 
お好みで… 
39 2014/11/08
Shared Project (or PCL) MBTiles 
ファイルのコピー処理 
this.dbFolder = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments); 
this.dbPath = Path.Combine (this.dbFolder, this.dbFile); 
Type type = this.GetType (); 
Stream myInput = type.Assembly.GetManifestResourceStream ("JXUGMBTiles." + this.dbFile); 
Stream myOutput = new FileStream(this.dbPath, FileMode.OpenOrCreate); 
byte[] buffer = new byte[1024]; 
int b = buffer.Length; 
int length; 
while ((length = myInput.Read(buffer, 0, b)) > 0) { 
myOutput.Write(buffer, 0, length); 
} 
myOutput.Flush(); 
myOutput.Close(); 
myInput.Close(); 
コピー先のフォルダを取得 
40 2014/11/08
Shared Project (or PCL) MBTiles 
ファイルのコピー処理 
this.dbFolder = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments); 
this.dbPath = Path.Combine (this.dbFolder, this.dbFile); 
Type type = this.GetType (); 
Stream myInput = type.Assembly.GetManifestResourceStream ("JXUGMBTiles." + this.dbFile); 
Stream myOutput = new FileStream(this.dbPath, FileMode.OpenOrCreate); 
byte[] buffer = new byte[1024]; 
int b = buffer.Length; 
int length; 
while ((length = myInput.Read(buffer, 0, b)) > 0) { 
myOutput.Write(buffer, 0, length); 
} 
myOutput.Flush(); 
myOutput.Close(); 
myInput.Close(); 
EmbededResourceのStreamを開く 
コピー先のStreamも開く 
41 2014/11/08
Shared Project (or PCL) MBTiles 
ファイルのコピー処理 
this.dbFolder = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments); 
this.dbPath = Path.Combine (this.dbFolder, this.dbFile); 
Type type = this.GetType (); 
Stream myInput = type.Assembly.GetManifestResourceStream ("JXUGMBTiles." + this.dbFile); 
Stream myOutput = new FileStream(this.dbPath, FileMode.OpenOrCreate); 
byte[] buffer = new byte[1024]; 
int b = buffer.Length; 
int length; 
while ((length = myInput.Read(buffer, 0, b)) > 0) { 
myOutput.Write(buffer, 0, length); 
} 
myOutput.Flush(); 
myOutput.Close(); 
myInput.Close(); 
コピー処理 
42 2014/11/08
Shared Project (or PCL) 
xyzから画像の取得 
public class tiles { 
public int zoom_level { get; set; } 
public int tile_column { get; set; } 
public int tile_row { get; set; } 
public byte[] tile_data { get; set; } 
} 
… 
public byte[] GetTileImage(int x, int y, int z) { 
byte[] image = null; 
y = (int)Math.Pow (2.0, (double)z) - y – 1; 
using (var conn = new SQLiteConnection(this.dbPath)) { 
var query = conn.Table<tiles> ().Where (v => v.zoom_level == z && v.tile_column == x && 
v.tile_row == y); 
if (query.Count () != 0) { 
var tile = query.First (); 
image = tile.tile_data; 
} 
} 
return image; 
} 
SQLite.Netを使用、スキーマクラス 
43 2014/11/08
Shared Project (or PCL) 
xyzから画像の取得 
public class tiles { 
public int zoom_level { get; set; } 
public int tile_column { get; set; } 
public int tile_row { get; set; } 
public byte[] tile_data { get; set; } 
} 
… 
public byte[] GetTileImage(int x, int y, int z) { 
byte[] image = null; 
y = (int)Math.Pow (2.0, (double)z) - y – 1; 
using (var conn = new SQLiteConnection(this.dbPath)) { 
var query = conn.Table<tiles> ().Where (v => v.zoom_level == z && v.tile_column == x && 
v.tile_row == y); 
if (query.Count () != 0) { 
var tile = query.First (); 
image = tile.tile_data; 
} 
} 
return image; 
} 
SQLite.Netでx,y,zが一致する画像を検索 
44 2014/11/08
Xamarin iOS 
public class MBTilesProvider : SyncTileLayer { 
public override UIImage Tile (uint x, uint y, uint zoom) { 
var image = accessor.GetTileImage ((int)x, (int)y, (int)zoom); 
SyncTileLayerを継承したTileLayerを作成し、 
UIImageを返すTileメソッドを実装 
if (image == null) { 
return Constants.TileLayerNoTile; 
} else { 
return UIImage.LoadFromData (NSData.FromArray(image)); 
} 
} 
} 
… 
public override void ViewDidLoad () { 
var mbProvider = new MBTilesProvider (); 
mbProvider.Map = mapView; 
} 
TileLayerのMapプロパティに 
MapViewを指定するだけ 
45 2014/11/08
Xamarin Android 
class MBTilesProvider : Java.Lang.Object, ITileProvider { 
public Tile GetTile(int x, int y, int zoom) { 
var image = accessor.GetTileImage (x, y, zoom); 
Java.Lang.Object、ITileProviderを 
継承したTileProviderを作成し、 
Tileを返すGetTileメソッドを実装 
if (image == null) { 
return TileProvider.NoTile; 
} else { 
return new Tile(TILE_WIDTH, TILE_HEIGHT, image); 
} 
} 
} 
… 
var mbProvider = new MBTilesProvider (); 
var mbOptions = new TileOverlayOptions(); 
mapView.AddTileOverlay( mbOptions.InvokeTileProvider(mbProvider) ); 
TileOverlayOptions経由で生成した 
TileOverlayをAddTileOverlayで 
MapViewに追加 
46 2014/11/08
MBTiles利用の結果 
…は見た目はTMSと変わらないので省略 
簡単でしょ?こっちも 
MBTilesの問題点 
ローカルに地図データがあるので描画は速く、オフライ 
ンでも使えるが… 
データサイズが大きく、アプリサイズも大きくなる 
遅いのもイヤ、デブッチョもイヤな方々には… 
47 2014/11/08
5.TMSから 
MBTilesキャッシュ 
オンラインはTMSで地図画像を配信しながら、ローカル 
でMBTilesにキャッシュすれば多くの問題が解決 
方針 
TMSのURLを生成してSDKに渡し、画像取得はSDKに任 
せて、画像を横取りしてキャッシュ 
画像の取得自体をHTTPエージェントを使い自分で実装 
する手もあるが、その辺はGoogleさんの実装の方が上 
手だろうと思って… 
48 2014/11/08
実装の詳細 
省略 
そろそろかなり煩雑になるので…Githubで見てください 
いくつかのキモ: 
MBTilesへのキャッシュの書き込みは複数スレッドから同時に 
発生しないようにバックグラウンド化と直列化 
Xamarin iOSでは、UrlTileLayerを継承できない 
画像を受け取るには、非同期のコールバックオブジェクトをデ 
コレートして受け取る必要がある 
Xamarin Androidでも、UrlTileProviderのGetTileメソッドは 
virtualでなくオーバーライドできないので、デコレートオブジェ 
クトを作る必要 
49 2014/11/08
サンプルのおまけ 
タイル地図セットの提供する最大ズーム以上に拡大し 
ても、最大ズームでの画像をデジタルズームする機能 
もつけてます 
詳しくはGithubのソースと 
以前にQiitaで記事を書いてるので参照 
http://qiita.com/kochizufan/items/be19de4d9a4b6466a 
9cf 
http://qiita.com/kochizufan/items/f6cdc8925d254c1833 
8d 
50 2014/11/08
TMSでネット地図取得+ 
MBTilesキャッシュで 
アプリサイズが小さく、表示したところは以後軽くオフラ 
イン表示も可能な地図アプリが作れる 
これで文句は言わせない 
OpenStreetMap、地理院地図等も、普段はネット取得、 
必要な範囲だけ事前にダウンロードしてMBTilesキャッ 
シュしてOK 
ネットが繋がらないところでも使えるオフライン地図 
Google MapsやMapKitでは不可能(キャッシュはするが 
制御はできない) 
51 2014/11/08
6.Google Maps 
以外の選択 
タイル地図使えるのってGoogle Maps SDKだけ? 
他にもいろいろある 
むしろタイル地図を使うなら本来FOSS4Gライブラリを使う 
のが本筋なんだけど 
Xamarinだとポーティングが少ないのが難 
52 2014/11/08
Google Maps SDKだと 
こういうのが 
消せないのが 
イマイチ 
53 2014/11/08
ネイティブSDKで有名系 
のXamarinバインディング 
Route-Me(iOS) 
https://github.com/mono/monotouch-bindings/ 
tree/master/Route-Me 
非常に軽く高機能だが、実装思想が若干古い 
ライセンスは利用している事を記述?よう判らん 
osmdroid(Android) 
http://components.xamarin.com/view/osmdroid-android- 
binding 
Android界では有名だが、すんませんあまり知らん 
Apache 2.0 
54 2014/11/08
.NET マネージド系での 
OSS地図SDK 
OsmSharp 
http://www.osmsharp.com/ 
ベクトルデータに対応してるが若干重い 
マーカー機能とかまだこれから 
コマーシャルライセンス+GPLv2 
Mapsui 
https://github.com/pauldendulk/Mapsui 
ラスタタイルのみの対応だがサクサク奇麗 
地図描画のみの実装?マーカーとかが見当たらん… 
LGPLライセンス 
もちろんどっちもWindows Phoneでもいけまっせ 
55 2014/11/08
Xamarin未ポートの高機能 
マルチプラットフォームSDK 
Mapbox SDK系 
https://www.mapbox.com/developers/ 
タイル地図業界の期待の星企業 
RouteMeやosmdroidを魔改造してる、最新のOpenGL版も 
登場中 
Apache 2.0 (Android) 
Maply 
https://github.com/mousebird/WhirlyGlobe 
3D描画版がWihrlyGlobe、2D描画版がMaply 
iOSだが最新のβでMaplyはAndroidも対応開始 
描画エンジンはc++で共通 
Apache 2.0 
56 2014/11/08
Xamarin未ポートの高機能 
マルチプラットフォームSDK 
Globe3Mobile 
http://www.glob3mobile.com/ 
3D描画の地図エンジン 
iOS、Android両対応、共通エンジンっぽい 
BSD 
いつかポーティングできれば… 
日曜プログラマじゃ無理?^^; 
優秀なXama民の力をオラに貸してけれ! 
57 2014/11/08
地図SDKだけやない 
.NET位置情報ライブラリ 
http://qiita.com/kochizufan/items/f7e2024be7079ded8697 
Proj.NET 
c版ではproj.4と呼ばれる座標変換ライブラリ 
世界測地系日本測地系とか、経緯度メルカトル座標と 
か 
.NET Topology Suite 
c版ではgeosと呼ばれる図形演算ライブラリ 
ポリゴン等の足し算引き算や、衝突判定等 
http://qiita.com/amay077/items/7a99df1c0da881cc47f6 
↑あめい師匠の詳細解説! 
58 2014/11/08
最後に会場の 
マイクロソフトさんに 
Bing Mapsは本当にいい地図です(デザインとか) 
私大好きです 
なのに…なのに… 
59 2014/11/08 
© Zenrin/Microsoft
なんでWindowsPhoneの 
標準地図を 
NokiaのHEREにしてしもたんやーーーーーー! 
なんですかこれは 
10年前の 
OpenStreetMap 
ですか… 
60 2014/11/08 
© Nokia/Microsoft
技術資産の相乗りは 
わかりますが 
データ資産は既存のもの活かしましょうや… 
データはZenrinとの絡みもあって難しいとは思います 
が、デザイン資産とかはMSのもんでしょうし… 
ぜひ日本のマイクロソフトから、日本の地図ちゃんと 
せー、と声を挙げていただきたい 
61 © N2o0k1i4a//1M1/0ic8rosoft
ご清聴おおきに! 
今日聞いてくださった人の中から、タイル地図や位置 
情報APIを使った「一味違う地図アプリ」を作ってくれる 
方が出てくれれば光栄です! 
Xamarin、.NET、c#のますますの発展を! 
大事な事なので二度目言います、 
「来年は客席で待つ」 
62 2014/11/08

More Related Content

What's hot

Project Loom - 限定継続と軽量スレッド -
Project Loom - 限定継続と軽量スレッド - Project Loom - 限定継続と軽量スレッド -
Project Loom - 限定継続と軽量スレッド - Yuichi Sakuraba
 
【de:code 2020】 カスタムコネクタ入門 : Power Platform と既存システムをつなげるカスタムコネクタ
【de:code 2020】 カスタムコネクタ入門 : Power Platform と既存システムをつなげるカスタムコネクタ【de:code 2020】 カスタムコネクタ入門 : Power Platform と既存システムをつなげるカスタムコネクタ
【de:code 2020】 カスタムコネクタ入門 : Power Platform と既存システムをつなげるカスタムコネクタ日本マイクロソフト株式会社
 
Go言語によるwebアプリの作り方
Go言語によるwebアプリの作り方Go言語によるwebアプリの作り方
Go言語によるwebアプリの作り方Yasutaka Kawamoto
 
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編infinite_loop
 
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナーNGINX, Inc.
 
規格書で読むC++11のスレッド
規格書で読むC++11のスレッド規格書で読むC++11のスレッド
規格書で読むC++11のスレッドKohsuke Yuasa
 
MySQLからPostgreSQLへのマイグレーションのハマリ所
MySQLからPostgreSQLへのマイグレーションのハマリ所MySQLからPostgreSQLへのマイグレーションのハマリ所
MySQLからPostgreSQLへのマイグレーションのハマリ所Makoto Kaga
 
Zabbix最新情報 ~Zabbix 6.0に向けて~ @OSC2021 Online/Fall
Zabbix最新情報 ~Zabbix 6.0に向けて~ @OSC2021 Online/FallZabbix最新情報 ~Zabbix 6.0に向けて~ @OSC2021 Online/Fall
Zabbix最新情報 ~Zabbix 6.0に向けて~ @OSC2021 Online/FallAtsushi Tanaka
 
C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)
C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)
C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)Hiro H.
 
[CEDEC2017] LINEゲームのセキュリティ診断手法
[CEDEC2017] LINEゲームのセキュリティ診断手法[CEDEC2017] LINEゲームのセキュリティ診断手法
[CEDEC2017] LINEゲームのセキュリティ診断手法LINE Corporation
 
軽くRDB再入門とGraph DB 入門
軽くRDB再入門とGraph DB 入門軽くRDB再入門とGraph DB 入門
軽くRDB再入門とGraph DB 入門Kentaro Masumori
 
オブジェクト指向できていますか?
オブジェクト指向できていますか?オブジェクト指向できていますか?
オブジェクト指向できていますか?Moriharu Ohzu
 
ブロックチェーンを用いた自己主権型デジタルID管理
ブロックチェーンを用いた自己主権型デジタルID管理ブロックチェーンを用いた自己主権型デジタルID管理
ブロックチェーンを用いた自己主権型デジタルID管理Hyperleger Tokyo Meetup
 
IDベース暗号の概観と今後の展望(次世代セキュア情報基盤ワークショップ )
IDベース暗号の概観と今後の展望(次世代セキュア情報基盤ワークショップ )IDベース暗号の概観と今後の展望(次世代セキュア情報基盤ワークショップ )
IDベース暗号の概観と今後の展望(次世代セキュア情報基盤ワークショップ )Akira Kanaoka
 
ソフトウェア設計における 意思決定とそのレビューの秘訣
ソフトウェア設計における 意思決定とそのレビューの秘訣ソフトウェア設計における 意思決定とそのレビューの秘訣
ソフトウェア設計における 意思決定とそのレビューの秘訣Yoshitaka Kawashima
 
RecSys2023論文読み会_LLMRec_佐藤.pdf
RecSys2023論文読み会_LLMRec_佐藤.pdfRecSys2023論文読み会_LLMRec_佐藤.pdf
RecSys2023論文読み会_LLMRec_佐藤.pdfMasahiro Sato
 

What's hot (20)

Project Loom - 限定継続と軽量スレッド -
Project Loom - 限定継続と軽量スレッド - Project Loom - 限定継続と軽量スレッド -
Project Loom - 限定継続と軽量スレッド -
 
【de:code 2020】 カスタムコネクタ入門 : Power Platform と既存システムをつなげるカスタムコネクタ
【de:code 2020】 カスタムコネクタ入門 : Power Platform と既存システムをつなげるカスタムコネクタ【de:code 2020】 カスタムコネクタ入門 : Power Platform と既存システムをつなげるカスタムコネクタ
【de:code 2020】 カスタムコネクタ入門 : Power Platform と既存システムをつなげるカスタムコネクタ
 
Go言語によるwebアプリの作り方
Go言語によるwebアプリの作り方Go言語によるwebアプリの作り方
Go言語によるwebアプリの作り方
 
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編
 
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
講演資料: コスト最適なプライベートCDNを「NGINX」で実現するWeb最適化セミナー
 
規格書で読むC++11のスレッド
規格書で読むC++11のスレッド規格書で読むC++11のスレッド
規格書で読むC++11のスレッド
 
MySQLからPostgreSQLへのマイグレーションのハマリ所
MySQLからPostgreSQLへのマイグレーションのハマリ所MySQLからPostgreSQLへのマイグレーションのハマリ所
MySQLからPostgreSQLへのマイグレーションのハマリ所
 
Zabbix最新情報 ~Zabbix 6.0に向けて~ @OSC2021 Online/Fall
Zabbix最新情報 ~Zabbix 6.0に向けて~ @OSC2021 Online/FallZabbix最新情報 ~Zabbix 6.0に向けて~ @OSC2021 Online/Fall
Zabbix最新情報 ~Zabbix 6.0に向けて~ @OSC2021 Online/Fall
 
Cours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateurCours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateur
 
C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)
C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)
C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)
 
FIDO認証によるパスワードレスログイン実装入門
FIDO認証によるパスワードレスログイン実装入門FIDO認証によるパスワードレスログイン実装入門
FIDO認証によるパスワードレスログイン実装入門
 
僕とヤフーと時々Teradata #prestodb
僕とヤフーと時々Teradata #prestodb僕とヤフーと時々Teradata #prestodb
僕とヤフーと時々Teradata #prestodb
 
[CEDEC2017] LINEゲームのセキュリティ診断手法
[CEDEC2017] LINEゲームのセキュリティ診断手法[CEDEC2017] LINEゲームのセキュリティ診断手法
[CEDEC2017] LINEゲームのセキュリティ診断手法
 
AngularJS入門
AngularJS入門AngularJS入門
AngularJS入門
 
軽くRDB再入門とGraph DB 入門
軽くRDB再入門とGraph DB 入門軽くRDB再入門とGraph DB 入門
軽くRDB再入門とGraph DB 入門
 
オブジェクト指向できていますか?
オブジェクト指向できていますか?オブジェクト指向できていますか?
オブジェクト指向できていますか?
 
ブロックチェーンを用いた自己主権型デジタルID管理
ブロックチェーンを用いた自己主権型デジタルID管理ブロックチェーンを用いた自己主権型デジタルID管理
ブロックチェーンを用いた自己主権型デジタルID管理
 
IDベース暗号の概観と今後の展望(次世代セキュア情報基盤ワークショップ )
IDベース暗号の概観と今後の展望(次世代セキュア情報基盤ワークショップ )IDベース暗号の概観と今後の展望(次世代セキュア情報基盤ワークショップ )
IDベース暗号の概観と今後の展望(次世代セキュア情報基盤ワークショップ )
 
ソフトウェア設計における 意思決定とそのレビューの秘訣
ソフトウェア設計における 意思決定とそのレビューの秘訣ソフトウェア設計における 意思決定とそのレビューの秘訣
ソフトウェア設計における 意思決定とそのレビューの秘訣
 
RecSys2023論文読み会_LLMRec_佐藤.pdf
RecSys2023論文読み会_LLMRec_佐藤.pdfRecSys2023論文読み会_LLMRec_佐藤.pdf
RecSys2023論文読み会_LLMRec_佐藤.pdf
 

Similar to Xamarinで作る 「オリジナルタイル地図」アプリ

cloud_firestore_schema_code_generation_for_flutter.pdf
cloud_firestore_schema_code_generation_for_flutter.pdfcloud_firestore_schema_code_generation_for_flutter.pdf
cloud_firestore_schema_code_generation_for_flutter.pdfKosuke Saigusa
 
Implementation patterns
Implementation patternsImplementation patterns
Implementation patternsTatsuya Maki
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用Yatabe Terumasa
 
Android Lecture #03 @PRO&BSC Inc.
Android Lecture #03 @PRO&BSC Inc.Android Lecture #03 @PRO&BSC Inc.
Android Lecture #03 @PRO&BSC Inc.Yuki Higuchi
 
Xamarin ~ iOS/Android/Windows アプリを C# で作ろう~
Xamarin ~ iOS/Android/Windows アプリをC# で作ろう~Xamarin ~ iOS/Android/Windows アプリをC# で作ろう~
Xamarin ~ iOS/Android/Windows アプリを C# で作ろう~Fujio Kojima
 
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
「Windows 8 ストア アプリ開発 tips」  hokuriku.net vol.11 (2013年1月26日)「Windows 8 ストア アプリ開発 tips」  hokuriku.net vol.11 (2013年1月26日)
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)Fujio Kojima
 
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~Fujio Kojima
 
5分でわかったつもりになるParse.com
5分でわかったつもりになるParse.com5分でわかったつもりになるParse.com
5分でわかったつもりになるParse.comKenta Tsuji
 
Windows azure mobile services による mobile + cloud アプリケーション超高速開発
Windows azure mobile services による mobile + cloud アプリケーション超高速開発Windows azure mobile services による mobile + cloud アプリケーション超高速開発
Windows azure mobile services による mobile + cloud アプリケーション超高速開発Shotaro Suzuki
 
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLMedia Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLAtsushi Tadokoro
 
RでGISハンズオンセッション
RでGISハンズオンセッションRでGISハンズオンセッション
RでGISハンズオンセッションarctic_tern265
 
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めようAdvancedTechNight
 
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得Atsushi Tadokoro
 
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3DプログラミングWebデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3DプログラミングAtsushi Tadokoro
 

Similar to Xamarinで作る 「オリジナルタイル地図」アプリ (20)

cloud_firestore_schema_code_generation_for_flutter.pdf
cloud_firestore_schema_code_generation_for_flutter.pdfcloud_firestore_schema_code_generation_for_flutter.pdf
cloud_firestore_schema_code_generation_for_flutter.pdf
 
Implementation patterns
Implementation patternsImplementation patterns
Implementation patterns
 
Kadai2
Kadai2Kadai2
Kadai2
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
 
Android Lecture #03 @PRO&BSC Inc.
Android Lecture #03 @PRO&BSC Inc.Android Lecture #03 @PRO&BSC Inc.
Android Lecture #03 @PRO&BSC Inc.
 
CG2013 12
CG2013 12CG2013 12
CG2013 12
 
Xamarin ~ iOS/Android/Windows アプリを C# で作ろう~
Xamarin ~ iOS/Android/Windows アプリをC# で作ろう~Xamarin ~ iOS/Android/Windows アプリをC# で作ろう~
Xamarin ~ iOS/Android/Windows アプリを C# で作ろう~
 
KMLとR言語
KMLとR言語KMLとR言語
KMLとR言語
 
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
「Windows 8 ストア アプリ開発 tips」  hokuriku.net vol.11 (2013年1月26日)「Windows 8 ストア アプリ開発 tips」  hokuriku.net vol.11 (2013年1月26日)
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
 
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
3D で遊ぼう ~C#er も TypeScript で楽々 WebGL~
 
5分でわかったつもりになるParse.com
5分でわかったつもりになるParse.com5分でわかったつもりになるParse.com
5分でわかったつもりになるParse.com
 
Arctic.js
Arctic.jsArctic.js
Arctic.js
 
Windows azure mobile services による mobile + cloud アプリケーション超高速開発
Windows azure mobile services による mobile + cloud アプリケーション超高速開発Windows azure mobile services による mobile + cloud アプリケーション超高速開発
Windows azure mobile services による mobile + cloud アプリケーション超高速開発
 
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLMedia Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
 
RでGISハンズオンセッション
RでGISハンズオンセッションRでGISハンズオンセッション
RでGISハンズオンセッション
 
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
 
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
 
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3DプログラミングWebデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
 
Tamabi media131118
Tamabi media131118Tamabi media131118
Tamabi media131118
 
Gdg geo2
Gdg geo2Gdg geo2
Gdg geo2
 

More from Kohei Otsuka

Maplat - Map technology explanation, for implementation based on Map API othe...
Maplat - Map technology explanation, for implementation based on Map API othe...Maplat - Map technology explanation, for implementation based on Map API othe...
Maplat - Map technology explanation, for implementation based on Map API othe...Kohei Otsuka
 
Maplat -Mapping know-how
Maplat -Mapping know-howMaplat -Mapping know-how
Maplat -Mapping know-howKohei Otsuka
 
Introduction of HTGCL (Historical Topographic Ground Control Line) - New para...
Introduction of HTGCL (Historical Topographic Ground Control Line) - New para...Introduction of HTGCL (Historical Topographic Ground Control Line) - New para...
Introduction of HTGCL (Historical Topographic Ground Control Line) - New para...Kohei Otsuka
 
A vision to make OSM data the backbone of history across time and space - Int...
A vision to make OSM data the backbone of history across time and space - Int...A vision to make OSM data the backbone of history across time and space - Int...
A vision to make OSM data the backbone of history across time and space - Int...Kohei Otsuka
 
Maplat – 地図を歪ませず非線形全単射変換を保証する古地図ビューア技術
Maplat – 地図を歪ませず非線形全単射変換を保証する古地図ビューア技術Maplat – 地図を歪ませず非線形全単射変換を保証する古地図ビューア技術
Maplat – 地図を歪ませず非線形全単射変換を保証する古地図ビューア技術Kohei Otsuka
 
Maplat - Historical viewer technology that guarantees nonlinear bijective con...
Maplat - Historical viewer technology that guarantees nonlinear bijective con...Maplat - Historical viewer technology that guarantees nonlinear bijective con...
Maplat - Historical viewer technology that guarantees nonlinear bijective con...Kohei Otsuka
 
Maplat - Historical map viewer technology that guarantees nonlinear bijective...
Maplat - Historical map viewer technology that guarantees nonlinear bijective...Maplat - Historical map viewer technology that guarantees nonlinear bijective...
Maplat - Historical map viewer technology that guarantees nonlinear bijective...Kohei Otsuka
 
MaplatEditorによる古地図データ作成での地理院地図タイルの活用
MaplatEditorによる古地図データ作成での地理院地図タイルの活用MaplatEditorによる古地図データ作成での地理院地図タイルの活用
MaplatEditorによる古地図データ作成での地理院地図タイルの活用Kohei Otsuka
 
Maplat - 双方向非線形全単射変換を保証する古地図アプリケーション
Maplat - 双方向非線形全単射変換を保証する古地図アプリケーションMaplat - 双方向非線形全単射変換を保証する古地図アプリケーション
Maplat - 双方向非線形全単射変換を保証する古地図アプリケーションKohei Otsuka
 
古地図関連技術をサーバレスアーキテクチャのみでなんとかし隊 (1)
古地図関連技術をサーバレスアーキテクチャのみでなんとかし隊 (1)古地図関連技術をサーバレスアーキテクチャのみでなんとかし隊 (1)
古地図関連技術をサーバレスアーキテクチャのみでなんとかし隊 (1)Kohei Otsuka
 
Maplat – Historical Maps Viewer, guarantees nonlinear bijective projection
Maplat – Historical Maps Viewer, guarantees nonlinear bijective projectionMaplat – Historical Maps Viewer, guarantees nonlinear bijective projection
Maplat – Historical Maps Viewer, guarantees nonlinear bijective projectionKohei Otsuka
 
FOSS4Gだらけの 古地図Platform Maplatのご紹介 (OFF4G 2016)
FOSS4Gだらけの古地図Platform Maplatのご紹介 (OFF4G 2016)FOSS4Gだらけの古地図Platform Maplatのご紹介 (OFF4G 2016)
FOSS4Gだらけの 古地図Platform Maplatのご紹介 (OFF4G 2016)Kohei Otsuka
 
OFF4G 2016版 Code for NARA 横浜支部の活動
OFF4G 2016版 Code for NARA 横浜支部の活動OFF4G 2016版 Code for NARA 横浜支部の活動
OFF4G 2016版 Code for NARA 横浜支部の活動Kohei Otsuka
 
Code for NARA 横浜支部の活動
Code for NARA 横浜支部の活動Code for NARA 横浜支部の活動
Code for NARA 横浜支部の活動Kohei Otsuka
 
Wikipedia 出典/参考文献の書き方
Wikipedia 出典/参考文献の書き方Wikipedia 出典/参考文献の書き方
Wikipedia 出典/参考文献の書き方Kohei Otsuka
 
アーバンデータチャレンジ2015及び岩手アプリコンテスト用発表資料
アーバンデータチャレンジ2015及び岩手アプリコンテスト用発表資料アーバンデータチャレンジ2015及び岩手アプリコンテスト用発表資料
アーバンデータチャレンジ2015及び岩手アプリコンテスト用発表資料Kohei Otsuka
 
ニュータウンぶらり(再)
ニュータウンぶらり(再)ニュータウンぶらり(再)
ニュータウンぶらり(再)Kohei Otsuka
 
ジオメディアサミット大阪2015 〜時空間メディアの可能性について考えてみよう〜 イントロ
ジオメディアサミット大阪2015 〜時空間メディアの可能性について考えてみよう〜 イントロジオメディアサミット大阪2015 〜時空間メディアの可能性について考えてみよう〜 イントロ
ジオメディアサミット大阪2015 〜時空間メディアの可能性について考えてみよう〜 イントロKohei Otsuka
 
NEDO SUIピッチ 時空間地図作成サービス「歴史国土」
NEDO SUIピッチ 時空間地図作成サービス「歴史国土」NEDO SUIピッチ 時空間地図作成サービス「歴史国土」
NEDO SUIピッチ 時空間地図作成サービス「歴史国土」Kohei Otsuka
 
ちずぶらりコンテンツ品質改善のための地図エディタUI改善案
ちずぶらりコンテンツ品質改善のための地図エディタUI改善案ちずぶらりコンテンツ品質改善のための地図エディタUI改善案
ちずぶらりコンテンツ品質改善のための地図エディタUI改善案Kohei Otsuka
 

More from Kohei Otsuka (20)

Maplat - Map technology explanation, for implementation based on Map API othe...
Maplat - Map technology explanation, for implementation based on Map API othe...Maplat - Map technology explanation, for implementation based on Map API othe...
Maplat - Map technology explanation, for implementation based on Map API othe...
 
Maplat -Mapping know-how
Maplat -Mapping know-howMaplat -Mapping know-how
Maplat -Mapping know-how
 
Introduction of HTGCL (Historical Topographic Ground Control Line) - New para...
Introduction of HTGCL (Historical Topographic Ground Control Line) - New para...Introduction of HTGCL (Historical Topographic Ground Control Line) - New para...
Introduction of HTGCL (Historical Topographic Ground Control Line) - New para...
 
A vision to make OSM data the backbone of history across time and space - Int...
A vision to make OSM data the backbone of history across time and space - Int...A vision to make OSM data the backbone of history across time and space - Int...
A vision to make OSM data the backbone of history across time and space - Int...
 
Maplat – 地図を歪ませず非線形全単射変換を保証する古地図ビューア技術
Maplat – 地図を歪ませず非線形全単射変換を保証する古地図ビューア技術Maplat – 地図を歪ませず非線形全単射変換を保証する古地図ビューア技術
Maplat – 地図を歪ませず非線形全単射変換を保証する古地図ビューア技術
 
Maplat - Historical viewer technology that guarantees nonlinear bijective con...
Maplat - Historical viewer technology that guarantees nonlinear bijective con...Maplat - Historical viewer technology that guarantees nonlinear bijective con...
Maplat - Historical viewer technology that guarantees nonlinear bijective con...
 
Maplat - Historical map viewer technology that guarantees nonlinear bijective...
Maplat - Historical map viewer technology that guarantees nonlinear bijective...Maplat - Historical map viewer technology that guarantees nonlinear bijective...
Maplat - Historical map viewer technology that guarantees nonlinear bijective...
 
MaplatEditorによる古地図データ作成での地理院地図タイルの活用
MaplatEditorによる古地図データ作成での地理院地図タイルの活用MaplatEditorによる古地図データ作成での地理院地図タイルの活用
MaplatEditorによる古地図データ作成での地理院地図タイルの活用
 
Maplat - 双方向非線形全単射変換を保証する古地図アプリケーション
Maplat - 双方向非線形全単射変換を保証する古地図アプリケーションMaplat - 双方向非線形全単射変換を保証する古地図アプリケーション
Maplat - 双方向非線形全単射変換を保証する古地図アプリケーション
 
古地図関連技術をサーバレスアーキテクチャのみでなんとかし隊 (1)
古地図関連技術をサーバレスアーキテクチャのみでなんとかし隊 (1)古地図関連技術をサーバレスアーキテクチャのみでなんとかし隊 (1)
古地図関連技術をサーバレスアーキテクチャのみでなんとかし隊 (1)
 
Maplat – Historical Maps Viewer, guarantees nonlinear bijective projection
Maplat – Historical Maps Viewer, guarantees nonlinear bijective projectionMaplat – Historical Maps Viewer, guarantees nonlinear bijective projection
Maplat – Historical Maps Viewer, guarantees nonlinear bijective projection
 
FOSS4Gだらけの 古地図Platform Maplatのご紹介 (OFF4G 2016)
FOSS4Gだらけの古地図Platform Maplatのご紹介 (OFF4G 2016)FOSS4Gだらけの古地図Platform Maplatのご紹介 (OFF4G 2016)
FOSS4Gだらけの 古地図Platform Maplatのご紹介 (OFF4G 2016)
 
OFF4G 2016版 Code for NARA 横浜支部の活動
OFF4G 2016版 Code for NARA 横浜支部の活動OFF4G 2016版 Code for NARA 横浜支部の活動
OFF4G 2016版 Code for NARA 横浜支部の活動
 
Code for NARA 横浜支部の活動
Code for NARA 横浜支部の活動Code for NARA 横浜支部の活動
Code for NARA 横浜支部の活動
 
Wikipedia 出典/参考文献の書き方
Wikipedia 出典/参考文献の書き方Wikipedia 出典/参考文献の書き方
Wikipedia 出典/参考文献の書き方
 
アーバンデータチャレンジ2015及び岩手アプリコンテスト用発表資料
アーバンデータチャレンジ2015及び岩手アプリコンテスト用発表資料アーバンデータチャレンジ2015及び岩手アプリコンテスト用発表資料
アーバンデータチャレンジ2015及び岩手アプリコンテスト用発表資料
 
ニュータウンぶらり(再)
ニュータウンぶらり(再)ニュータウンぶらり(再)
ニュータウンぶらり(再)
 
ジオメディアサミット大阪2015 〜時空間メディアの可能性について考えてみよう〜 イントロ
ジオメディアサミット大阪2015 〜時空間メディアの可能性について考えてみよう〜 イントロジオメディアサミット大阪2015 〜時空間メディアの可能性について考えてみよう〜 イントロ
ジオメディアサミット大阪2015 〜時空間メディアの可能性について考えてみよう〜 イントロ
 
NEDO SUIピッチ 時空間地図作成サービス「歴史国土」
NEDO SUIピッチ 時空間地図作成サービス「歴史国土」NEDO SUIピッチ 時空間地図作成サービス「歴史国土」
NEDO SUIピッチ 時空間地図作成サービス「歴史国土」
 
ちずぶらりコンテンツ品質改善のための地図エディタUI改善案
ちずぶらりコンテンツ品質改善のための地図エディタUI改善案ちずぶらりコンテンツ品質改善のための地図エディタUI改善案
ちずぶらりコンテンツ品質改善のための地図エディタUI改善案
 

Recently uploaded

Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Gamesatsushi061452
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...Toru Tamaki
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルCRI Japan, Inc.
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video UnderstandingToru Tamaki
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsWSO2
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptxsn679259
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Hiroshi Tomioka
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイスCRI Japan, Inc.
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 

Recently uploaded (11)

Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 

Xamarinで作る 「オリジナルタイル地図」アプリ

  • 1. Xamarinで作る 「オリジナルタイル地図」アプリ Code for NARA 大塚恒平 @kochizufan http://www.slideshare.net/kokogiko/jxug2014-osaka-3-2 1 2014/11/08
  • 2. 目次 1.自己紹介 2.タイル地図って? 3.TMSを使う場合 4.MBTilesを使う場合 5.TMSからMBTilesキャッシュ 6.Google Maps以外の選択 2 2014/11/08
  • 3. 1.自己紹介 2001年頃に自学でGISを勉強しジオメディア業界へ 2007〜2009年、マピオンで位置ゲー「ケータイ国盗り合戦」 を企画開発 2010〜2011年、ATR(けいはんな研究機関)でiOS古地図アプ リ「ちずぶらり」を企画開発 現在、某大手ポータルのフリーWiFi網構築事業の開発を担 当(Web、サーバサイド) Code for NARAで、奈良のオープンデータ活用活動をボラン タリーで 3 2014/11/08
  • 4. Xamarinとの出会い モバイル開発離れたけど、余暇でも自分でなんかやりたい な どうせならAndroidでも動くマルチプラットフォームで作ってみ たいな でもHTML5でUI作ってガワアプリってなんかちゃうよな 特にモバイル地図はHTML5とネイティブで使用感がダンチ UIはネイティブ、バックエンドロジックは共通化= Xamarin、 おおこれや! 1年ほど前から余暇で触ってます 4 2014/11/08
  • 5. C#暦ありません(汗 LINQ、Rx…あまり判ってません ネイティブ(Java)Android開発歴もありません iOS8もLolipopも未体験 現役モバイル開発者ちゃうし MVVMとかFormsとか全く追いついてません 現役(ry 今日もお客さんのつもりが、話してと言われたさかいに… 地図は得意なので、Xamarinでの特殊な地図アプリの作り方を話 します 5 2014/11/08
  • 7. 2.タイル地図って? みなさんスマホ開発での地図というと何を想像されま すか? MapKit? Google Maps? Y!地図? 7 © Apple/Google/2Y0A14H/1O1/O08 Japan
  • 8. 実はこんなんも使えます OpenStreetMap (OpenMapsより) 地理院地図 (FieldAccessより) © OpenStreetMap/8 IZE Ltd./国土地理院2/d01e4n/1d1r/0o8copos
  • 9. こんなんだって © ovalgear/国土地理院/埼玉大学/Mapbox 古地図(time toursより) 官製地形図 (今昔マップon the webより) デザイン地図 (Mapbox社) 9 2014/11/08
  • 10. これみんなタイル地図 GoogleがGoogle Mapsで発明した、球面メルカトル図 法を使った四分木タイル地図 南北緯85度付近以上を除く世界全域が正方形画像で 表せる(最小ズームで256px四方) ズームを一つ大きくする度、タイルを四分割 競合他社(マイクロソフト等)やオープンソースも採用し、 事実上Web地図標準 10 2014/11/08
  • 11. こんな感じ Google Maps APIリファレンスより ズームレベル0 ズームレベル2 256px 256px 11 2014/11©/0 G8oogle
  • 12. 難しいかもしれませんが ズームレベルzとx座標x、y座標yを指定されたら、そこ に対応する地図画像を返してやると地図表示できる仕 様と思っておk ぶっちゃけ対応している地図APIなら、インタフェースで 勝手にx, y, zを与えてくれるので、対応する画像や画像 URLを返してやるだけ MapKitは対応してなかったはず…使うなら自分で原理 を理解して各位置の画像をオーバーレイ 12 2014/11/08
  • 13. 使える地図は? OpenStreetMap系 OpenStreetMapをいろんなデザインでレンダリングした タイルセットが利用できます http://wiki.openstreetmap.org/wiki/Tiles に一覧 13 © O2p0e1n4S/1t1r/e0e8tMap
  • 14. OpenStreetMap系 14 © O2p0e1n4S/1t1r/e0e8tMap
  • 15. 使える地図、他には? 国土地理院系 国土地理院が用意した様々なタイルセット(昔の航空 写真とかもあります)が利用できます http://portal.cyberjapan.jp/help/development/ichiran. html に一覧 探せば 他にもたくさん 15 2©01 国4/1土1/0地8 理院
  • 16. 地理院地図の数々 16 2©01 国4/1土1/0地8 理院
  • 17. 自分で作る事もできます ラスタ画像地図から作成 GISツール(gdal2tiles等)を使います 詳細は拙Slideshare参照 http://www.slideshare.net/kokogiko/ss-15067961 これ説明し出すと マジXamarin関係なくなってしまう 17 2014/11/08
  • 18. こんな感じで作れます © Google/国土地理院/気仙沼市 気仙沼市ハザードマップから 官製地形図から 地形数値データから 陰影図描画して 18 2014/11/08
  • 19. OpenStreetMapの データから独自デザイン Mapboxという会社のMapbox Studioというアプリで自 由デザイン https://www.mapbox.com/mapbox-studio/ ←cssみたいな感じで 地図をデザイン 19 2014/©11 /M08apbox
  • 21. タイル地図を使うと 誰もが使うMapKitやGoogle Maps等とは一味違う地図アプリが作 れます! (ニーズがあるかはさておき^^) むしろ地図自身が表現手段になる! Webもアプリも共通仕様!(Google Earthで使うには一工夫必要) Google Maps SDKはタイル地図が使えて、iOS/Android両方で提 供されているので、Xamarinでタイル地図を使うのに向いてます 以後の説明のソースコードは https://github.com/tilemapjp/xamarinMapJXUG で公開しています 21 2014/11/08
  • 22. 3.TMSを使う場合 TMS(Tile Map Service)とは? タイル地図で画像のURLを指定する仕様 例:地理院地図標準レイヤ http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png ズームz,x座標,y座標の値で{z},{x},{y}を置き換えてやれ ば画像のURLになる このURLをSDKにあげればいい 簡単! 22 2014/11/08
  • 23. 下準備 (SharedProject or PCL) public partial class URLConstructor { private string baseURL = "http://t.tilemap.jp/jcp_maps/harima/{z}/{x}/{y}.png"; private string regexURL = null; public URLConstructor () { regexURL = baseURL.Replace("{x}", "{0}"); regexURL = regexURL.Replace("{y}", "{1}"); regexURL = regexURL.Replace("{z}", "{2}"); } public string GetUrl(int x, int y, int z) { //TMS形式はGoogleのY座標と正負の方向が逆なので直す y = (int)Math.Pow (2.0, (double)z) - y - 1; string url = String.Format (regexURL, x, y, z); return url; } } 元定義 23 2014/11/08
  • 24. 下準備 (SharedProject or PCL) public partial class URLConstructor { private string baseURL = "http://t.tilemap.jp/jcp_maps/harima/{z}/{x}/{y}.png"; private string regexURL = null; public URLConstructor () { regexURL = baseURL.Replace("{x}", "{0}"); regexURL = regexURL.Replace("{y}", "{1}"); regexURL = regexURL.Replace("{z}", "{2}"); } TMS表記をFormat表記に public string GetUrl(int x, int y, int z) { //TMS形式はGoogleのY座標と正負の方向が逆なので直す y = (int)Math.Pow (2.0, (double)z) - y - 1; string url = String.Format (regexURL, x, y, z); return url; } } 24 2014/11/08
  • 25. 下準備 (SharedProject or PCL) public partial class URLConstructor { private string baseURL = "http://t.tilemap.jp/jcp_maps/harima/{z}/{x}/{y}.png"; private string regexURL = null; public URLConstructor () { regexURL = baseURL.Replace("{x}", "{0}"); regexURL = regexURL.Replace("{y}", "{1}"); regexURL = regexURL.Replace("{z}", "{2}"); } public string GetUrl(int x, int y, int z) { //TMS形式はGoogleのY座標と正負の方向が逆なので直す y = (int)Math.Pow (2.0, (double)z) - y - 1; string url = String.Format (regexURL, x, y, z); return url; } } これは何? 25 2014/11/08
  • 26. TMS仕様には 2つの流儀がある GIS業界型(本来のTMS) Web地図業界型 x、y、z x、y、z ・y座標が南から北へ ・GISツールで作るとこちらになる ・y座標が北から南へ ・Google、OpenStreetMap、 国土地理院、Mapbox他 26 2014/11/08
  • 27. GISツールで作ったデータを Google Maps SDKで使うに は y座標が逆向きなので変換してやる必要がある 定型文で覚えれば無問題 y = (int)Math.Pow (2.0, (double)z) - y - 1; このくらい覚えろ! すみません覚えてください 27 2014/11/08
  • 28. Xamarin iOS URLConstructor constructor = new URLConstructor (); … MapView mapView = new MapView (); … var tmsProvider = UrlTileLayer.FromUrlConstructor ((uint x, uint y, uint zoom) => { string url = constructor.GetUrl((int)x,(int)y,(int)zoom); return new NSUrl(url); }); tmsProvider.Map = mapView; UrlTileLayer.FromUrlConstructorに NSUrlを生成するラムダ式を食わせて UrlTileLayerを生成し MapプロパティにMapViewを指定するだけ 28 2014/11/08
  • 29. Xamarin Android(1) 若干面倒くさい class URLTilesProvider : UrlTileProvider { private URLConstructor constructor; UrlTileProviderを継承 public URLTilesProvider () : base (256, 256) { constructor = new URLConstructor (); } public override Java.Net.URL GetTileUrl (int x, int y, int z) { var url = constructor.GetUrl (x, y, z); return new Java.Net.URL (url); } } Java.Net.URLを返すGetTileUrlメソッドを実装 29 2014/11/08
  • 30. Xamarin Android(2) protected override void OnResume () { var mapView = ((MapFragment)FragmentManager.FindFragmentById (Resource.Id.map)).Map; MapViewはMapFragmentから取得 if (mapView != null) { var tmsProvider = new URLTilesProvider (); var mbOptions = new TileOverlayOptions(); mapView.AddTileOverlay( mbOptions.InvokeTileProvider(tmsProvider) ); } } TileOverlayOptions#InvokeTileProviderに 作成したUrlTileProviderを食わせ、 TileOverlayを生成してMapViewにAddTileOverlay 30 2014/11/08
  • 31. TMS利用の結果 簡単…ですよね? なんとこれだけで 一味違うタイル地図が あなたのお手元に! 31 2014/11/08
  • 32. TMSの問題点 地図画像をURL指定でネットから取ってくるために… 描画がネットレイテンシのため遅い オフラインで使えない 「せっかく自分で地図用意してるのに、オフラインでも使 いたいんだよ!」 というワガママなあなたのために… 32 2014/11/08
  • 33. 4.MBTilesを使う場合 MBTilesとは タイル地図画像をオフラインで保持・流通させるための フォーマット仕様 SQLiteファイル形式を使用 なので普通のSQLite APIで余裕で使える 33 2014/11/08
  • 34. MBTilesのスキーマ (Ver.1.0) CREATE TABLE metadata (name text, value text); CREATE TABLE tiles (zoom_level integer, tile_column integer, tile_row integer, tile_data blob); ズームレベルx座標y座標画像 ぶっちゃけこれだけ!! (インデックスも張られますが…) 34 2014/11/08
  • 35. MBTilesのスキーマ (私が今使ってるもの) CREATE TABLE map ( zoom_level INTEGER, tile_column INTEGER, tile_row INTEGER, tile_id TEXT, grid_id TEXT );"); 正規化されたり CREATE TABLE grid_key ( grid_id TEXT, key_name TEXT );"); 他のデータも加わってるが、 CREATE TABLE keymap ( key_name TEXT, key_json TEXT );"); CREATE TABLE grid_utfgrid ( grid_id TEXT, grid_utfgrid BLOB );"); viewがあるのでSELECT CREATE TABLE images ( tile_data blob, tile_id text );"); する分には1.0と同じ CREATE TABLE metadata ( name text, value text );"); CREATE UNIQUE INDEX map_index ON map (zoom_level, tile_column, tile_row);"); CREATE UNIQUE INDEX grid_key_lookup ON grid_key (grid_id, key_name);"); CREATE UNIQUE INDEX keymap_lookup ON keymap (key_name);"); CREATE UNIQUE INDEX grid_utfgrid_lookup ON grid_utfgrid (grid_id);"); CREATE UNIQUE INDEX images_id ON images (tile_id);"); CREATE UNIQUE INDEX name ON metadata (name);"); CREATE VIEW tiles AS SELECT map.zoom_level AS zoom_level, map.tile_column AS tile_column, map.tile_row AS tile_row, images.tile_data AS tile_data FROM map JOIN images ON images.tile_id = map.tile_id;"); CREATE VIEW grids AS SELECT map.zoom_level AS zoom_level, map.tile_column AS tile_column, map.tile_row AS tile_row, grid_utfgrid.grid_utfgrid AS grid FROM map JOIN grid_utfgrid ON grid_utfgrid.grid_id = map.grid_id;"); CREATE VIEW grid_data AS SELECT map.zoom_level AS zoom_level, map.tile_column AS tile_column, map.tile_row AS tile_row, keymap.key_name AS key_name, keymap.key_json AS key_json FROM map JOIN grid_key ON map.grid_id = grid_key.grid_id JOIN keymap ON grid_key.key_name = keymap.key_name;"); 実は仕様の出所不明… と最近気付いた 謎仕様!!! 35 2014/11/08
  • 36. MBTilesを作るには Mapbox Studio等からは直接生成可能 GISツールから画像タイルを作成した際等は、拙作の Tile2MBTiles https://github.com/tilemapjp/Tile2MBTiles 等を使ってMBTiles化 できあがりは謎仕様です 仕様簡単なので自前でプログラムも君達なら楽勝のはず! 最近はGISツールからも直接出せるようになったという話も (未確認) 36 2014/11/08
  • 37. Shared Project (or PCL) MBTiles ファイルのコピー処理 MBTilesファイルはEmbededResourceを使ってプロジェ クトに含める MBTilesファイルのコピー先は System.Environment.GetFolderPath(System.Environ ment.SpecialFolder.MyDocuments); で取得すると、マルチプラットフォームで共通化できる こうするとSQLite周りの処理はコピーからデータ読み込 みまで全部マルチプラットフォーム化できてウマーー 37 2014/11/08
  • 38. EmbededResource? これ iOSにも Androidにもあるよ! 38 2014/11/08
  • 39. EmbededResourceを 使う利点と欠点 利点 MBTilesファイル処理周りを全部共通ロジック化できる! プラットフォームでの処理分けが不要! 欠点 AndroidのAssetsはともかく iOSのBundleResourceは直接MBTilesとしてリードオン リーで開けるので、初回に本来無用なコピー処理が発生 する お好みで… 39 2014/11/08
  • 40. Shared Project (or PCL) MBTiles ファイルのコピー処理 this.dbFolder = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments); this.dbPath = Path.Combine (this.dbFolder, this.dbFile); Type type = this.GetType (); Stream myInput = type.Assembly.GetManifestResourceStream ("JXUGMBTiles." + this.dbFile); Stream myOutput = new FileStream(this.dbPath, FileMode.OpenOrCreate); byte[] buffer = new byte[1024]; int b = buffer.Length; int length; while ((length = myInput.Read(buffer, 0, b)) > 0) { myOutput.Write(buffer, 0, length); } myOutput.Flush(); myOutput.Close(); myInput.Close(); コピー先のフォルダを取得 40 2014/11/08
  • 41. Shared Project (or PCL) MBTiles ファイルのコピー処理 this.dbFolder = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments); this.dbPath = Path.Combine (this.dbFolder, this.dbFile); Type type = this.GetType (); Stream myInput = type.Assembly.GetManifestResourceStream ("JXUGMBTiles." + this.dbFile); Stream myOutput = new FileStream(this.dbPath, FileMode.OpenOrCreate); byte[] buffer = new byte[1024]; int b = buffer.Length; int length; while ((length = myInput.Read(buffer, 0, b)) > 0) { myOutput.Write(buffer, 0, length); } myOutput.Flush(); myOutput.Close(); myInput.Close(); EmbededResourceのStreamを開く コピー先のStreamも開く 41 2014/11/08
  • 42. Shared Project (or PCL) MBTiles ファイルのコピー処理 this.dbFolder = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments); this.dbPath = Path.Combine (this.dbFolder, this.dbFile); Type type = this.GetType (); Stream myInput = type.Assembly.GetManifestResourceStream ("JXUGMBTiles." + this.dbFile); Stream myOutput = new FileStream(this.dbPath, FileMode.OpenOrCreate); byte[] buffer = new byte[1024]; int b = buffer.Length; int length; while ((length = myInput.Read(buffer, 0, b)) > 0) { myOutput.Write(buffer, 0, length); } myOutput.Flush(); myOutput.Close(); myInput.Close(); コピー処理 42 2014/11/08
  • 43. Shared Project (or PCL) xyzから画像の取得 public class tiles { public int zoom_level { get; set; } public int tile_column { get; set; } public int tile_row { get; set; } public byte[] tile_data { get; set; } } … public byte[] GetTileImage(int x, int y, int z) { byte[] image = null; y = (int)Math.Pow (2.0, (double)z) - y – 1; using (var conn = new SQLiteConnection(this.dbPath)) { var query = conn.Table<tiles> ().Where (v => v.zoom_level == z && v.tile_column == x && v.tile_row == y); if (query.Count () != 0) { var tile = query.First (); image = tile.tile_data; } } return image; } SQLite.Netを使用、スキーマクラス 43 2014/11/08
  • 44. Shared Project (or PCL) xyzから画像の取得 public class tiles { public int zoom_level { get; set; } public int tile_column { get; set; } public int tile_row { get; set; } public byte[] tile_data { get; set; } } … public byte[] GetTileImage(int x, int y, int z) { byte[] image = null; y = (int)Math.Pow (2.0, (double)z) - y – 1; using (var conn = new SQLiteConnection(this.dbPath)) { var query = conn.Table<tiles> ().Where (v => v.zoom_level == z && v.tile_column == x && v.tile_row == y); if (query.Count () != 0) { var tile = query.First (); image = tile.tile_data; } } return image; } SQLite.Netでx,y,zが一致する画像を検索 44 2014/11/08
  • 45. Xamarin iOS public class MBTilesProvider : SyncTileLayer { public override UIImage Tile (uint x, uint y, uint zoom) { var image = accessor.GetTileImage ((int)x, (int)y, (int)zoom); SyncTileLayerを継承したTileLayerを作成し、 UIImageを返すTileメソッドを実装 if (image == null) { return Constants.TileLayerNoTile; } else { return UIImage.LoadFromData (NSData.FromArray(image)); } } } … public override void ViewDidLoad () { var mbProvider = new MBTilesProvider (); mbProvider.Map = mapView; } TileLayerのMapプロパティに MapViewを指定するだけ 45 2014/11/08
  • 46. Xamarin Android class MBTilesProvider : Java.Lang.Object, ITileProvider { public Tile GetTile(int x, int y, int zoom) { var image = accessor.GetTileImage (x, y, zoom); Java.Lang.Object、ITileProviderを 継承したTileProviderを作成し、 Tileを返すGetTileメソッドを実装 if (image == null) { return TileProvider.NoTile; } else { return new Tile(TILE_WIDTH, TILE_HEIGHT, image); } } } … var mbProvider = new MBTilesProvider (); var mbOptions = new TileOverlayOptions(); mapView.AddTileOverlay( mbOptions.InvokeTileProvider(mbProvider) ); TileOverlayOptions経由で生成した TileOverlayをAddTileOverlayで MapViewに追加 46 2014/11/08
  • 47. MBTiles利用の結果 …は見た目はTMSと変わらないので省略 簡単でしょ?こっちも MBTilesの問題点 ローカルに地図データがあるので描画は速く、オフライ ンでも使えるが… データサイズが大きく、アプリサイズも大きくなる 遅いのもイヤ、デブッチョもイヤな方々には… 47 2014/11/08
  • 48. 5.TMSから MBTilesキャッシュ オンラインはTMSで地図画像を配信しながら、ローカル でMBTilesにキャッシュすれば多くの問題が解決 方針 TMSのURLを生成してSDKに渡し、画像取得はSDKに任 せて、画像を横取りしてキャッシュ 画像の取得自体をHTTPエージェントを使い自分で実装 する手もあるが、その辺はGoogleさんの実装の方が上 手だろうと思って… 48 2014/11/08
  • 49. 実装の詳細 省略 そろそろかなり煩雑になるので…Githubで見てください いくつかのキモ: MBTilesへのキャッシュの書き込みは複数スレッドから同時に 発生しないようにバックグラウンド化と直列化 Xamarin iOSでは、UrlTileLayerを継承できない 画像を受け取るには、非同期のコールバックオブジェクトをデ コレートして受け取る必要がある Xamarin Androidでも、UrlTileProviderのGetTileメソッドは virtualでなくオーバーライドできないので、デコレートオブジェ クトを作る必要 49 2014/11/08
  • 50. サンプルのおまけ タイル地図セットの提供する最大ズーム以上に拡大し ても、最大ズームでの画像をデジタルズームする機能 もつけてます 詳しくはGithubのソースと 以前にQiitaで記事を書いてるので参照 http://qiita.com/kochizufan/items/be19de4d9a4b6466a 9cf http://qiita.com/kochizufan/items/f6cdc8925d254c1833 8d 50 2014/11/08
  • 51. TMSでネット地図取得+ MBTilesキャッシュで アプリサイズが小さく、表示したところは以後軽くオフラ イン表示も可能な地図アプリが作れる これで文句は言わせない OpenStreetMap、地理院地図等も、普段はネット取得、 必要な範囲だけ事前にダウンロードしてMBTilesキャッ シュしてOK ネットが繋がらないところでも使えるオフライン地図 Google MapsやMapKitでは不可能(キャッシュはするが 制御はできない) 51 2014/11/08
  • 52. 6.Google Maps 以外の選択 タイル地図使えるのってGoogle Maps SDKだけ? 他にもいろいろある むしろタイル地図を使うなら本来FOSS4Gライブラリを使う のが本筋なんだけど Xamarinだとポーティングが少ないのが難 52 2014/11/08
  • 53. Google Maps SDKだと こういうのが 消せないのが イマイチ 53 2014/11/08
  • 54. ネイティブSDKで有名系 のXamarinバインディング Route-Me(iOS) https://github.com/mono/monotouch-bindings/ tree/master/Route-Me 非常に軽く高機能だが、実装思想が若干古い ライセンスは利用している事を記述?よう判らん osmdroid(Android) http://components.xamarin.com/view/osmdroid-android- binding Android界では有名だが、すんませんあまり知らん Apache 2.0 54 2014/11/08
  • 55. .NET マネージド系での OSS地図SDK OsmSharp http://www.osmsharp.com/ ベクトルデータに対応してるが若干重い マーカー機能とかまだこれから コマーシャルライセンス+GPLv2 Mapsui https://github.com/pauldendulk/Mapsui ラスタタイルのみの対応だがサクサク奇麗 地図描画のみの実装?マーカーとかが見当たらん… LGPLライセンス もちろんどっちもWindows Phoneでもいけまっせ 55 2014/11/08
  • 56. Xamarin未ポートの高機能 マルチプラットフォームSDK Mapbox SDK系 https://www.mapbox.com/developers/ タイル地図業界の期待の星企業 RouteMeやosmdroidを魔改造してる、最新のOpenGL版も 登場中 Apache 2.0 (Android) Maply https://github.com/mousebird/WhirlyGlobe 3D描画版がWihrlyGlobe、2D描画版がMaply iOSだが最新のβでMaplyはAndroidも対応開始 描画エンジンはc++で共通 Apache 2.0 56 2014/11/08
  • 57. Xamarin未ポートの高機能 マルチプラットフォームSDK Globe3Mobile http://www.glob3mobile.com/ 3D描画の地図エンジン iOS、Android両対応、共通エンジンっぽい BSD いつかポーティングできれば… 日曜プログラマじゃ無理?^^; 優秀なXama民の力をオラに貸してけれ! 57 2014/11/08
  • 58. 地図SDKだけやない .NET位置情報ライブラリ http://qiita.com/kochizufan/items/f7e2024be7079ded8697 Proj.NET c版ではproj.4と呼ばれる座標変換ライブラリ 世界測地系日本測地系とか、経緯度メルカトル座標と か .NET Topology Suite c版ではgeosと呼ばれる図形演算ライブラリ ポリゴン等の足し算引き算や、衝突判定等 http://qiita.com/amay077/items/7a99df1c0da881cc47f6 ↑あめい師匠の詳細解説! 58 2014/11/08
  • 59. 最後に会場の マイクロソフトさんに Bing Mapsは本当にいい地図です(デザインとか) 私大好きです なのに…なのに… 59 2014/11/08 © Zenrin/Microsoft
  • 60. なんでWindowsPhoneの 標準地図を NokiaのHEREにしてしもたんやーーーーーー! なんですかこれは 10年前の OpenStreetMap ですか… 60 2014/11/08 © Nokia/Microsoft
  • 61. 技術資産の相乗りは わかりますが データ資産は既存のもの活かしましょうや… データはZenrinとの絡みもあって難しいとは思います が、デザイン資産とかはMSのもんでしょうし… ぜひ日本のマイクロソフトから、日本の地図ちゃんと せー、と声を挙げていただきたい 61 © N2o0k1i4a//1M1/0ic8rosoft
  • 62. ご清聴おおきに! 今日聞いてくださった人の中から、タイル地図や位置 情報APIを使った「一味違う地図アプリ」を作ってくれる 方が出てくれれば光栄です! Xamarin、.NET、c#のますますの発展を! 大事な事なので二度目言います、 「来年は客席で待つ」 62 2014/11/08