Vue.jsで地図画面を実装したくなり、地図を表示できるVue Leafletの使い方について調べたのでまとめました。
Vue Leafletとは、無料で簡単に地図画面を実装できるJavaScriptのライブラリです。
この記事を最後まで読むと、以下のような地図画面を実装できます。
エソラ公式ページよりも、サンプルコード豊富に、間違いやすい点について丁寧に解説するので、最後までお読み下さい。
環境情報については以下の通りです。
| 項目 | ver |
|---|---|
| node.js | v12.13.1 |
| Vue CLI | 3.5.5 |
| vue.js | 2.6.14 |
| vue2-leaflet | 2.7.1 |
Vue Leafletのインストール
Vueプロジェクトの作成
まずは以下のコマンドでVueプロジェクトを作りましょう。
$ vue create vue-leaflet-demoプロジェクト作成時のオプションが出てくると思いますが、defaultで構いません。
もし、コマンドがエラーになった場合、Vue CLIをインストールしていないかも知れません。
その場合は、以下のコマンドで、Vue CLIをインストールしましょう。
$ npm install -g @vue/cliVue Leafletのインストール
次に、Vue Leafletをインストールします。
$ npm install leaflet vue2-leaflet --saveインストールが成功すると、以下のように、「leaflet」、「vue2-leaflet」がpackage.jsonに追加されます。
{
・・・省略・・・
"dependencies": {
"core-js": "^3.8.3",
"leaflet": "^1.8.0",
"vue": "^2.6.14",
"vue2-leaflet": "^2.7.1"
},
・・・省略・・・
}
Vue Leafletの初期設定(シンプルな地図を表示させる)
では、ここからはVue Leafletを利用するための初期設定をして、シンプルな地図を表示させます。
完成形は以下のようになります。
App.vueの修正
地図を表示させるため、App.vueを修正します。
ソースコードは公式ページを参考にしています。
<template>
<l-map style="height: 600px" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-marker :lat-lng="markerLatLng"></l-marker>
</l-map>
</template>
<script>
import { LMap, LTileLayer, LMarker } from "vue2-leaflet";
export default {
components: {
LMap,
LTileLayer,
LMarker,
},
data() {
return {
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
attribution:
'© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
zoom: 15,
center: [51.505, -0.159],
markerLatLng: [51.504, -0.159],
};
},
};
</script>main.jsの修正
main.jsは2点、修正する点があります。
以下のように、main.jsに「leaflet.css」をインポートします。
import Vue from "vue";
import App from "./App.vue";
import "leaflet/dist/leaflet.css"; // ここを忘れると、綺麗な地図が表示されない
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount("#app");
地図にマーカーを表示させるためには、以下の処理を追加する必要があります。
import Vue from "vue";
import App from "./App.vue";
import "leaflet/dist/leaflet.css"; // ここを忘れると、綺麗な地図が表示されない
// 以下の処理を追加しないと、マーカーが表示されない
import { Icon } from "leaflet";
delete Icon.Default.prototype._getIconUrl;
Icon.Default.mergeOptions({
iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
iconUrl: require("leaflet/dist/images/marker-icon.png"),
shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
});
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount("#app");
アプリを起動する
ここまでできたら、アプリを起動しましょう。
package.jsonが存在するフォルダでターミナルを開き、以下のコマンドを入力します。
$ npm run serve
App running at:
- Local: http://localhost:8080/ 起動したら、ブラウザで上記のURLを叩きます。環境によっては、ポート番号が違いますので、自分のターミナルに表示されている内容をよく確認して下さい。
すると、以下のような地図が表示されていると思います。
まとめ：Vue Leafletを使うと簡単に地図を表示できた
Vue Leafletの使い方を解説しました。すごく簡単に地図が表示できましたね。
今回は基本的な使い方を解説するために、シンプルな地図画面を実装しましたが、Vue Leafletはもっと複雑で便利な地図画面を実装できます。
エソラもっと高度な使い方を追記しますので、これからもよろしくお願いします。
ここまでお読みいただき、ありがとうございました。
＼ 更新の励みになるので、ポチッとしてね ／
エソラ他にもスキルアップやキャリアアップの役に立つ情報が満載です。他の記事も読んで、ゆっくりしていってね！
フロントエンドのおすすめ勉強方法
エソラフロントエンドの勉強をするなら、Udemyの講座がおすすめです。
- 学習コンテンツ量が多いので、未経験から現場で活躍するレベルまで幅広い
- 疲れていても、動画で楽に学習出来る
- 疑問を気軽に聞けるQAシステムがあり、初心者でも安心
- セールが多数開催されるので、Udemy
の料金は技術書よりも安い場合がある - 30日以内なら、返金も可能
まとめると、「動画で楽に勉強が出来て、質問も出来て、しかも安い」という点が、Udemy
の魅力です。
フロントエンドのオススメ講座は以下の通り。
- フロントエンドの知識が全くないという初心者向け
- フロントエンドの知識がある程度ついてきた中級者向け
- UI開発に特化したJavaScriptライブラリの使い方を学びたい人向け
- 現場に出る前にチーム開発に必要なスキルの基礎を学びたい人向け
各講座の詳細については、以下で完全理解できます。
エソラ効率の良い勉強方法で、楽にスキルアップしましょう。
コメント