OSMを使ったスマホ&Web開発入門

OSMを使ったスマホ&Web
開発入門
Taro Matsuzawa aka. btm
Georepublic Japan
@smellman / id:smellman

13年2月25日月曜日

はじめに
この資料はハンズオンとして利用できるように作成
をしています。snippetも公開していますので、必要
に応じてコピペしてください。

https://hackpad.com/OSMJa-handon-gc49hgxnw3g
コードはいつかgithubにアップします

https://github.com/smellman


アジェンダ

自己紹介

Ruby on Rails+Leaﬂet.js
Android+osmdroid


自己紹介

もじら組元組長

Firefox Hacks Rebooted、Firefox 3 Hacks(オライリ
ー・ジャパン)著者の一人

日本UNIXユーザ会幹事

破滅


職歴（正社員）

株式会社アーツテック
プログラマ＆インフラ
株式会社KBMJ(現:株式会社アピリッツ)
プログラマ＆インフラ
オープンソースECパッケージエレコマ担当
OSCでもブース出してるよ！


現在

地理情報系エンジニア見習い

レベルとしてはたまねぎ剣士みたい


OSMでお仕事

伊豆大島ジオパーク・データミュージアム

http://oshima-gdm.jp
Localwiki(http://localwiki.org)をカスタマイズ

標準のCloudmadeではなくOpenStreetMapを採用

伊豆大島でマッピングパーティーも開催


WebでOpenStreetMap


Webで使う場合

WebでOpenStreetMapを組み込む場合は２つのライブ
ラリが代表的

OpenLayers.js
Leaﬂet.js


OpenLayers.js

2006年に初回リリース

タイルの設定がほとんどってる

でかい！(740KB)


Leaﬂet.js
割と最近

タイルの設定を自分で記述する

openstreetmap.orgで採用

OpenLayers.jsから入れかえしたみたい

軽量(28KB)


今回はLeaﬂet.jsを

Leaﬂet.jsの方がシンプルに使える

案件で使ったことがあるから


RoR+Leaﬂet.js

今回はgem 'leaﬂet-rails'は使わない

よくわからないけどエラーになる

よくわからないけどFolkがありすぎ


必要なもの

ruby(1.9.3推奨)

http://www.ruby-lang.org/ja/downloads/
leaﬂet.js 0.5.1
http://leaﬂetjs.com/download.html


Railsのインストール

$ gem install rails


アプリ作成

$ rails new mapapp
$ cd mapapp/


起動確認

$ bundle exec rails s


haml

$ emacs Gemfile
...
gem 'haml'
gem 'haml-rails'
$ bundle install


haml
$ mv app/views/layouts/application.html.erb app/views/layouts/
application.html.haml
$ emacs app/views/layouts/application.html.haml
!!!
%html
%head
%title Mapapp
= stylesheet_link_tag "application", :media => "all"
= javascript_include_tag "application"
= csrf_meta_tags
%body
= yield


scaffold
$ bundle exec rails generate
scaffold map title:string
latitude:float longitude:float

$ bundle exec rake db:migrate


after scaffold


地図を追加しよう

座標を直接入力するとかダサいし馬鹿にされる

編集画面で地図で選択できるとクールじゃね

詳細画面で地図が出てくるとクールじゃね

一覧画面でポイントの一覧が出てくるとクルーじゃね


leaﬂet.jsを導入
$ cp ~/Downloads/Leaflet/dist/leaflet.js vendor/
assets/javascripts/
$ cp ~/Downloads/Leaflet/dist/leaflet.css vendor/
assets/stylesheets/
$ cp ~/Downloads/Leaflet/dist/leaflet.ie.css
vendor/assets/stylesheets/
$ mkdir vendor/assets/images
$ cp ~/Downloads/Leaflet/dist/images/* vendor/
assets/images/
$ bundle exec rails s


application.js
$ emacs app/assets/javascripts/
application.js
...
//= require jquery
//= require jquery_ujs
//= require leaflet
//= require_tree .


application.css
$ emacs app/assets/stylesheets/
application.css
...
*= require_self
*= require leaflet
*= require_tree .
*/


application.html.haml
$ emacs app/views/layouts/application.html.haml
...
%title Mapapp
= stylesheet_link_tag "application", :media => "all"
/[if lte IE 8]
= stylesheet_link_tag "leaflet.ie"
= javascript_include_tag "application"
= csrf_meta_tags
...


取り込み確認


地図表示
$ emacs app/views/maps/_form.html.haml
...
%div#map
:css
#map { height: 400px; }
:javascript
L.Icon.Default.imagePath = "/assets";
var map = L.map('map').setView([35.64483, 139.40881], 17);
var osmUrl = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
var osmAttrib = "Map data © OpenStreetMap contributors";
L.tileLayer(osmUrl, {
attribution: osmAttrib,
maxZoom: 20,
}).addTo(map);


edit


クリック→座標セット
...(続き)
var marker = L.marker([35.64483,
139.40881]).addTo(map);
map.on("click", function(e) {
marker.setLatLng(e.latlng);
$("#map_latitude").val(e.latlng.lat);
$("#map_longitude").val(e.latlng.lng);
});


デフォルト座標
...
:javascript
var lat = $("#map_latitude").val()? $("#map_latitude").val() : 35.64483;
var lng = $("#map_longitude").val()? $("#map_longitude").val() : 139.40881;
var map = L.map('map').setView([lat, lng], 17);

...

}).addTo(map);
var marker = L.marker([lat, lng]).addTo(map);
map.on("click", function(e) {
...


show
$ emacs app/views/maps/show.html.haml
...
%div#map
:css
#map { height: 400px; }
:javascript
var lat = #{@map.latitude}
var lng = #{@map.longitude}
maxZoom: 20,
}).addTo(map);
var marker = L.marker([lat, lng]).addTo(map);


