4-2. 地図表示（Leaflet）

更新日：2025年12月7日

4-2. 地図表示（Leaflet）について解説します。

※画像は生成AIによるイメージです。

Leafletは、モバイルフレンドリーなインタラクティブ地図を作成するための軽量で使いやすいJavaScriptライブラリです。OpenStreetMapなどの地図タイルを使って、Webサイトに地図機能を簡単に追加できます。

Leafletの特徴

軽量：約40KBと非常に軽い
モバイル対応：タッチ操作にも対応
プラグイン豊富：機能拡張が容易
オープンソース：無料で商用利用可能
ブラウザ対応：主要ブラウザすべてに対応

基本的な使い方

1. CSSとJSの読み込み

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

2. 地図を表示する要素を準備

<!-- 高さの指定が必須 -->
<div id="map" style="height: 400px;"></div>

3. 地図の初期化と表示

// 地図を初期化（東京駅を中心に）
const map = L.map('map').setView([35.6812, 139.7671], 13);

// OpenStreetMapのタイルレイヤーを追加
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

// マーカーを追加
L.marker([35.6812, 139.7671]).addTo(map)
    .bindPopup('東京駅です')
    .openPopup();

主な機能

機能	メソッド	説明
マーカー	L.marker()	地点をマークする
ポップアップ	bindPopup()	クリック時に情報表示
円	L.circle()	範囲を円で表示
ポリゴン	L.polygon()	多角形エリアを描画
ライン	L.polyline()	経路を線で描画

実用例：複数地点の表示

// 店舗情報の配列
const stores = [
    {name: '渋谷店', lat: 35.6580, lng: 139.7016},
    {name: '新宿店', lat: 35.6896, lng: 139.6923},
    {name: '池袋店', lat: 35.7295, lng: 139.7109}
];

// 各店舗にマーカーを設置
stores.forEach(store => {
    L.marker([store.lat, store.lng]).addTo(map)
        .bindPopup(`<b>${store.name}</b><br>クリックで詳細`);
});

// すべてのマーカーが見えるように地図を調整
const group = new L.featureGroup(
    stores.map(s => L.marker([s.lat, s.lng]))
);
map.fitBounds(group.getBounds());

PHPとの連携例

PHPでデータベースから位置情報を取得し、地図上に表示することができます。

// PHP側（locations.php）
<?php
// データベースから取得したと仮定
$locations = [
    ['id' => 1, 'name' => '東京本社', 'lat' => 35.6812, 'lng' => 139.7671],
    ['id' => 2, 'name' => '大阪支社', 'lat' => 34.6937, 'lng' => 135.5023],
];
header('Content-Type: application/json');
echo json_encode($locations);
?>

// JavaScript側
fetch('locations.php')
    .then(response => response.json())
    .then(locations => {
        locations.forEach(loc => {
            L.marker([loc.lat, loc.lng])
                .addTo(map)
                .bindPopup(loc.name);
        });
    });

カスタムアイコンの使用

// カスタムアイコンを定義
const customIcon = L.icon({
    iconUrl: 'marker-icon.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34]
});

// カスタムアイコンでマーカー作成
L.marker([35.6812, 139.7671], {icon: customIcon})
    .addTo(map)
    .bindPopup('カスタムマーカー');

まとめ

Leafletを使うことで、インタラクティブな地図機能を簡単にWebサイトに追加できます。位置情報を扱うサービスや、店舗案内、イベント会場の表示など、様々な用途に活用できます。次のページでは、APIの基本的な利用方法について学習します。

免責事項
本コンテンツは2025年12月時点の情報に基づいて作成されている。最新の情報については公式ドキュメントを参照されたい。