RailsでOpenStreetMapを使ってみる
概要
Railsで地点を登録する時、緯度経度を入力させるのはUX的にもどうかと思う。 そこで、マップから地点を登録することができればイイ感じになりそう。 しかし、Google Mapでは、API制限などがあるため、今後、利用者が増大した時めんどくさいことになる。 だったら、無料で使える地図を使えばいいじゃんとなるので、今回はOpenStreetMapを使って実装してみる。
- 作者: すがわらまさのり,前島真一,近藤宇智朗,橋立友宏
- 出版社/メーカー: 技術評論社
- 発売日: 2014/06/06
- メディア: 大型本
- この商品を含むブログ (8件) を見る
実装
今回は登録画面で地図を表示し、クリックした地点にマーカーを立てて、緯度経度を取得する。
事前準備
- scaffoldで簡単に登録画面等を準備する。モデル生成時に緯度経度を忘れないようにする。
- rails sでサーバーが起動できていることを確認する。
- leaflet - Downloadから安定版をダウンロードする。
本編
上記のサイトからダウンロードしたものを下記のディレクトリに移動する。 - leaflet.js => /vendor/assets/javascripts - leaflet.css => /vendor/assets/stylesheets - Imageについては/vendor/assets/にimagesディレクトリを作成し、中身を移動する。
スクリプトファイルとスタイルシートの読み込み
//= require jquery //= require jquery_ujs # 以下を追加 //= require leaflet
*= require_self # 以下を追加 *= require leaflet *= require_tree .
地図を表示する
<div id="map"></div> <style type="text/css"> #map { height:400px; } </style> <script type="text/javascript"> L.Icon.Default.imagePath = "/assets"; var map = L.map('map').setView([39.099388, 141.079960],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); </script>
ここまで、終わったら実際に登録画面で地図が表示されるか確認する。 まだ、マーカーを立てることや緯度経度の取得はできない。
クリックした地点にマーカを設置&緯度経度の取得
続きに入力していく
var marker = L.marker([39.099388, 141.079960]).addTo(map); map.on("click",function(e){ marker.setLatLng(e.latlng); $('#map_latitude').val(e.latlng.lat); $('#map_longitude').val(e.latlng.lng); });
このとき、フォーム中に緯度経度表示欄があり、表示させたい場合は、フォームにidを設定する必要がある。 下記は例であるが、:id =>‘id名 'でidを割り振ることができる。
<div class="field"> <%= f.label :latitude %><br> <%= f.text_field :latitude, :id => 'map_latitude'%> </div> <div class="field"> <%= f.label :longitude %><br> <%= f.text_field :longitude, :id => 'map_longitude'%> </div>
まとめ
いろいろ怪しい部分はありますが、今回はとりあえずこの辺で