【初心者〜現場で活躍まで】挫折しないPython勉強方法もっと知る

【無料で地図表示】Vue Leafletの使い方を解説

Vue.jsで地図画面を実装したくなり、地図を表示できるVue Leafletの使い方について調べたのでまとめました。

Vue Leafletとは、無料で簡単に地図画面を実装できるJavaScriptのライブラリです。

この記事を最後まで読むと、以下のような地図画面を実装できます。

vue-leafletでシンプルな地図を表示
vue-leafletでシンプルな地図を表示
エソラ

公式ページよりも、サンプルコード豊富に、間違いやすい点について丁寧に解説するので、最後までお読み下さい。

環境情報については以下の通りです。

項目ver
node.jsv12.13.1
Vue CLI3.5.5
vue.js2.6.14
vue2-leaflet2.7.1
各項目のバージョン情報
目次

Vue Leafletのインストール

Vueプロジェクトの作成

まずは以下のコマンドでVueプロジェクトを作りましょう。

$ vue create vue-leaflet-demo

プロジェクト作成時のオプションが出てくると思いますが、defaultで構いません。

エラーになったら

もし、コマンドがエラーになった場合、Vue CLIをインストールしていないかも知れません。

その場合は、以下のコマンドで、Vue CLIをインストールしましょう。

$ npm install -g @vue/cli

Vue 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を利用するための初期設定をして、シンプルな地図を表示させます。

ここを間違えると、正しく地図が表示されません。注意深くコーディングして下さい。

完成形は以下のようになります。

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点、修正する点があります。

STEP
leaflet.cssをインポート

以下のように、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");

このCSSをインポートし忘れると、以下のように綺麗に地図が表示されません。

CSSをインポートし忘れると、地図が綺麗に表示されない
CSSをインポートし忘れると、地図が綺麗に表示されない
STEP
地図にマーカーを表示させる

地図にマーカーを表示させるためには、以下の処理を追加する必要があります。

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を使うと簡単に地図を表示できた

Vue Leafletの使い方を解説しました。すごく簡単に地図が表示できましたね。

今回は基本的な使い方を解説するために、シンプルな地図画面を実装しましたが、Vue Leafletはもっと複雑で便利な地図画面を実装できます。

エソラ

もっと高度な使い方を追記しますので、これからもよろしくお願いします。

ここまでお読みいただき、ありがとうございました。

役に立った、面白かったと思ったら、SNSでシェアしてくれると嬉しいです。

エソラ

もし分からないことがあれば、お問い合わせTwitterにご連絡をいただけると嬉しいです。(Twitterの方が返信早いかも…)

\ 更新の励みになるので、ポチッとしてね /

エソラ

他にもスキルアップやキャリアアップの役に立つ情報が満載です。他の記事も読んで、ゆっくりしていってね!

フロントエンドのおすすめ勉強方法

エソラ

フロントエンドの勉強をするなら、Udemyの講座がおすすめです。

Udemyの魅力
  1. 学習コンテンツ量が多いので、未経験から現場で活躍するレベルまで幅広い
  2. 疲れていても、動画で楽に学習出来る
  3. 疑問を気軽に聞けるQAシステムがあり、初心者でも安心
  4. セールが多数開催されるので、の料金は技術書よりも安い場合がある
  5. 30日以内なら、返金も可能

まとめると、「動画で楽に勉強が出来て、質問も出来て、しかも安い」という点が、の魅力です。

フロントエンドのオススメ講座は以下の通り。

フロントエンドの知識が全くないという初心者向け
フロントエンドの知識がある程度ついてきた中級者向け
UI開発に特化したJavaScriptライブラリの使い方を学びたい人向け
現場に出る前にチーム開発に必要なスキルの基礎を学びたい人向け

各講座の詳細については、以下で完全理解できます。

エソラ

効率の良い勉強方法で、楽にスキルアップしましょう。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次