RailsでOpenStreetMapを使ってみる

概要

Railsで地点を登録する時、緯度経度を入力させるのはUX的にもどうかと思う。 そこで、マップから地点を登録することができればイイ感じになりそう。 しかし、Google Mapでは、API制限などがあるため、今後、利用者が増大した時めんどくさいことになる。 だったら、無料で使える地図を使えばいいじゃんとなるので、今回はOpenStreetMapを使って実装してみる。

パーフェクト Ruby on Rails

実装

今回は登録画面で地図を表示し、クリックした地点にマーカーを立てて、緯度経度を取得する。

事前準備

• 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>

まとめ

いろいろ怪しい部分はありますが、今回はとりあえずこの辺で

参考サイト

• OSMを使ったスマホ＆Web開発入門 - SlideShare