CompeGPS Landのインストール
CompeGPS Landを使ってTwoNavで使う地図データを作成する方法をまとめてみます。
まずは、Landのインストールから。
30日間無料で試用できます。
Windows 7 Land 7.7.0
2. インストール
ダウンロードしたファイルを開くとインストールが始まります。
この時、言語はEnglishを選択します。
日本語も選択できるけど、日本語化が不完全で使えない機能があるので。
3. 起動できない
起動しようとするとエラーが出て強制終了されます。(version 7.7.0)
4. 原因のファイルを削除
C:/Program Files(x86)/CompeGPS/plugins/Kompass/CompePlugIn_Kompass.dll
を削除します。
5. アクティベート
起動できたら、Free Activationを選択して適当にユーザ登録します。
パスワードは6文字以上でないと始めから入力し直しになるので注意...。
6. インストール完了
航跡を可視化
航跡を可視化するwebアプリを作りました。
GPX view
http://tattii.github.io/map/gpxview/
普段気球に乗ったときに航跡を記録してGoogle Earthで確認したりしてるけど、もっと気軽に航跡を見る方法があればいいなと思って作りました。
必要と思った機能は、
- 航跡を高度で色付けして表示
- 高度、速度のグラフ
- いくつかの統計情報
です。
使ったもの
GPXファイルにしか対応していないけど、気球とか飛行機とか、3次元に移動する航跡に最適です。
Yahoo!でインターン
2014年8月25日〜9月5日の2週間、Yahoo!の名古屋オフィスでインターンしてた。
「マルチビックデータを学ぶ」の中の「地図・位置情報サービス」というコース
地図・位置情報サービス
【概要】
スマートフォンの普及により地図・位置情報サービスはユーザーに一層身近なものになりました。それに伴い、より迅速で「ユーザーファースト」なサービス改善や、これまでにない新しい地図・位置情報サービスが求められています。本プログラムでは、Yahoo! JAPANが保有するビッグデータを活用することで、地図・位置情報サービスのユーザーをより良く知ることから始まり、サービス改善、そしてより便利な新しいサービスの企画などを体験できます。
【特徴】
Yahoo! JAPANの地図サービスの企画・開発に触れられる
名古屋オフィス勤務の地図サービス担当エンジニアと触れ合い、実際の企画や開発についてコミュニケーションを図れます。
大規模なデータに触れられる
Yahoo! JAPANが持つ大規模アクセスデータを存分に利用できます。これらの実データを分析することで、サービスの使われ方、サービスの課題を発見するなど、リアリティーのある業務経験を積むことができます。また、膨大な地図データ、位置情報データがどのように処理されているのかも理解できます。
具体的なプログラム例を一部紹介
- 地図サービスの各プロジェクト紹介
- これまでに得られた具体的なデータ分析結果の説明
- 地図画像の3D化
- 航空写真の画像処理
- Wi-Fi屋内測位技術の精度向上
http://hr.yahoo.co.jp/internship/bigdata/mbd07/
具体的な内容は書けないけど、Yahoo地図のことをたくさん教えてもらい、いろいろな人に出会えて、楽しい2週間でした!
カルトグラムをつくる
1. カルトグラム Cartogram とは
『統計データに基づき地図を変形し,地域の特徴を視覚的に表現する地図』
- 面積カルトグラム
- 距離カルトグラム
2種類のカルトグラムがある。
今回は、面積カルトグラムを作成する。
面積カルトグラムとは、面積によってデータを可視化する地図。
3. Sample
d3.json("/map/geodata/japan_prefecture_noisland.topojson", function (data) { var topology = data; var geometries = topology.objects.ken.geometries; // データを設定 carto.value(function (d) { return pref_data[ d.properties["JIS-CODE"]-1 ]; }); // カルトグラム計算 var features = carto(topology, geometries).features; // 描画 map = map.data(features) .enter() .append("path") .attr("fill", function(d) { return color( pref_data[ d.properties["JIS-CODE"]-1 ] ); }) .attr({ stroke: "#fff", "stroke-width": 1 }) .attr("d", carto.path); }); // 2013 みかん収穫量 (農林水産省) // http://www.e-stat.go.jp/SG1/estat/Xlsdl.do?sinfid=000024947688 var pref_data = [ 1000,1000,1000,1000,1000,1000,1000,1000,1000,1000, 1000,1440,1000,24600,1000,1000,1000,1000,1000,1000, 1000,121800,28200,22000,10000,1000,14200,2460,1000,168900, 1000,1000,1000,42300,12700,13900,15900,137800,7340,26500, 53000,60900,91600,16200,13000,15700,1000 ];
Heatmapをつくる
heatmap.js | Create HTML5 Heatmaps with Canvas and JavaScript
を使ってヒートマップを作る方法。
今回は、Leafletを使って表示した地図上にヒートマップをオーバーレイする。
実はこのExampleのままでは動かない。
heatmap.js | Examples: Leaflet Heatmap Layer
1. 必要なファイルの読み込み
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet-src.js"></script> <script src="/lib/heatmap/QuadTree.js"></script> <script src="/lib/heatmap/heatmap.js"></script> <script src="/lib/heatmap/heatmap-leaflet.js"></script>
2. 地図の読み込み
Leafletで地図を読み込む。
var mapboxTiles = L.tileLayer( 'https://{s}.tiles.mapbox.com/v3/' + map_id + '/{z}/{x}/{y}.png', { attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Mapbox</a>' } );
3. データの準備
ヒートマップにする点の座標と値を用意する。
var data = [ {lat: 35.006, lon: 135.769, value: 2}, {lat: 34.550, lon: 130.233, value: 1} ]
4. Heatmapの作成
var heatmapLayer = L.TileLayer.heatMap({ radius: { value: 10, absolute: false }, opacity: 0.8, }); heatmapLayer.setData(data);
Option
ドキュメント、Exampleとは違うので注意。
1つの点の大きさを指定する。
radius: { value: 10, absolute: false } radius: { value: 15000, absolute: true }
absolute: falseにするとピクセル単位での指定になり、zoomが変化しても一定の大きさ(px)で表示される。
absolute: trueにするとメートル単位での指定になり、zoomが変化しても一定の大きさ(m)で表示される。
- opacity
透明度。
- gradient
グラデーション。defaultは青→赤の一般的なヒートマップのグラデーション。
5. 表示
地図にヒートマップをオーバレイさせて完成。
var map = new L.Map('map', { center: [38.23, 138.933], zoom: 6, layers: [mapboxTiles, heatmapLayer], });
Example -> Foursquare - Heatmap
6. Retinaディスプレイへの対応
このままではiPhoneなどのRetinaディスプレイで表示すると少しぼやけてしまう。
Retinaの解像度に合わせるには2倍の大きさで描画して、cssで半分にする操作が必要。
Heatmap.jsで対応するには直接ライブラリを編集しないといけない。一応対応できたが、まだ理解できているか分からないので。。。
Foursquare Heatmap
Foursquare Heatmapを公開しました。
http://azuresky.fam.cx/foursquare/heatmap/
Foursquareのチェックイン履歴をヒートマップにして可視化します。
自分が今までにどんな場所に行ったのかが分かって楽しいです。
Foursquareのアカウントを持っている人は是非一度試してみて下さい。
Retinaディスプレイにも対応しています。
heatmap.js | Create HTML5 Heatmaps with Canvas and JavaScriptを使用して作成しました。
Foursquare APIで履歴を取得する
Foursquareで履歴を取得する方法をまとめる。
1. Venue History
users/USER_ID/venuehistory | API Endpoints
https://api.foursquare.com/v2/users/self/venuehistory
取得できるデータは、チェックインしたことのあるVenueのリスト(チェックイン回数、Venueの詳細)のみ。
簡単にすべてのチェックインしたVenueが取得でき、Venueごとに整理されている。
example
2. Checkins
users/USER_ID/checkins | API Endpoints
https://api.foursquare.com/v2/users/self/checkins
取得できるデータは、チェックインのリスト(チェックイン日時、Venueの詳細)。
上限は250件で、すべての履歴を取得するためには数回のリクエストを送信しないといけない。