MapionMapion Android Maps Android Maps APIAPI

#MA6 #MA6 MashupMashup Caravan Caravan –– Android/VOCALOID Android/VOCALOID TalksTalks

株式会社マピオン株式会社マピオン

本城本城 博昭博昭

2010/10/272010/10/27

自己紹介自己紹介

nn 名前名前nn 本城本城 博昭博昭 / @honjo2/ @honjo2

nn 所属所属nn 株式会社マピオン株式会社マピオン 技術開発部技術開発部

nn 業務内容業務内容nn マピオンの基盤となる技術の研究・開発マピオンの基盤となる技術の研究・開発

nn 成果成果nn 地図地図APIAPIの設計・開発の設計・開発

nn 開発プラットフォームの標準化開発プラットフォームの標準化nn MapionMapion Android Maps APIAndroid Maps API

MapionMapion Android Maps APIAndroid Maps APIとはとは

nn マピオン版マピオン版Google Maps APIGoogle Maps API。。nn 完全ネイティブ。完全ネイティブ。

nn 使い方同じ。使い方同じ。

対応バージョン対応バージョン

nn Android 1.6Android 1.6以上以上

導入手順導入手順

1.1. APIAPIキー取得キー取得

nn http://http://labs.mapion.co.jp/api/androidmaps/register.htmllabs.mapion.co.jp/api/androidmaps/register.html

2.2. ライブラリ（ライブラリ（jarjar）をプロジェクトに追加）をプロジェクトに追加nn http://labs.mapion.co.jp/api/dl/mapshttp://labs.mapion.co.jp/api/dl/maps--0.8.jar0.8.jar

3.3. AndroidManifest.xmlAndroidManifest.xmlに以下追記に以下追記nn <uses<uses--permission permission android:nameandroid:name="="android.permission.INTERNETandroid.permission.INTERNET" "

/> />

実践実践

地図を表示地図を表示(1/2)(1/2)publicpublic classclass MainActivityMainActivity extendsextends MapActivityMapActivity {{@Override@Overridepublicpublic voidvoid onCreate(BundleonCreate(Bundle bundle) {bundle) {supersuper.onCreate(bundle.onCreate(bundle););MapViewMapView mapViewmapView = = newnew MapView(MapView(thisthis,,

““APIKEY");APIKEY");mapView.setClickable(mapView.setClickable(truetrue); // false); // falseで静的で静的

setContentView(mapViewsetContentView(mapView););}}

}}

地図地図をを表示表示(2/2)(2/2)

nn ソースコードソースコードnn http://gist.github.com/635850http://gist.github.com/635850

nn サンプル画像（マピオンサンプル画像（マピオン / / グーグル）グーグル）

位置と縮尺を指定位置と縮尺を指定(1/2)(1/2)

// // 位置指定位置指定

mapView.getController().setCentermapView.getController().setCenter((newnew GeoPointGeoPoint((((intint) (35.7 * 1E6),) (35.7 * 1E6),((intint) (139.7 * 1E6)) (139.7 * 1E6)

));));

// // 縮尺指定縮尺指定

mapView.getController().setZoom(5);mapView.getController().setZoom(5);

位置と縮尺を指定位置と縮尺を指定(2/2)(2/2)

nn ソースコードソースコードnn http://gist.github.com/635882http://gist.github.com/635882

nn サンプル画像（マピオンサンプル画像（マピオン / / グーグル）グーグル）

移動移動(1/2)(1/2)// // ノンアニメーションノンアニメーションmapView.getController().setCentermapView.getController().setCenter((

new new GeoPointGeoPoint((((intint) (35.7 * 1E6),) (35.7 * 1E6),((intint) (139.7 * 1E6)) (139.7 * 1E6)

));));

// // アニメーションアニメーションmapView.getController().animateTomapView.getController().animateTo((

newnew GeoPointGeoPoint((((intint) (35.7 * 1E6),) (35.7 * 1E6),((intint) (139.7 * 1E6)) (139.7 * 1E6)

));));

移動移動(2/2)(2/2)

nn ソースコードソースコードnn http://gist.github.com/635917http://gist.github.com/635917

nn サンプル画像（マピオンサンプル画像（マピオン / / グーグル）グーグル）

円を描画円を描画(1/2)(1/2)Overlay circle = Overlay circle = newnew Overlay() {Overlay() {@Override@Overridepublicpublic voidvoid draw(Canvasdraw(Canvas canvas, canvas, MapViewMapView mapViewmapView, , booleanboolean shadow) {shadow) {ifif (!shadow) {(!shadow) {GeoPointGeoPoint p = p = newnew GeoPoint((GeoPoint((intint) (35.641625 * 1E6),) (35.641625 * 1E6),((intint) (139.749803 * 1E6));) (139.749803 * 1E6));

Point pos = Point pos = mapView.getProjection().toPixels(pmapView.getProjection().toPixels(p, , nullnull););

Paint Paint paintpaint = = newnew Paint();Paint();paint.setColor(Color.paint.setColor(Color.argbargb(150, 255, 0, 255));(150, 255, 0, 255));paint.setAntiAlias(paint.setAntiAlias(truetrue););

canvas.drawCircle(pos.xcanvas.drawCircle(pos.x, , pos.ypos.y, 30.0f, paint);, 30.0f, paint);}}

}}};};mapView.getOverlays().add(circlemapView.getOverlays().add(circle););

