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

はじめに

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を使ってリアルタイムサービス」になります。楽しみですね！