はじめに

Reactで地図を表示したい場合、選択肢の一つにLeafletがあります。

Leafletは、ブラウザ上にインタラクティブな地図を表示できるJavaScriptライブラリです。

Reactで使う場合は、React向けのラッパーであるReact Leafletを使うと、MapContainer、TileLayer、Marker、Popup などをReactコンポーネントとして扱えます。

この記事では、React + Leafletで以下を試します。

地図を表示する
OpenStreetMapのタイルを表示する
マーカーを表示する
ポップアップを表示する
複数マーカーを配列から表示する
地図クリックでマーカーを追加する
現在地を取得して地図を移動する

目的は、地図アプリを作り込むことではなく、ReactでLeafletを使うときの基本的な機能を一通り確認することです。

サンプルコード

この記事で確認したサンプルコードは以下に置いています。

GitHubのソースコード

検証環境

この記事は、以下の環境で動作確認しています。

OS: Windows 11
Node.js: 24.13.0
npm: 11.6.2
Vite: 8.1.1
React: 19.2.7
TypeScript: 6.0.2
Leaflet: 1.9.4
React Leaflet: 5.0.0
Browser: Google Chrome

今回作るもの

今回は、以下のような簡単な地図画面を作ります。

- 東京駅周辺を初期表示する
- 複数の地点にマーカーを表示する
- マーカーをクリックするとポップアップを表示する
- 地図をクリックすると、その地点にマーカーを追加する
- ボタンを押すと現在地を取得して地図を移動する

地図タイルには、学習用としてOpenStreetMapのタイルを使います。

前提

この記事では、Vite + React + TypeScriptのプロジェクトを前提にします。

プロジェクトを作成していない場合は、以下で作成できます。

npm create vite@latest react-leaflet-map-sample -- --template react-ts

作成後、ディレクトリに移動します。

cd react-leaflet-map-sample

依存関係をインストールします。

npm install

LeafletとReact Leafletをインストールする

LeafletとReact Leafletをインストールします。

npm install leaflet react-leaflet

Leafletの型定義もインストールします。

npm install -D @types/leaflet

ファイル構成

今回の主なファイル構成は以下です。

src/
├─ App.tsx
├─ main.tsx
├─ index.css
├─ data/
│  └─ locations.ts
└─ components/
   ├─ MapView.tsx
   └─ CurrentLocationButton.tsx

LeafletのCSSを読み込む

Leafletを使うには、LeafletのCSSを読み込む必要があります。

src/main.tsx で読み込みます。

src/main.tsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import 'leaflet/dist/leaflet.css';
import './index.css';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

leaflet/dist/leaflet.css を読み込まないと、地図やマーカーの表示が崩れることがあります。

表示する地点データを用意する

まず、地図上に表示する地点データを用意します。

src/data/locations.ts

export type Location = {
  id: number;
  name: string;
  description: string;
  position: [number, number];
};

export const locations: Location[] = [
  {
    id: 1,
    name: '東京駅',
    description: '東京の主要ターミナル駅です。',
    position: [35.681236, 139.767125],
  },
  {
    id: 2,
    name: '皇居外苑',
    description: '東京駅からも近い広い公園エリアです。',
    position: [35.680959, 139.758761],
  },
  {
    id: 3,
    name: '日本橋',
    description: '歴史ある橋と商業エリアです。',
    position: [35.684095, 139.774503],
  },
];

Leafletでは、位置情報を [緯度, 経度] の形で扱います。

現在地取得ボタンを作る

現在地取得用のボタンを作ります。

React Leafletでは、useMap を使うと、現在のLeafletのMapインスタンスを取得できます。

src/components/CurrentLocationButton.tsx

import { useState } from 'react';
import { useMap } from 'react-leaflet';

type CurrentLocationButtonProps = {
  onLocationFound: (position: [number, number]) => void;
};

export function CurrentLocationButton({
  onLocationFound,
}: CurrentLocationButtonProps) {
  const map = useMap();
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = () => {
    if (!navigator.geolocation) {
      alert('このブラウザでは現在地取得がサポートされていません。');
      return;
    }

    setIsLoading(true);

    navigator.geolocation.getCurrentPosition(
      (position) => {
        const currentPosition: [number, number] = [
          position.coords.latitude,
          position.coords.longitude,
        ];

        onLocationFound(currentPosition);
        map.flyTo(currentPosition, 15);
        setIsLoading(false);
      },
      () => {
        alert('現在地を取得できませんでした。');
        setIsLoading(false);
      },
    );
  };

  return (
    <button type="button" className="location-button" onClick={handleClick}>
      {isLoading ? '取得中...' : '現在地へ移動'}
    </button>
  );
}

