今回は、Ruby On Rails上でLeafletを導入して、OpenStreetMapを表示する方法について説明します。
以下、作成する地図ページの画面サンプルです。

OpenStreetMap地図表示サンプル

動作環境

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

Leafletとは

ブラウザ上で地図を表示するためのオープンソースのJavaScriptライブラリです。
モバイルにもデスクトップにも対応し、現在広く使われています。
公式ページはこちら

事前準備

Ruby On Railsのインストールと、Leafletをダウンロードします。

Ruby On Railsのインストール

まだインストールしていない場合は、こちらを参照して、Ruby On Railsをインストールしてください。

Leafletのダウンロード

こちらから、Leafletをダウンロードします。
Stable Versionで問題ありません。2017年3月17日時点で、Stable Versionは”Leaflet 1.0.3″でした。

ダウンロードしたファイルを/tmpに解凍します。

$ mkdir /tmp/leaflet
$ unzip leaflet.zip -d /tmp/leaflet/

リーフレットのフォルダ構成は以下のとおりです。
Railsのプロジェクトフォルダを作成後、所定の箇所に移動します。

├── leaflet
│   ├── images  //leafletで使うマーカー用イメージなど
│   │   ├── layers-2x.png
│   │   ├── layers.png
│   │   ├── marker-icon-2x.png
│   │   ├── marker-icon.png
│   │   └── marker-shadow.png
│   ├── leaflet-src.js  //leafletのソース
│   ├── leaflet-src.map
│   ├── leaflet.css  //leafletのスタイルシート本体
│   └── leaflet.js   //leafletのjs本体

Leafletの適用手順

プロジェクトを作成してから、地図を表示するまでの流れを説明します。

  1. プロジェクトを作成します
    $ rails new osm_demo
    $ cd osm_demo
    
  2. ダウンロードしたLeafletのファイルをRailsのプロジェクトフォルダに移動します
    $ cp -p /tmp/leaflet/leaflet.js app/assets/javascripts/
    $ cp -p /tmp/leaflet/leaflet.css app/assets/stylesheets/
    $ mkdir -p public/images/
    $ cp -rp /tmp/leaflet/images public/images/leaflet
    

以上で、OSMを使う準備は完了です。
次章で、試しに地図を表示してみます。

OSMの地図を表示する

  1. 地図を表示する用のビューとコントローラーを作成します。
    $ rails g controller Map show
    
  2. ビューファイルを編集します。
    
    
    

    OSMを表示しよう

    OSMの表示テストです

地図の確認

“http://[サーバーURL]/map/show”にアクセスします。
以下の画像のように地図が表示されていれば、正しく設定されています。

OpenStreetMap地図表示サンプル

まとめ

Ruby On Rails上でOSMを使う最低限の設定について説明しました。
OSMは利用者も多く、今後メジャーになっていく可能性が大きいので、ぜひ試してみてください。