円を描画円を描画(2/2)(2/2)

nn ソースコードソースコードnn http://gist.github.com/635930http://gist.github.com/635930

nn サンプル画像（マピオンサンプル画像（マピオン / / グーグル）グーグル）

ラインを描画ラインを描画(1/2)(1/2)Overlay line = Overlay line = newnew Overlay() {Overlay() {@Override@Overridepublicpublic voidvoid draw(Canvasdraw(Canvas canvas, canvas, MapViewMapView mapViewmapView, , booleanboolean shadow) {shadow) {ifif (!shadow) {(!shadow) {GeoPointGeoPoint one = one = newnew GeoPoint((GeoPoint((intint) (35.641625 * 1E6), () (35.641625 * 1E6), (intint) (139.749803 * 1E6));) (139.749803 * 1E6));GeoPointGeoPoint two = two = newnew GeoPoint((GeoPoint((intint) (35.642625 * 1E6), () (35.642625 * 1E6), (intint) (139.747803 * 1E6));) (139.747803 * 1E6));GeoPointGeoPoint three = three = newnew GeoPoint((GeoPoint((intint) (35.642625 * 1E6), () (35.642625 * 1E6), (intint) (139.750803 * 1E6));) (139.750803 * 1E6));

Point Point onePointonePoint = = mapView.getProjection().toPixels(onemapView.getProjection().toPixels(one, , nullnull););Point Point twoPointtwoPoint = = mapView.getProjection().toPixels(twomapView.getProjection().toPixels(two, , nullnull););Point Point threePointthreePoint = = mapView.getProjection().toPixels(threemapView.getProjection().toPixels(three, , nullnull););

Paint Paint paintpaint = = newnew Paint();Paint();paint.setAntiAlias(paint.setAntiAlias(truetrue););

paint.setStrokeWidth(4);paint.setStrokeWidth(4);paint.setStyle(Paint.Style.paint.setStyle(Paint.Style.STROKESTROKE););paint.setColor(Color.paint.setColor(Color.argbargb(150, 255, 0, 255));(150, 255, 0, 255));canvas.drawLines(canvas.drawLines(newnew floatfloat[]{onePoint.x[]{onePoint.x, , onePoint.yonePoint.y, , twoPoint.xtwoPoint.x, , twoPoint.ytwoPoint.y,,twoPoint.xtwoPoint.x, , twoPoint.ytwoPoint.y, , threePoint.xthreePoint.x, , threePoint.ythreePoint.y}, paint);}, paint);

}}}}

};};mapView.getOverlays().add(linemapView.getOverlays().add(line););

ラインを描画ラインを描画(2/2)(2/2)

nn ソースコードソースコードnn http://gist.github.com/635942http://gist.github.com/635942

nn サンプル画像（マピオンサンプル画像（マピオン / / グーグル）グーグル）

ポリゴンを描画ポリゴンを描画(1/2)(1/2)Overlay polygon = Overlay polygon = newnew Overlay() {Overlay() {@Override@Overridepublicpublic voidvoid draw(Canvasdraw(Canvas canvas, canvas, MapViewMapView mapViewmapView, , booleanboolean shadow) {shadow) {ifif (!shadow) {(!shadow) {GeoPointGeoPoint one = one = newnew GeoPoint(35641625, 139749803);GeoPoint(35641625, 139749803);GeoPointGeoPoint two = two = newnew GeoPoint(35642625, 139747803);GeoPoint(35642625, 139747803);GeoPointGeoPoint three = three = newnew GeoPoint(35642625, 139751803);GeoPoint(35642625, 139751803);

Point Point onePointonePoint = = mapView.getProjection().toPixels(onemapView.getProjection().toPixels(one, , nullnull););Point Point twoPointtwoPoint = = mapView.getProjection().toPixels(twomapView.getProjection().toPixels(two, , nullnull););Point Point threePointthreePoint = = mapView.getProjection().toPixels(threemapView.getProjection().toPixels(three, , nullnull););

Paint Paint paintpaint = = newnew Paint();Paint();paint.setAntiAlias(paint.setAntiAlias(truetrue););paint.setColor(Color.paint.setColor(Color.argbargb(150, 255, 0, 255));(150, 255, 0, 255));paint.setStyle(Paint.Style.paint.setStyle(Paint.Style.FILL_AND_STROKEFILL_AND_STROKE););Path Path pathpath = = newnew Path();Path();

path.moveTo(onePoint.xpath.moveTo(onePoint.x, , onePoint.yonePoint.y););path.lineTo(twoPoint.xpath.lineTo(twoPoint.x, , twoPoint.ytwoPoint.y););path.lineTo(threePoint.xpath.lineTo(threePoint.x, , threePoint.ythreePoint.y););path.lineTo(onePoint.xpath.lineTo(onePoint.x, , onePoint.yonePoint.y););canvas.drawPath(pathcanvas.drawPath(path, paint);, paint);

}}}}

};};mapView.getOverlays().add(polygonmapView.getOverlays().add(polygon););

