Vue3とvue-leafletを用いて地図上に
独自アイコンとポップアップを表示するまで

本記事では、タイトル通りVue3とvue-leafletを用いて、任意の画像を地図上にマーカーとして表示する方法とポップアップを表示する方法、また作業の過程で躓いたポイントをまとめます。

はじめに

こんにちは。
クラウドソリューショングループのishimaru.rです。

Webアプリケーション上で地図を表示しようと思った際に、今回使用するライブラリがBeta版であることもあり、ライブラリの1機能を用いるだけでも時間が掛かってしまったため、今後利用する際のために備忘録として残します。

今回使用するライブラリについて

今回使用するVue-leaflet(vue-leaflet/vue-leaflet)は、LeafletマップライブラリをVue 3アプリケーション内でシームレスに使用できるように設計されたラッパーコンポーネントを提供するライブラリでインタラクティブなマップをブラウザ上で表示するためのオープンソースのJavaScriptライブラリです。

1. Vue3プロジェクトの作成

Vue3 プロジェクトを以下コマンドにて作成致します。

vue create projectName

2. vue-leafletライブラリのインストール

vue-leafletライブラリをインストールします。
1. の手順で作成したディレクトリ配下に移動後以下コマンドでインストールします。

npm install @vue-leaflet/vue-leaflet

この時「@vue-leaflet/」がついていることを必ず確認しましょう。「vue-leaflet」だけではVue 2向けのライブラリをインストールすることになります。

3. 地図上にデフォルトのマーカーを表示

まずはデフォルトで表示されるマーカーを表示させてみましょう。

<template>
  <div id="map-container">
    <l-map id="map" :zoom="18" :center="[35.686541, 139.698851]">
      <l-tile-layer :url="url"></l-tile-layer>
      <l-marker :lat-lng="[35.686541, 139.698851]"></l-marker>
    </l-map>
  </div>
</template>
<script>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer, LMarker } from '@vue-leaflet/vue-leaflet';

export default {
  components: {
    LMap,
    LTileLayer, 
    LMarker
  },
  data() {  
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    };
  }
};
</script>

4. 任意画像に差し替え

続いてマーカーとして任意の画像を設定します。
先程の手順で設定したマーカー内にアイコンを指定します。

<l-marker :lat-lng="[35.686541, 139.698851]">
  <l-icon :icon-url="iconUrl" :icon-size="[35, 50]"></l-icon>
</l-marker>

続いてscript内の処理を修正します。

LIconのインポート処理追加

使用するコンポーネントへの追加

使用したいアイコン画像をモジュールとしてインポート

<script>
import "leaflet/dist/leaflet.css";

import { LMap, LTileLayer, LMarker, LIcon } from '@vue-leaflet/vue-leaflet';

export default {
  components: {
    LMap,
    LTileLayer, 
    LMarker,
    LIcon
  },
  data() {  
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      iconUrl: require('@/assets/isoroot.png')
    };
  }
};
</script>

この際、iconUrlに指定する際に`require`で画像を読み込むことを忘れないようにしましょう。

5. ポップアップの表示

指定のマーカーをクリックした際に表示するポップアップを作成します。

LPopupのインポート処理追加

テンプレート内にpopupのモジュールを追加

<l-marker :lat-lng="[35.686541, 139.698851]">
  <l-icon :icon-url="iconUrl" :icon-size="[35, 50]"></l-icon>
  <l-popup>アイソルート本社です！</l-popup>
</l-marker>


<script>
import "leaflet/dist/leaflet.css";

import { LMap, LTileLayer, LMarker, LIcon, LPopup } from '@vue-leaflet/vue-leaflet';

export default {
  components: {
    LMap,
    LTileLayer, 
    LMarker,
    LIcon,
    LPopup
  },
  data() {  
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      iconUrl: require('@/assets/isoroot.png')
    };
  }
};
</script>

おわりに

本記事では、vue-leafletのLMarker、LIcon、LPopupを使用してみた際の備忘録として記載いたしました。他にもコンポーネントはいくつかありますので使用して詰まったポイントを残していこうと思います。

今回詰まったポイントは以下2点です。

installするのはVue3向けの”@vue-leaflet/vue-leaflet”を指定すること

画像のパス指定をするときにrequireを忘れないこと

ブログ記事一覧へ戻る

ishimaruのブログ

ブログ内検索

Vue3とvue-leafletを用いて地図上に 独自アイコンとポップアップを表示するまで

目次