LeafletをVue3で表示してみる

概要

本記事では、Vue3でLeafletを使用し、最小限の地図表示サンプルを作成します。
VueのComposition APIを使ったLeafletの例は少ない印象があったため、自分用のメモも兼ねて記録します。

Vue3環境で地図を表示し、マーカーを1つ設置できるところまで解説します。

対象

Vueの基本に触れたことがある方や、Leafletをこれから触り始める方向け

最終イメージ

以下のように、地図が表示されて中央にマーカーが設置された状態を目指します。

環境

本記事では以下の環境で行っております。

• Node.js: v20.19.0 以上
• Vue: v3.5.18 (Composition API 使用)
• Vite: v7.0.6
• Leaflet: v1.9.4

※本記事ではJavascriptで説明します

環境構築

前提

Node.js と npm がインストールされている必要があります。
未インストールの方は Node.js公式サイト から LTS 版をダウンロードしてください。
インストール後に以下のコマンドでバージョンが表示されれば準備完了です。

node -v
npm -v

プロジェクトの作成

# npm create vite@latest [プロジェクト名]
npm create vite@latest map-sample

※ 2025年9月時点で、Viteの Vue テンプレートを選ぶと Vue3 がインストールされます。
将来的に Vue4 がリリースされるとバージョンが変わる可能性もあります。

プロジェクト作成時の選択項目

• フレームワーク : Vue
• 言語:JavaScript

依存関係のインストール

# プロジェクトのディレクトリに移動
cd map-sample

# 依存関係のインストール
npm install

起動確認

問題なく、プロジェクトを起動できるか確認

npm run dev

Leafletのインストール

npm install leaflet

実装

コンポーネントの作成

MapSample.vueを作成して実装
(src/components/MapSample.vue で作成)

// MapSample.vue
<template>
  <div id="map" class="map-container"></div>
</template>

<script setup>
import { onMounted } from 'vue'

// Leaflet関連
import 'leaflet/dist/leaflet.css' // CSSがないと地図が正しく表示されないので注意!!
import L from 'leaflet'

onMounted(() => {
  // 地図の作成
  // setView([lat, lng], zoom)
  // lat: 緯度, lng: 経度, zoom: ズームレベル(大きいほど拡大する)
  const map = L.map('map').setView([35.658556, 139.745454], 12);

  // 地図のタイルを設定(地図の背景)
  // ここではOpenStreetMapのタイルを使用している
  // 他にもGoogle MapsやMapboxなどのタイルを使用することもできる
  // attribution: タイルの著作権情報 (利用規約で必須のクレジット表示)
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map)

  // マーカー(ピン)を設定
  // L.marker([緯度, 経度])でマーカーを作成し、addToで地図に追加
  const marker = L.marker([35.658556, 139.745454]).addTo(map)
  marker.bindPopup('東京タワー')
})
</script>

<style scoped>
.map-container {
  width: 1200px;
  height: 500px;
}
</style>

App.Vueの編集

// App.vue
<template>
  <MapSample />
</template>

<script setup>
import MapSample from './components/MapSample.vue'
</script>

サーバーで確認

バッチリ東京タワーが表示されていますね！

クリックすると、設定したポップアップが表示されます

最後に

今回のサンプルでは、地図の表示とマーカーの設置までを解説しました。
Leaflet ではさらに下記のようなことも可能です

• 複数マーカーをクラスター化でまとめて表示
• 地域や条件ごとにマーカーやポリゴンの色分け
• ポップアップやツールチップで詳細情報の表示

Leaflet公式サイトにいくつかサンプルもあるので、ぜひ確認してみましょう！
⇒ Leaflet Examples