navigator.geolocation.getCurrentPosition を使うと、ブラウザの現在地取得機能を利用できます。

現在地の取得時には、ブラウザ側で位置情報の許可ダイアログが表示されます。

取得した緯度・経度は、map.flyTo() に渡して地図を移動しています。

map.flyTo(currentPosition, 15);

地図コンポーネントを作る

次に、地図本体を作ります。

src/components/MapView.tsx

import { useState } from 'react';
import { MapContainer, Marker, Popup, TileLayer, useMapEvents } from 'react-leaflet';
import type { LatLngExpression } from 'leaflet';
import { locations } from '../data/locations';
import { CurrentLocationButton } from './CurrentLocationButton';

type AddedMarker = {
  id: number;
  position: [number, number];
};

function ClickMarker({
  onAddMarker,
}: {
  onAddMarker: (position: [number, number]) => void;
}) {
  useMapEvents({
    click(event) {
      onAddMarker([event.latlng.lat, event.latlng.lng]);
    },
  });

  return null;
}

export function MapView() {
  const initialPosition: LatLngExpression = [35.681236, 139.767125];

  const [addedMarkers, setAddedMarkers] = useState<AddedMarker[]>([]);
  const [currentPosition, setCurrentPosition] = useState<[number, number] | null>(
    null,
  );

  const handleAddMarker = (position: [number, number]) => {
    setAddedMarkers((markers) => [
      ...markers,
      {
        id: Date.now(),
        position,
      },
    ]);
  };

  return (
    <div className="map-wrapper">
      <MapContainer
        center={initialPosition}
        zoom={14}
        scrollWheelZoom
        className="map-container"
      >
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
        />

        {locations.map((location) => (
          <Marker key={location.id} position={location.position}>
            <Popup>
              <strong>{location.name}</strong>
              <div>{location.description}</div>
            </Popup>
          </Marker>
        ))}

        {addedMarkers.map((marker) => (
          <Marker key={marker.id} position={marker.position}>
            <Popup>
              <strong>追加した地点</strong>
              <div>緯度: {marker.position[0].toFixed(5)}</div>
              <div>経度: {marker.position[1].toFixed(5)}</div>
            </Popup>
          </Marker>
        ))}

        {currentPosition && (
          <Marker position={currentPosition}>
            <Popup>現在地</Popup>
          </Marker>
        )}

        <ClickMarker onAddMarker={handleAddMarker} />
        <CurrentLocationButton onLocationFound={setCurrentPosition} />
      </MapContainer>
    </div>
  );
}

MapContainer が地図全体を表すコンポーネントです。

<MapContainer center={initialPosition} zoom={14} scrollWheelZoom>

TileLayer では、地図タイルのURLと attribution を指定します。

<TileLayer
  attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
/>

Marker と Popup を組み合わせると、地図上にマーカーを表示し、クリック時にポップアップを表示できます。

<Marker position={location.position}>
  <Popup>
    <strong>{location.name}</strong>
    <div>{location.description}</div>
  </Popup>
</Marker>

地図クリックでマーカーを追加する

地図クリック時のイベントは、useMapEvents を使って取得しています。

function ClickMarker({
  onAddMarker,
}: {
  onAddMarker: (position: [number, number]) => void;
}) {
  useMapEvents({
    click(event) {
      onAddMarker([event.latlng.lat, event.latlng.lng]);
    },
  });

  return null;
}

event.latlng.lat と event.latlng.lng から、クリックした地点の緯度・経度を取得できます。

取得した座標を addedMarkers に追加し、地図上にマーカーとして表示しています。

また、useMapEventsはReactコンポーネントの内部で呼ぶ必要があるため、DOMには何も表示しないコンポーネントとして定義し、MapContainerの子要素に配置しています

Appから地図を表示する

App.tsx から MapView を表示します。

src/App.tsx

import { MapView } from './components/MapView';

export default function App() {
  return (
    <main className="app">
      <section className="content">
        <h1>React + Leaflet Map Sample</h1>
        <p>
          地図表示、マーカー、ポップアップ、クリック地点の追加、現在地取得を試すサンプルです。
        </p>
      </section>

      <MapView />
    </main>
  );
}

CSSを追加する

地図の高さを指定しないと、地図が表示されないことがあります。

src/index.css に以下を追加します。

src/index.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  background: #f8fafc;
  color: #0f172a;
}

