ti.map をちょっとだけ便利にしちゃう改造

はじめに

iOS 用 ti.map モジュールの記事になります。Android な方はごめんなさい。

さて、この記事は ti.map モジュールの基本的な使い方ではなく、Objective-C では存在する機能を有効化するために、ちょっとだけ改造したものの解説になります。

ti.map Gesture Recognizer fork

https://github.com/k0sukey/ti.map/tree/GestureRecognizer

ti.map モジュールへタッチ系イベントを追加するフォークになります。よくある地図をタップした地点にアノテーションを追加したいときなどに使えるかと思います。また、ti.map には pitchEnabled と rotateEnabled はあるのですが、なぜか zoomEnabled が存在しません。地図をピンチで拡大縮小するのを許可するかしないか、ですね。このメソッドも追加してあります。

使い方

var Map = require('ti.map'),
	map = Map.createView({
		top: 0,
		right: 0,
		bottom: 0,
		left: 0,
		width: Ti.UI.FILL,
		height: Ti.UI.FILL
	});

map.addEventListener('click', function(e){
	// e.x, e.y, e.latitude, e.longitude
});

map.addEventListener('touchstart', function(e){
	// e.x, e.y, e.latitude, e.longitude
});

map.addEventListener('touchmove', function(e){
	// e.x, e.y, e.latitude, e.longitude
});

map.addEventListener('touchend', function(e){
	// e.x, e.y, e.latitude, e.longitude
});

コールバックでイベントが発火した地点の経度緯度、ビュー自体の xy 座標が返却されます。

ti.map MKDirections fork

https://github.com/k0sukey/ti.map/tree/MKDirections

ti.map モジュールへ MKDirections を追加するフォークになります。MKDirections は Apple のサーバへ問い合わせをして、2地点間のルートを検索してくれます。

使い方

var Map = require('ti.map'),
	map = Map.createView({
		top: 0,
		right: 0,
		bottom: 0,
		left: 0,
		width: Ti.UI.FILL,
		height: Ti.UI.FILL
	}),
	directions = Map.createDirections({
		source: { // 六本木
			latitude: 35.665213,
			longitude: 139.730011
		},
		destination: { // 渋谷
			latitude: 35.658987,
			longitude: 139.702776
		}
	});

directions.addEventListener('success', function(e){
	// e.routes
	var route = Map.createRoute({
		points: e.routes[0].route
	});
	map.addRoute(route);
});

directions.addEventListener('error', function(){
	alert('oops!');
});

コールバックの返却値には Map.route でそのまま使えるオブジェクトが配列で格納されています。また、経路案内とその区間の距離（メートル）も格納されていますので、そのままナビアプリとして利用することができますね。

おまけで、該当ルートが表示している地図へちょうど収まるサンプルコードもどうぞ。

var points = e.routes[0].route,
	maxLat, maxLng, minLat, minLng;

for (var i = 0; i < points.length; i++) {
	maxLat = maxLat ? Math.max(points[i].latitude, maxLat) : points[i].latitude;
	maxLng = maxLng ? Math.max(points[i].longitude, maxLng) : points[i].longitude;
	minLat = minLat ? Math.min(points[i].latitude, minLat) : points[i].latitude;
	minLng = minLng ? Math.min(points[i].longitude, minLng) : points[i].longitude;
}

map.applyProperties({
	region: {
		latitude: (maxLat + minLat) / 2,
		longitude: (maxLng + minLng) / 2,
		latitudeDelta: (maxLat - minLat) * 1.1, // マージン付き
		longitudeDelta: (maxLng - minLng) * 1.1 // マージン付き
	}
});

最後に

八木さんのTitaniumとPubNubでリアルタイムサービスと組み合わせると、みんなで集合しながらメッセージが送り合えるアプリが作れちゃいそうですね！これを書いていてちょっと作ってみたくなっちゃいました。冬休みの宿題にしようかな？

さて、明日は八木さんの「Firebaseを使ってリアルタイムサービス」になります。楽しみですね！