React Leafletを使って地図を組み込む方法をわかりやすく解説

フロントエンド開発•2025/1/26

はじめに

地図をアプリケーションに組み込みたいと思ったとき、JavaScriptで広く使われているのが Leaflet というライブラリです。そして、Reactを使った開発環境でLeafletを扱う場合に便利なのが、React Leaflet というライブラリではないでしょうか。地図表示をReactで実装すると、コンポーネントを使った開発がしやすくなります。しかし、初心者の皆さんは「そもそもLeafletとは何なのか？」とか「React Leafletをどう導入すればいいのか？」といった疑問を持つかもしれません。

ここでは、React Leafletを使って地図を表示する基本的な方法や、実務での活用シーンを紹介します。抽象的な説明ではなく、具体的なコード例とともに理解を進めやすいようにまとめますので、実際に手を動かしながら読み進めてみてください。

この記事を読むとわかること

React Leafletがどのようなライブラリなのかを理解できるようになります。最初にどうやって導入すればよいのか、その流れがわかります。基本的なコンポーネントやマーカーの配置、地図の表示カスタマイズなどの手順を把握できます。実際の業務で使う場合を想定しながら、地図を活用するためのヒントが得られます。

React Leafletとは？

地図表示といえばGoogle MapsやMapboxなどのサービスも存在しますが、Leaflet はオープンソースで広く使われているJavaScriptライブラリです。 React Leafletは、そのLeafletをReactのコンポーネントとして扱いやすくしたもので、React環境下でも地図機能を比較的簡単に導入できます。扱う地図は、TileLayerと呼ばれる地図タイルを使って描画する仕組みです。 Reactの画面構成と相性が良いため、地図部分のみをコンポーネントとして切り出したり、マーカー表示を管理しやすかったりというメリットがあります。

地図アプリケーションは可視化や操作性が重要になりがちですよね。 React Leafletでは、マウス操作やタッチ操作にも対応しているので、PCやスマートフォンでも扱いやすい地図を提供できます。また、Reactのライフサイクルに準拠してコンポーネントを制御できるため、動的にマーカーを追加したり地図の表示を切り替えることも、Reactの状態管理を通じて実装しやすいです。

なぜ地図ライブラリが必要？

Webアプリケーションで地図が必要になるケースは多いです。例えば、店舗の所在地やイベント会場、物流ルートの可視化などが挙げられます。地図そのものをゼロから描画するのはとても手間がかかるので、既存のライブラリを使うのが一般的です。 Leafletは、その中でも軽量で柔軟なカスタマイズができるという理由から利用されることが多い印象があります。

React Leafletの特長

Reactのコンポーネント形式で地図を扱える点が最大の特長です。通常のLeafletを使うと、DOM操作やイベントリスナーの付与などを直接行う場面が多くなります。しかし、React Leafletなら、Reactのコンポーネントとして <MapContainer> や <Marker> といった要素を扱います。 Reactの強みである宣言的UIと組み合わせることで、ビジネスロジックと地図表示ロジックが分離しやすくなります。

実務での活用シーン

地図を使ったアプリケーションには、本当にいろいろなケースがあります。 React Leafletを導入しておくと、複雑な地図アプリケーションもコンポーネントごとに整理しやすくなるでしょう。

顧客管理の可視化

例えば、複数の地域に店舗を持っている企業が、各店舗の売上や顧客分布を可視化するケースです。地図上にマーカーを立てて、そこをクリックすると店舗の概要がポップアップ表示されるという機能は、よく見かけるのではないでしょうか。 React Leafletを使うことで、マーカーやポップアップなどをコンポーネントとして制御できるので、スムーズに実装が進むことが多いです。

物流ルート管理

また、物流や配送サービスでは、特定ルートの可視化が不可欠です。マップ上に経路線を引いて、各拠点の位置情報を管理することで、配送状況や所要時間の把握がしやすくなります。 React LeafletのPolylineコンポーネントを活用すると、地点情報の配列から簡単に線を引くことが可能です。

主要なコンポーネントと機能

React Leafletには、Leafletの主要機能をReactコンポーネント化したものが複数用意されています。ここでは、よく使うものを簡単に紹介します。

MapContainer

最初に配置するメインとなる要素で、地図を表示するためのコンテナです。中心座標（center）やズームレベル（zoom）などのプロパティを指定して、地図の初期設定を行います。子要素としてTileLayerなどを含むことで、地図の見た目を整えます。

TileLayer

地図の背景画像や地形を描画するためのレイヤーです。 Leaflet公式ドキュメントなどで公開されているURLを使うと、オープンソースの地図タイルを表示できます。有料APIを利用する場合にも、このTileLayerを差し替えるだけで地図サービスを切り替えられます。

MarkerとPopup

地図上にピンを立てるためのコンポーネントがMarkerです。ポップアップを表示する場合にはPopupを組み合わせ、Markerの内部に記述します。例えば「クリックすると施設の詳細を表示する」といった機能を実装しやすいのが特徴です。

その他のレイヤーやプラグイン

ポリラインやポリゴンなどを描画するためのコンポーネントもありますし、Heatmapプラグインを組み込むことも可能です。地図の上でドラッグ＆ドロップ操作を検出したり、現在地情報を取得したりといった拡張機能もLeafletと同様に使えます。 React Leafletでは、それらの拡張機能もReactの流儀で扱えるため、保守がしやすいという利点があります。

React Leafletの導入手順

ここでは、基本的なセットアップの流れを見ていきましょう。

事前準備（開発環境）