button {
  font: inherit;
}

.app {
  min-height: 100vh;
  padding: 24px;
}

.content {
  max-width: 960px;
  margin: 0 auto 16px;
}

.content h1 {
  margin-bottom: 8px;
  font-size: 28px;
}

.content p {
  margin-top: 0;
  color: #475569;
}

.map-wrapper {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}

.map-container {
  height: 560px;
  width: 100%;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
}

.location-button {
  position: absolute;
  z-index: 1000;
  top: 16px;
  right: 16px;
  border: none;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgb(15 23 42 / 20%);
}

.location-button:hover {
  background: #1e293b;
}

Leafletの地図は、親要素に高さがないと表示されません。

そのため、.map-container に height: 560px; を指定しています。

動作確認

開発サーバーを起動します。

npm run dev

ブラウザで表示します。

http://localhost:5173

以下を確認します。

地図が表示される
東京駅、皇居外苑、日本橋のマーカーが表示される
マーカーをクリックするとポップアップが表示される
地図をクリックするとマーカーが追加される
「現在地へ移動」を押すと、位置情報の許可ダイアログが表示される
許可すると現在地に地図が移動する

現在地取得について

現在地取得には、ブラウザのGeolocation APIを使っています。

ブラウザによっては、HTTPSまたは localhost でないと現在地取得が使えない場合があります。

今回のようにローカル開発環境で http://localhost:5173 を使う場合は、動作確認しやすいです。

ただし、本番環境で使う場合はHTTPSで配信する必要があります。

また、現在地は個人情報に近い扱いになるため、実務で使う場合は、利用目的の説明やプライバシー面の配慮も必要です。

OpenStreetMapタイル利用時の注意

この記事では、学習用としてOpenStreetMapのタイルを使っています。

<TileLayer
  attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
/>

ただし、tile.openstreetmap.org はOpenStreetMap Foundationが運用している共有のタイル配信サーバーです。OpenStreetMapの地図データ自体は利用しやすい一方で、公式のタイルサーバーを大量アクセス前提の商用サービスでそのまま使っていいわけではありません。

小さな検証や学習用途では扱いやすいですが、実運用で多くのユーザーが地図を表示する場合は、OpenStreetMapのタイル利用ポリシーを確認する必要があります。

本番サービスで地図を使う場合は、アクセス数や用途に応じて、商用向けのタイル配信サービス、地図API、自前のタイルサーバーなども検討します。

よくあるエラー

地図が表示されない

LeafletのCSSを読み込んでいるか確認します。

import 'leaflet/dist/leaflet.css';

また、地図コンテナに高さが指定されているか確認します。

.map-container {
  height: 560px;
}

現在地を取得できない

ブラウザで位置情報の利用を許可しているか確認します。

また、現在地取得はHTTPSまたは localhost などの安全なコンテキストでないと使えない場合があります。

ボタンが地図の下に隠れる

Leafletの地図上にボタンを重ねる場合、z-index を指定します。

.location-button {
  z-index: 1000;
}

実務で追加で考えたいこと

今回のサンプルは、React + Leafletの基本機能を確認するための最小構成です。

実務で使う場合は、さらに以下のような観点を考える必要があります。

店舗や施設データをAPIから取得する
地図の表示範囲に応じてデータを絞り込む
マーカーが多い場合はクラスタリングする
現在地を保存するかどうかを検討する
位置情報の利用目的を明示する
地図タイルの利用規約を確認する
スマートフォンでの操作性を確認する
検索機能や絞り込み機能を追加する
GeoJSONでエリアやルートを表示する
本番環境ではタイルサービスの選定を行う

地図UIは、店舗一覧、施設検索、配送エリア、不動産物件マップ、訪問先管理など、さまざまな業務画面に応用できます。

まとめ

今回は、React + Leafletで地図表示・マーカー・ポップアップ・現在地取得を試しました。

確認したことは以下です。

LeafletとReact Leafletをインストールする
LeafletのCSSを読み込む
MapContainer で地図を表示する
TileLayer でOpenStreetMapのタイルを表示する
Marker と Popup で地点情報を表示する
配列データから複数マーカーを表示する
useMapEvents で地図クリックを検知する
Geolocation APIで現在地を取得する
useMap と map.flyTo() で地図を移動する

React Leafletを使うと、Leafletの地図機能をReactコンポーネントとして扱えます。

まずは、地図表示、マーカー、ポップアップ、現在地取得を押さえておくと、店舗一覧や施設検索のような地図UIにも広げやすい構成です。

参考