RailsでOpenStreetMapを扱う

5517 ワード
Rails OpenStreetMap Rails テキストリンク

概要

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でもいいじゃないかという記事でした

参考サイト

iOSフルスクリーンジェスチャー
Springboot thymeleaf統合