ポリゴンを描画ポリゴンを描画(2/2)(2/2)

nn ソースコードソースコードnn http://gist.github.com/635949http://gist.github.com/635949

nn サンプル画像（マピオンサンプル画像（マピオン / / グーグル）グーグル）

アイコンを描画アイコンを描画(1/2)(1/2)

nn ItemizedOverlayItemizedOverlayの拡張で実現。の拡張で実現。

アイコンを描画アイコンを描画(2/2)(2/2)

nn ソースコードソースコードnn http://gist.github.com/635958http://gist.github.com/635958

nn サンプル画像（マピオンサンプル画像（マピオン / / グーグル）グーグル）

回転回転(1/2)(1/2)

mapView.setRotation(mapView.setRotation(truetrue););mapView.setDegrees(45.0f); // mapView.setDegrees(45.0f); // 角度角度

回転回転(2/2)(2/2)

nn ソースコードソースコードnn http://gist.github.com/635978http://gist.github.com/635978

nn サンプル画像サンプル画像

タップ移動＆タップ移動＆RRジオコーダジオコーダ(1/2)(1/2)

@Override@Overridepublicpublic booleanboolean onSingleTapUp(MotionEventonSingleTapUp(MotionEvent e) {e) {GeoPointGeoPoint temp = temp = mapView.getProjectionmapView.getProjection()()..fromPixelsfromPixels((((intint) ) e.getXe.getX(),(),((intint) ) e.getYe.getY()()

););

mapView.getController().animateTo(tempmapView.getController().animateTo(temp););

returnreturn falsefalse;;}}

タップ移動＆タップ移動＆RRジオコーダジオコーダ(2/2)(2/2)

nn ソースコードソースコードnn http://gist.github.com/633865http://gist.github.com/633865

nn サンプル画像（マピオンサンプル画像（マピオン / / グーグル）グーグル）

地図画像切り替え地図画像切り替え(1/2)(1/2)

nn オフィシャルと同じ画像オフィシャルと同じ画像nn mapView.changeMap(MapView.STANDARDmapView.changeMap(MapView.STANDARD););

nn 軽い画像（デフォルト）軽い画像（デフォルト）nn mapView.changeMap(MapView.LIGHTmapView.changeMap(MapView.LIGHT););

地図画像切り替え地図画像切り替え(2/2)(2/2)

nn ソースコードソースコードnn http://gist.github.com/648611http://gist.github.com/648611

nn サンプル画像サンプル画像

TipsTips

nn 世界測地系⇔日本測地系世界測地系⇔日本測地系 変換方法変換方法GeoPointGeoPoint tkytky = = Map.wgsToTkyMap.wgsToTky((new GeoPoint(35500000, 139500000)new GeoPoint(35500000, 139500000)

););GeoPointGeoPoint wgswgs = = Map.tkyToWgs(tkyMap.tkyToWgs(tky););

nn 縮尺の数縮尺の数nn 現状現状1010（（11～～1010）、そのうち増やす予定）、そのうち増やす予定

nn MaxMaxの縮尺レベルはの縮尺レベルはMapView#MapView#getMaxZoomLevelgetMaxZoomLevelで取得可能で取得可能

以上を踏まえて以上を踏まえて

nn 普通に普通にGoogle MapsGoogle Mapsを使えばいいのでは？を使えばいいのでは？

売り売り

nn 導入が楽（キー取得簡単）導入が楽（キー取得簡単）

nn 回転（回転（Google MapsGoogle Mapsも改造すればできる）も改造すればできる）

nn 組込み組込みAndroidAndroidでも使えるでも使える

nn なによりマピオンの地図！なによりマピオンの地図！

nn デイリー更新デイリー更新

nn デザインチームの熱意デザインチームの熱意

nn マピオン賞が取れるかもマピオン賞が取れるかも

使いどころ使いどころ

nn 地図メインのアプリ地図メインのアプリ

nn 地図上にルートを引く地図上にルートを引く

nn 地名を地名をVOCALOIDVOCALOIDを通して音声にするを通して音声にする

nn 地図メインでなくてもエッセンスとして地図メインでなくてもエッセンスとして

nn はてなココのようなアプリの地図面としてはてなココのようなアプリの地図面として

nn GeoGeo暗黙インテントアプリ暗黙インテントアプリ

nn GeoGeoインテントを受け付けるアプリインテントを受け付けるアプリ

使用例使用例

nn マピオンマップマピオンマップ

nn 地図ロイド地図ロイド

最後に最後に

nn Android Maps API Android Maps API は・・・は・・・

nn 成長段階成長段階

nn 今後の課題今後の課題

nn キャッシュ機能追加キャッシュ機能追加

nn AndroidAndroidに最適化した地図画像に最適化した地図画像

nn 注記が大きい地図画像選べたり注記が大きい地図画像選べたり

nn サイズ変更したり（サイズ変更したり（256x256 256x256 →→ 128x128128x128））