Rails+Vueで「leaflet」を使おうとしたら、表示がおかしい?

JavaScript
この記事は約3分で読めます。

みなさんこんにちは!

イザナギです。

前回から引き続き、Rails・Vueを用いて何かしらのサービスを作ろうとして頑張ってます!

使用するツールとしては、

  • docker
  • Rails
  • Vue.js

で作成しています。

環境設定はバッチリ整い、いざ何を作ろうか考えた時に「leaflet」というサービスを見つけました。

無料で地図が使えるので「おっ!これ便利じゃん!」と思い早速実装し始めました。

しかし、結果からいうとうまく起動しませんでした。

今回はそれについて記事にしていきたいと思います。

「leaflet」とは?

ちなみにみなさんは「leaflet」についてご存知ですか?

簡単にいうと、無料の地図ライブラリです。

https://leafletjs.com/

JavaScriptのライブラリであり、CDN版・ダウンロード版があります。

カスタマイズ性がすごいらしいので、今回利用することにしました。

今回の実装方法は?

今回はVueによる実装がしたかったので、yarn installによってleafletをインストールしました。

(今考えるとVueで実装しようとしたのが間違いだったかもしれません。)

実装は、Qiitaなどに記載している方法で試しました。

https://qiita.com/Satachito/items/929a63e9b266f6db7958 など

しかし、画面に地図が出てきませんでした。

Chromeの検証機能で、調べてみたところ、画像はダウンロードできてはいるが CCSで表示されないようにされていました。

なので、表示できるようにCSSを変更したところ地図が表示できました!

よかった!と思いきや、動作がおかしくなっていました。

地図をスクロールしてもマップが変わらないのです!

これでは、静止画としてはいいかもしれませんが、動かしたいときには利用できませんよね。

なので、別の方法を取ってみることにしました。

vue2-leafletをインストール

先ほどのleafletをインストールしたまま、「vue2-leaflet」をインストールしてまた表示させようとしました。

しかし、さっきと同じ現象が起きてしまいました。

原因は何か?

これがなぜか調べてみるとこんな記事を見つけました。

Leaflet with Rails 6 default config · Issue #6837 · Leaflet/Leaflet
I have a Rails 6 project using webpacker with the default config. I've got a couple of problems. First of all when compiling the css with webpack applicatio...

without using any frameworks」と書いてあり、もしや他のフレームワーク(Rails)を使用しているときは使えないのでは?と感じました。

確かに、Nuxt.jsで利用したら正常に地図が出ました

また、Railsの方でleafletを利用しなかったからということも考えられます。

GitHub - axyjo/leaflet-rails: This gem provides the leaflet.js map display library for your Rails 5 application.
This gem provides the leaflet.js map display library for your Rails 5 application. - GitHub - axyjo/leaflet-rails: This gem provides the leaflet.js map display ...

Rubyには上記のようなleaflet用のgemもあるので、こちらを利用すれば表示できたのではないかと今更ながら考えております。

まとめ

今回は地図を無料で表示できるライブラリ「leaflet」をRailsとVueを組み合わせて、使った時のことについて書いてきました。

現在ではRailsを外してNuxt.jsで開発し、必要に応じてRailsをAPIとして利用しようかなと考えております。

その過程で、「leaflet」を利用していますが、現在のところでは問題なく使えています。

やはり、Railsとの間で何らかのエラーが起きていたのかもしれませんね

また、何かありましたら記事を更新していきたいと思います。

今回はここで筆を置かせていただきます。

最後まで、記事をご覧懐きありがとうございました!

コメント

タイトルとURLをコピーしました