概要
Railsで地点を登録する時、緯度経度を入力させるのはUX的にもどうかと思う。
そこで、マップから地点を登録することができればイイ感じになりそう。
今回はOpenStreetMapを使って実装してみる。
実装
今回は登録画面で地図を表示し、クリックした地点にマーカーを立てて、緯度経度を取得する。
事前準備
- scaffoldで簡単に登録画面等を準備する。モデル生成時に緯度経度を忘れないようにする。
- rails sでサーバーが起動できていることを確認する。
- leaflet - Downloadから安定版をダウンロードする。
本編
上記のサイトからダウンロードしたものを下記のディレクトリに移動する。
- leaflet.js => /vendor/assets/javascripts
- leaflet.css => /vendor/assets/stylesheets
- Imageについては/vendor/assets/にimagesディレクトリを作成し、中身を移動する。
スクリプトファイルとスタイルシートの読み込み
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
# 以下を追加
//= require leaflet
app/assets/stylesheets/application.css
*= require_self
# 以下を追加
*= require leaflet
*= require_tree .
地図を表示する
app/views/maps/_form.html.erb
<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([緯度, 経度],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>
ここまで、終わったら実際に登録画面で地図が表示されるか確認する。
まだ、マーカーを立てることや緯度経度の取得はできない。
クリックした地点にマーカを設置＆緯度経度の取得
続きに入力していく
app/views/maps/_form.html.erb
var marker = L.marker([緯度, 経度]).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>
Google Mapもいいけど、たまにはOSMでもいいじゃないかという記事でした