show


index
$ emacs app/views/maps/index.html.haml
...
var lat = 35.64483;
var lng = 139.40881;
maxZoom: 20,
}).addTo(map);


index
$ emacs app/views/maps/index.html.haml
...
$.ajax({
type: "GET",
url: "/maps.json",
dataType: "json",
success: function(maps) {
for(var i = 0; i < maps.length; i++) {
var m = maps[i];
var marker = L.marker([m.latitude, m.longitude]).addTo(map);
marker.bindPopup(m.title);
}
}
});


index


応用例(localwikiから取得)


AndroidでOSM


Android向けFramework

Mapsforge
オフライン向け

osmdroid


今回はosmdroidを採用

MapViewっぽく使えるらしい

僕はMapView使ったことないけど

時間がなかった

調査開始時刻 2013/02/22 AM2:48


作るアプリ

適当な場所マーカーを置く

マーカーをタップしたらなんか出る

想像力がないです

普通だったらjsonからゲットしてくればいいと思う
よ


アプリの作成

Eclipseでアプリを作成

今回はOSMSampleという名前で


jarをゲット

osmdroid-android-3.0.8.jar
http://code.google.com/p/osmdroid/downloads/list
slf4j-android-1.5.8.jar
http://www.slf4j.org/android/
libs以下にコピーしてプロパティでjarを追加


AndroidManifest.xml
<uses-permission
android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission
android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission
android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission
android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission
android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-feature android:name="android.hardware.location.network" />
<uses-feature android:name="android.hardware.location.gps" />
<uses-feature android:name="android.hardware.wifi" />


MainActivity.java(1)
import org.osmdroid.util.GeoPoint;
import org.osmdroid.views.MapView;
...
public class MainActivity extends Activity {

private MapView mapView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.mapView = new MapView(this, 256);
this.mapView.setClickable(true);
this.mapView.setBuiltInZoomControls(true);
this.mapView.getController().setZoom(17);
this.mapView.getController().setCenter(new GeoPoint(35.64483, 139.40881));
setContentView(mapView);
}


import org.osmdroid.DefaultResourceProxyImpl;
import org.osmdroid.ResourceProxy;
import org.osmdroid.views.overlay.ItemizedIconOverlay;
import org.osmdroid.views.overlay.OverlayItem;
...
private ItemizedIconOverlay<OverlayItem> myLocationOverlay;
... onCreate
GeoPoint overlayPoint = new GeoPoint(35.64483, 139.40881);
ArrayList<OverlayItem> overlays = new ArrayList<OverlayItem>();
overlays.add(new OverlayItem("明星大学", "OSCの会場だよ", overlayPoint));
ResourceProxy resourceProxy = new
DefaultResourceProxyImpl(getApplicationContext());
this.myLocationOverlay = new ItemizedIconOverlay<OverlayItem>(overlays, null,
resourceProxy);
this.mapView.getOverlays().add(this.myLocationOverlay);
this.mapView.invalidate();


@SuppressLint("ShowToast")
public boolean onSingleTapUpHelper(int i,
OverlayItem item) {
StringBuffer bf = new StringBuffer();
bf.append("Tap: ").append(item.mTitle)
.append(":").append(item.mDescription);
Toast.makeText(getApplicationContext(),
bf.toString(), Toast.LENGTH_LONG).show();
return true;
}


OnItemGestureListener<OverlayItem> gesture = new
ItemizedIconOverlay.OnItemGestureListener<OverlayItem>() {
@Override
public boolean onItemLongPress(int arg0, OverlayItem arg1) {
return true;
}
@Override
public boolean onItemSingleTapUp(int arg0, OverlayItem arg1)
{
return onSingleTapUpHelper(arg0, arg1);
}
};
this.myLocationOverlay = new
ItemizedIconOverlay<OverlayItem>(overlays, gesture, resourceProxy);


osmdroidの注意点

配布サイトのwikiの情報が古すぎる

当てにしてはいけない

情報を調べるコツは "osmdroid tutorial"とかで検索

それでもバージョン依存の話があるので注意


おまけ: iOSでOSM


route-me

古くからあるiOS向けSlippy Map

機能はかなり充実してる

iOSでOSM使うならこのライブラリで決まり


OSMを使ったスマホ&Web開発入門

More Related Content

OSMを使ったスマホ&Web開発入門