Rails6でMapboxを導入する #Ruby

はじめに

最近railsでMapboxを使った地図アプリをつくる機会があったので、はじめの導入部分を共有します。

開発環境

rails 6.0.2
ruby 2.6.5

最低限のセットアップ

※必要に応じてファイル名等変えてください

rails new アプリ名 -d postgresql

yarn add mapbox

yarn add mapbox-gl

yarn add dotenv

rails db:create

rails g controller maps

Apiキーの取得

以下のサイトでアカウントを取得し、Apiキーを取得します。
Mapbox

.envファイルの作成

.envファイルを作成し、Apiキーを記します。（これは架空キーです）

.env

MAPBOX_API_KEY=pk.eyK6PjoiZnVqaW8iLCJhIjoiP2szcGJ5MDFkMDFzazNlbGZzZ2ozbzhyMCJ9._IgaTSsbe6sdkLQeeqJRahw

.gitignoreに.envを書きます。

.gitignore

(省略）
.env

コードの記述

app>views>layouts

地図読み込みのための記述をします。

application.html.erb

<head>
  (省略)
  <%= stylesheet_link_tag    'application', media: 'all'%>
  <%= stylesheet_pack_tag 'application', media: 'all' %>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
　<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js">　　</script>
　<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" /></script>
</head>
<body>
  (省略）
  <%= javascript_include_tag 'application' %>
  <%= javascript_pack_tag 'application' %>
</body>

地図を反映させるためのdivを用意します。

app>views>maps

index.html.erb

<div class="container">
  <div id='map' class='target'>
    <p>私の地図</p>
  </div>
</div>

packsディレクトリにjsを記述していきます。

app>javascript>packs>plugins

map.js

import mapboxgl from 'mapbox-gl';

const showMap = () => {
  const map_div = document.getElementById('map');
  if (map_div) {
    mapboxgl.accessToken = process.env.MAPBOX_API_KEY
      window.map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
      });      
    }
  };

export { showMap }

app>javascript>packs

application.js


import 'mapbox-gl/dist/mapbox-gl.css';
import { showMap } from './plugins/map';
showMap();

root画面を設定します。def indexをmapsコントローラに書きます（説明のための便宜上）

config

routes.rb

Rails.application.routes.draw do
  root to: 'maps#index'
end

app>controllers

maps_controller.rb

class MapsController < ApplicationController
  def index; end
end

assetsディレクトリに追記します。

app>assets>config

manifest.js

(省略)
//= link_directory ../javascripts .js

app>assets>javascripts

applicaton.js

//= require rails-ujs
//= require_tree .

stylesheetsの記述です

app>assets>stylesheets>components

maps.scss

#map {
  list-style: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
}

body p {
  font-size: 20px;
}

app>assets>stylesheets (application.cssを書きかえ)

applicaton.scss

@import 'components/maps';

webpackディレクトリの設定をします

config>webpack

environment.js

(省略)
environment.loaders.delete('nodeModules');

const webpack = require('webpack')
const dotenv = require('dotenv')
const dotenvFiles = [
  `.env.${process.env.NODE_ENV}.local`,
  '.env.local',
  `.env.${process.env.NODE_ENV}`,
  '.env'
]
dotenvFiles.forEach((dotenvFile) => {
  dotenv.config({ path: dotenvFile, silent: true })
})

environment.plugins.prepend('Environment',
  new webpack.EnvironmentPlugin(
    JSON.parse(JSON.stringify(process.env))
  )
)
(省略)

ここまでの出力です

世界地図が現れました。

地図をアレンジします

-　衛星写真に変え、東京駅に中心を合わせ、地図を拡大してみます。
地図属性をURLで指定し、centerにcenter_pointという変数で座標を設定、zoomの値をあげて地図を拡大させます。

app>javascript>packs>plugins

map.js

(省略）
  if (map_div) {
    mapboxgl.accessToken = process.env.MAPBOX_API_KEY
    var center_point = [139.767125, 35.681236]
    window.map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/satellite-v9',
      center: center_point,
      zoom: 13
    });
（省略）

ここまでの出力です

地図上にマーカーを打ち、ポップアップを加え、少し拡大します（マーク場所は東京ステーションホテル）

map.js

（省略)
　　mapboxgl.accessToken = process.env.MAPBOX_API_KEY
    var center_point = [139.767125, 35.681236]
      window.map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/satellite-v9',
        center: center_point,
        zoom: 17
      });
      var marker = new mapboxgl.Marker()
      var hotel_point = [139.76595173, 35.68089883]

      var popup = new mapboxgl.Popup({ offset: 25 }).setHTML(
        '<strong>東京ステーションホテル</strong><p>国指定重要文化財である
         東京駅・丸の内駅舎の中に位置する<a href="https://www.tokyostationhotel.jp/"
         target="_blank" title="Opens in a new window">ステーションホテル</a>は、
         100年以上の歴史を誇る唯一無二の名門ホテルです</p>'
        );

      new mapboxgl.Marker(marker)
      .setLngLat(hotel_point)
      .setPopup(popup)
      .addTo(map);
（省略）

ここまでの出力です

その他のアレンジ

その他多くのカスタマイズができます。
以下のサイトでサンプルコードを見ることができます。
Mapbox

最後に

Rails6で実装しましたが、Rails5以下で実装する場合は'webpacker'が必要です。
最後まで読んでいただきありがとうございました。