前回は、Ruby On Rails上でLeafletを使ってOpenStreetMapを表示する方法について説明しました。
今回は、表示した地図上にマーカーを立てる方法について説明します。

動作環境

  • OS: Ubuntu Server16.04
  • Ruby On Railsバージョン: 5.0.2
  • Rubyバージョン: 2.4.0
  • leafletバージョン: 1.0.3

事前準備

Ruby On Rails上でLeafletが使えること
まだ設定していない場合、前回の記事を参照して設定してください。

Ruby On Railsの設定

緯度経度とタイトルを格納するモデルをscaffoldで作成します。

  1. scaffoldでモデル・ビュー・コントローラーを作成
    $ rails g scaffold marker title:string lat:float lng:float
    
  2. DBにテーブルを作成
    $ rake db:migrate
    
  3. 確認

    次のURLにアクセスして、東京駅の緯度経度を入力してみましょう。
    http://[RailsサーバーのURL]/marker/new

    マーカー登録画面

    登録が成功すると以下のような画面が表示されます。

    マーカー用データ登録完了

次に、このページに地図を表示させて、登録した地点にマーカーを表示させます。

leafletで地図上にマーカーを表示する

  1. app/views/markers/show.html.erbを編集して、地図を表示します。
    登録したマーカーの緯度経度が地図の中心になるよう設定します。

    
    
    
    

    <%= notice %>

    Title: <%= @marker.title %> Lat: <%= @marker.lat %> Lng: <%= @marker.lng %>
    <%= link_to 'Edit', edit_marker_path(@marker) %> | <%= link_to 'Back', markers_path %>
  2. マーカー画像の指定

    以下のようにマーカー画像へのパスを設定します。
    以前の記事のように、leafletのマーカー用の画像などを、public/images/leafletに保存した例を記載します。

    var myIcon = L.icon({
        iconUrl: '/images/leaflet/marker-icon.png', //画像へのパス
        shadowUrl: '/images/leaflet/marker-shadow.png', //画像へのパス
        popupAnchor: [11, -5], //ポップアップ位置の微調整
    });
    
  3. マーカーの表示

    以下のように座標を指定してマーカーを立てます。

    L.marker([<%= @marker.lat %>, <%= @marker.lng %>], {icon: myIcon}).addTo(map) //マーカーを表示
        .bindPopup('<%= @marker.title %>') //マーカーのタイトルを表示
        .openPopup();
    

サンプルプログラム

最終的にプログラムは以下のようになります。



<%= notice %>

Title: <%= @marker.title %> Lat: <%= @marker.lat %> Lng: <%= @marker.lng %>
<%= link_to 'Edit', edit_marker_path(@marker) %> | <%= link_to 'Back', markers_path %>

地図の確認

マーカー登録後の画面に、以下のように地図とマーカーが表示されれば正しく設定されています。

URL例) http://[サーバーURL]/markers/show/1

マーカー表示確認

まとめ

Ruby On Rails上でDBに登録された緯度経度から地図上にマーカーを表示させる方法について説明しました。
次回は、緯度経度を登録しなくてもいいように、地名からジオコーディングして、緯度経度を取得する処理を実装します。