Reactを使ったプロジェクト（Create React Appなどで構築）や、Next.jsを使ったプロジェクトが一般的です。 Node.jsやnpm（またはyarn）がインストールされていることを確認してください。

React Leafletのインストール

パッケージマネージャを使って、React LeafletとLeafletの本体をインストールします。 npmの場合は以下のようにコマンドを実行します。


npm install react-leaflet leaflet

yarnを使う場合は、 yarn add react-leaflet leaflet といった形で進めます。

package.jsonへの追加

上記コマンドを実行すると、package.json に react-leaflet と leaflet が追記されます。

必要なCSSやスタイルの適用

Leafletには地図表示に必要なCSSファイルがあります。通常、LeafletのCSSをインポートする記述が必要になります。 Create React Appなら、たとえば src/index.js もしくはメインのCSSに以下を追記する例が考えられます。


import "leaflet/dist/leaflet.css";

地図を表示してみよう

ここからは簡単な例を紹介します。 React Leafletを導入したあとに、App.jsのようなファイルでコンポーネントを作ってみます。下記のコードはあくまでサンプルのため、座標やズーム値はお好みで変更してみると良いでしょう。


import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";

function MyMap() {
  const position = [35.681236, 139.767125]; // 東京駅付近を例とした座標
  return (
    <MapContainer center={position} zoom={13} style={{ height: "400px", width: "100%" }}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>
          ここは東京駅付近です。
        </Popup>
      </Marker>
    </MapContainer>
  );
}

export default MyMap;

このように、MapContainerコンポーネントを使って地図を表示し、TileLayerで地図タイルを指定します。マーカーを置きたい座標をMarkerに渡し、その内部にPopupを記述してポップアップメッセージを表示します。

地図をカスタマイズ

標準的な地図表示だけでなく、マーカーやポップアップを独自の見た目にアレンジしたい場合がありますよね。ここでは、カスタムアイコンを使う例や、マーカーのスタイル変更を考えてみましょう。

自分だけのマーカーやポップアップ

アイコンの画像を用意して、それをLeafletのL.icon機能などを使って読み込み、Markerに設定できます。複数の施設を種類ごとにアイコンを変更したいときなどに役立つ方法です。また、ポップアップ内部にHTML要素を入れて、カラフルな表示を行うことも可能です。

マーカークラスの追加

以下のように、マーカーにクラス名を付与してCSSで制御する手段も考えられます。 React Leafletでは、icon プロパティで独自のアイコンを設定したり、クラス付与による細かいコントロールもできます。ユーザーの操作に応じてマーカーを選択状態に変えたい場合など、ビジネス要件に合わせた工夫がしやすいですね。

カスタムアイコン

Leafletのicon機能を使ってカスタムアイコンを定義する例です。ファイル構成によってパスは異なるためご注意ください。


import React from "react";
import { MapContainer, TileLayer, Marker } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import customMarkerIcon from "./my-marker.png";

function CustomMap() {
  const icon = L.icon({
    iconUrl: customMarkerIcon,
    iconSize: [32, 32],
    iconAnchor: [16, 32],
  });

  const position = [35.681236, 139.767125];
  return (
    <MapContainer center={position} zoom={13} style={{ height: "400px", width: "100%" }}>
      <TileLayer
        attribution='&copy;OpenStreetMap contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position} icon={icon} />
    </MapContainer>
  );
}

export default CustomMap;

このように、L.iconを使って独自のアイコン画像を指定し、サイズやアンカー位置を調整します。そうすると、オリジナルのマーカーアイコンが表示されるようになります。

ズームコントロールやスケールなどのUI操作

React Leafletで地図のUIも柔軟に変更できます。デフォルトでズームイン・ズームアウトボタンが表示されますが、これを非表示にしたり、スケールバーを追加することも可能です。ポリゴンを描く機能を付ける場合などもLeafletのプラグインを活用すると良いでしょう。実務で使うときは、特定の範囲だけを表示してユーザーに見せたいケースもあるので、boundsプロパティを使って表示範囲を固定することもあります。

ズームコントロールの配置場所などは簡単に変更できます。アプリの使い勝手を考えながら適切に配置するとよいでしょう。

よくある疑問やつまづき

React Leafletを使い始めた方から、いくつかの疑問をよく耳にします。地図がうまく表示されない、座標がずれてしまうなどのトラブルが起きた場合、以下の点を確認してみてください。

地図が表示されない場合

CSSのインポートが漏れていないかどうか
MapContainerに指定したスタイル（特に高さ）に問題がないかどうか
centerやzoomなどの指定に極端な値を入れていないかどうか

座標がずれて表示される場合

(緯度、経度)の順番を誤っていないか
マーカーを置くときに別の座標を参照していないか
地図タイルの誤差や測地系の違いではないか

これらを確認すると、表示の不一致をある程度防ぐことができます。また、実務では地図サービス提供元の仕様変更に注意が必要な場合もあります。

まとめ

React Leafletは、地図表示ライブラリであるLeafletをReactのコンポーネントとして扱いやすくしたライブラリです。 MapContainerやTileLayer、Markerといった基本コンポーネントを組み合わせることで、初心者の皆さんでも地図アプリケーションを作りやすくなるでしょう。ビジネスシーンでは、店舗管理や物流管理など多くの分野で地図が必要とされているため、React Leafletを知っておくと役立つことが多いと思います。

カスタムアイコンを使った独自のマーカー表示や、ズームコントロールの配置、地図の拡張機能など、Leafletの特長はReact環境でもしっかり活かせます。皆さんも自分のプロジェクトで、まずはシンプルな地図表示から試してみてはいかがでしょうか。