OpenStreetMap（OSM）は、長らく「オープンな地図」として認識されてきた。しかし現在、その本質は大きく変化している。

今やOSMは、単なる地図ではなく、現実世界を記述するためのオープンデータ基盤である。物流、都市開発、AI、自動運転など、多くの分野において不可欠な存在となっている。

その背景には、ここ数年で急速に進んだ技術革新がある。本稿では、その中でも特に重要なトピックを、構造的に整理しながら解説していく。

ベクトルタイル革命：地図の描き方が変わった

OSMの進化を語るうえで最も重要なのが、ベクトルタイルの導入である。

従来はサーバー側で画像として地図を生成していたが、現在はデータとして配信し、ブラウザ側で描画する方式へと移行している。

ラスタ vs ベクトルタイル比較

何が変わったのか

• 地図は「画像」から「データ」へ
• UIの自由度が爆発的に向上
• フロントエンド主導の開発へ移行

結論：地図はバックエンドの産物ではなく、フロントエンドの表現レイヤーになった

タイル生成の進化：職人技からエンジニアリングへ

ベクトルタイル化は、裏側の生成プロセスも大きく変えた。

旧アーキテクチャ

最新アーキテクチャ（2026）

進化ポイント

• SQLでタイル生成（柔軟性↑）
• ETLのモジュール化
• スケーラブル設計

地図生成が「ブラックボックス」から「設計可能なシステム」へ変化

フロントエンドGISの時代

現在の地図開発は、サーバーよりもフロントエンドが主役である。

主な描画ライブラリ

技術トレンド

• WebGLによる高速描画
• スタイルJSONによるUI制御
• 地図＝UIコンポーネント化

地図はAPIではなく「Reactコンポーネント的存在」になった

ビッグデータとしてのOSM

OSMは現在、地球規模のビッグデータとして扱われている。

スケール比較

できること

• 交通シミュレーション
• 都市構造分析
• 災害リスク評価

OSMは「地図」から「分析エンジンの燃料」へ進化

AI × OSM：データから生成へ

近年、OSMはAIとの融合によって新たな段階に入った。

主な活用領域

変化の本質

• OSMは「入力データ」から
• OSMは「生成の起点」へ

AIによってOSMは“未来の地図”を作る基盤になった

デジタルツイン化：2Dから3Dへ

OSMは現在、3次元空間へ拡張されている。

構成要素

活用例

• 自動運転シミュレーション
• スマートシティ設計
• 防災訓練

OSMは「地図」ではなく「世界のコピー」になりつつある

タグ体系の課題と進化

OSMの最大の特徴であり弱点でもあるのが、自由なタグ体系である。

メリット・デメリット

現在の対策

• AIによるタグ統合
• 外部データとの連携
• セマンティック化

OSMは「ナレッジグラフ」に近づいている

APIからストリームへ

従来のOSMはAPI中心だったが、現在は変化している。

主なデータ取得手段

静的API → リアルタイムデータ基盤へ移行

技術スタックまとめ（2026年版）

現代OSM構成

今後のトレンド予測

重要テーマ

ビジネスインパクト

活用分野

OSMの強み

OSMは“現実のOS”になった

OpenStreetMapは、もはや地図ではない。

それは、現実世界を記述し、分析し、そして生成するための「空間データ基盤」である。

ベクトルタイルによる表現革命、ビッグデータ処理によるスケール、AIによる拡張。この三つが揃ったことで、OSMは新たなステージへと到達した。

今後は「使うかどうか」ではなく、どう組み込むかが問われる時代になる。

「Googleマップを使えば、どんな地図アプリでも簡単に作れる」
——そう思っている人は、意外と多いのではないでしょうか。

確かに、Google Maps API は高機能で、商用サイトでも広く使われています。
しかし最近では、「地図をもっと自由に」「コストを抑えて」「独自のデザインで」活用したいというニーズが高まっています。

そこで注目されているのが、オープンソースの地図技術「OpenStreetMap（OSM）」 と、
軽量な JavaScript ライブラリ Leaflet.js（リーフレット） の組み合わせです。

Leaflet は地図アプリ開発の“定番フレームワーク”として世界中で利用されており、
たった数行のコードで美しい地図を表示できます。
しかも、OSMのオープンデータを使えば無料で地図を提供できるため、
小規模なサイトや個人プロジェクト、自治体・観光協会の案内ページなどに最適です。

今回のチュートリアルでは、
「観光地をマップ上に可視化し、ジャンル別に表示・非表示を切り替え、
さらにルート表示まで行えるインタラクティブな地図アプリ」を
HTML・CSS・JavaScriptだけで構築する方法を解説します。

基本から応用までのステップを、
実際のコードサンプルとともに丁寧に追っていくので、
プログラミング初心者でも最後まで作りきれる内容です。

このチュートリアルを終える頃には、
あなたも 「自分の街を自分の手で描く」 地図クリエイターになっているはずです。

はじめに

なぜ Leaflet + OpenStreetMap なのか

Web上で地図を扱いたいとき、Google Maps や Mapbox など選択肢は多くあります。しかし、以下の理由から Leaflet + OpenStreetMap（OSM） の組み合わせは非常に魅力的です：

• オープン性：Leaflet は軽量なオープンソース JavaScript ライブラリです 。
• ライセンス自由度：OpenStreetMap のデータはオープンライセンスであり、商用利用も可能。ただし適切な属性表示（attribution 表示）は必要です。
• 軽量で拡張性あり：Leaflet 自体は小さく、プラグインも豊富。必要な機能だけを追加できる柔軟性があります。
• コミュニティと事例の豊富さ：多くのサイトやシステムで使われており、事例や情報がネット上に多くあります 。
• タイルソースを選べる自由：OSM以外のタイルソースも使える設計で、見た目／性能の選択肢が拡がります。

とはいえ、デメリットもあります。たとえば、タイル提供元の制約（過剰なリクエスト制限やキャッシュ制御など）、ルート検索 API の別構築、地図データの更新・同期、負荷分散など運用上の考慮は必要です。

このチュートリアルでは、それらを踏まえつつも「観光地マップを自前で作る」ための実践手順をできるだけ丁寧に解説します。

本チュートリアルで作るもののゴール

最終的には、次のような機能を備えた「観光地マップアプリ」を作ることを目指します：

• 都道府県や都市などの地図中心表示
• 観光スポット（地点）を GeoJSON 形式で管理
• マーカーでスポットを配置し、クリックで名称・説明・画像などをポップアップ表示
• 観光ジャンル別に表示を絞る UI 制御
• 出発地／目的地を指定して、地図上にルートを描画
• モバイル対応、インタラクティブな UX
• 高速化・最適化を意識した実装

この記事を通じて「地図を扱う基本」「GeoJSON を使ったデータ構造」「インタラクティブ操作の実装法」「運用上の注意点」などを体系的に学べるように設計します。

前提知識・対象読者

本記事は Web フロントエンド（HTML／CSS／JavaScript）の基本的な知識を持つ方向けを対象としています。ただし、Leaflet や地理情報に不慣れな方でも読み進められるよう、逐次説明を入れます。

また、バックエンド技術（サーバーサイド言語、DB 等）は深く触れませんが、GeoJSON を返す API 設計などについては軽く触れる場面があります。

Leaflet と OpenStreetMap の基礎知識

Leaflet とは何か／特徴・利点

Leaflet（リーフレット）は、Web 上でインタラクティブ地図を扱うための軽量 JavaScript ライブラリです。HTML5／CSS3 に対応し、モバイルでも快適に動作する設計です。leafletjs.com+2wiki.openstreetmap.org+2

主な特徴：

• 軽量設計：基本ライブラリは小さく、必要な機能をプラグインで追加できる
• 直感的 API：L.map、L.tileLayer、L.marker といった関数体系が分かりやすい
• 拡張性：多くのプラグイン（クラスタリング、ヒートマップ、ルーティング、GeoJSON 操作など）が存在
• 多様なレイヤー対応：タイルレイヤー、ベクターレイヤー、GeoJSON、WMS など
• イベント対応：クリック、パン、ズームなど、各種操作に応じたイベントハンドリングが可能

一方で、Leaflet は GIS が得意とする高度なジオプロセシング機能（空間クエリ、ジオメトリ演算など）は基本的に含んでおらず、必要な場合は別ライブラリ（Turf.js や他 GIS ライブラリ）と組み合わせて使うことが多いです。

OpenStreetMap の概要と利用の注意点

OpenStreetMap（OSM）は、オープンな地理空間データプロジェクトであり、世界中のユーザーが地図情報を編集・参照できます。地図タイルやデータを自前で利用できる自由度が高い点が魅力です。

ただし、使う際には以下の注意があります：

• タイル提供元の制約：公式の OSM タイルサーバーは、商用サービスや高トラフィック用途を前提とした提供ではありません。過剰な負荷をかけるとアクセス制限を受ける可能性があります。
• キャッシュと CDN：自分でタイルキャッシュや CDN 配信を検討することが望ましい。
• 属性表示義務（Attribution）：地図下部などに「© OpenStreetMap contributors」などの表示が必要です。
• データ更新：OSM データは随時更新されているため、キャッシュや定期更新の戦略を持つとよいです。
• 利用規約・マナー：API 利用制限、利用ルール、使途の範囲などを確認して使うこと。

タイルサーバー（地図地図タイル）の仕組み

地図アプリで使われる「タイル（タイル画像）」は、ズームレベル z、X／Y の座標で構成される小さな画像単位の地図ブロックです。ブラウザは必要なズームレベルと範囲に応じて適切なタイル画像をリクエストし、地図全体を構成します。

Leaflet では、以下のようにタイル URL テンプレートを指定して読み込むことができます。

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

上記の {z}、{x}、{y} はズーム／X座標／Y座標にそれぞれ展開されます。{s} はサブドメイン（例：a, b, c）で並列リクエスト分散に使われます。

この方式のおかげで、クライアント側では効率よくタイルをレンダリングでき、必要なタイルのみを逐次取得できる構造になります。

開発環境の準備

ディレクトリ構成

まずは手を動かすためのファイル構成を決めましょう。例えば次のような構成がシンプルで扱いやすいです。

/project-root/
  index.html
  css/
    style.css
  js/
    main.js
  data/
    spots.geojson
  assets/
    icons/
    images/
  README.md

• index.html：地図アプリ本体ページ
• css/style.css：地図表示用および追加 UI 用スタイル
• js/main.js：メインの JavaScript ロジック
• data/spots.geojson：観光スポット情報を保持する GeoJSON
• assets/：アイコン画像、スポット画像など

このあたりは、ご自身のブログ構成やファイル配置ルールに合わせて調整しても構いません。

HTML, CSS, JavaScript ファイルのひな形

まず、index.html の基本骨格を作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>観光地マップ with Leaflet & OSM</title>
  <!-- Leaflet CSS を読み込む -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha512-…（省略）"
    crossorigin=""
  />
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <h1>観光地マップ</h1>
  <div id="map"></div>

  <!-- 必要なら UI エレメント（例：ジャンル選択、ルート入力フォームなど） -->
  <div id="controls">
    <!-- ジャンル選択など -->
  </div>

  <!-- Leaflet JS を読み込む -->
  <script
    src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha512-…（省略）"
    crossorigin=""
  ></script>
  <script src="js/main.js"></script>
</body>
</html>

css/style.css には最低限、地図 div の高さを確保するスタイルを入れておきます。

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#map {
  width: 100%;
  height: 80vh; /* ブラウザ高さの 80% を地図領域に使う例 */
}

#controls {
  padding: 1em;
  /* 必要に応じて UI 部分のスタイル */
}
js/main.js は後ほどロジックを入れていきます。まずは空の構造だけ作っておきます：

js
コードをコピーする
// main.js

// 初期化処理
function initMap() {
  // 地図生成やマーカー読み込み等をここに書く
}

// ページ読み込み後に実行
window.addEventListener('load', () => {
  initMap();
});

Leaflet の読み込み（CDN／npm）

上の HTML 例では CDN 版を使う形式を採っていますが、モジュール構成やビルドツールを使っている場合は npm で Leaflet をインストールして取り込む方法でも構いません。

npm install leaflet

そして JavaScript 側（たとえば bundler 環境）で次のように

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

という形で取り込むやり方です。ただし、この方式を使う場合、アイコン画像パスや CSS 読み込み処理の設定に注意が必要です（バンドル環境に応じた設定）。

このチュートリアルでは、手軽で理解しやすい CDN 読み込み方式を中心に説明を進めます。

CSSで地図 div に高さ確保

地図を描画する #map 要素には高さがゼロだと表示されないので、必ず CSS で高さを指定する必要があります（vh 単位や固定 px 単位など）。

例として先に示した height: 80vh のような指定や、height: 500px などでも構いません。レスポンシブ対応を考えるなら、@media を使ってスマホ・PCで高さ調整をする方法も後で紹介します。

地図を表示する（ベースマップ設定）

ここから、実際に地図を画面に表示する手順を進めていきます。

地図初期表示位置とズームレベルの設定

main.js に以下のような基本コードを入れます。

function initMap() {
  // 観光地マップの初期中心位置（例：東京駅周辺）
  const centerLatLng = [35.681236, 139.767125]; // 緯度, 経度
  const initialZoom = 13;

  // 地図オブジェクト生成
  const map = L.map('map').setView(centerLatLng, initialZoom);

  // タイルレイヤー（OSM）を追加
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  }).addTo(map);

  // オプション: 他操作設定
  // map.zoomControl.setPosition('topright');
}

このコードを走らせると、#map の位置に地図が表示され、指定した中心とズームレベルで初期表示されます。

OpenStreetMap タイルの追加

上記の L.tileLayer(...) が OSM のタイルを地図に読み込む役割です。タイルの URL テンプレートとオプション（maxZoom, attribution など）を指定しています。

tlesLayer のオプションでは、以下のような設定がよく使われます：

• maxZoom: 最大ズームレベル
• minZoom: 最小ズームレベル
• attribution: 地図著作権表示
• subdomains: {s} に使うサブドメイン配列（例：['a','b','c']）
• tileSize, zoomOffset：タイルの仕様調整

属性表示（Attribution 表示）

タイルプロバイダー（この場合 OSM）には著作権表示義務（Attribution）があるため、地図下部などに必ず表示を行います。Leaflet の attribution オプションを使って設定可能です。

attribution:
  '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

このように HTML タグを使って地図表示元へのリンクを含む表記を記述します。

タイルサービス利用の注意（利用規約、負荷、キャッシュなど）

• 公式 OSM タイルサーバーの制約
  多くのプロジェクトでは、公式 OSM タイルサーバー（tile.openstreetmap.org）をそのまま商用サイトで使うのは推奨されません。過剰リクエスト時には制限が課される可能性があります。
• 代替タイル提供サービス
  Mapbox、Maptiler、Stadia Maps、Carto 等、有償または無料プランのタイルサービスを併用する手段があります。
• キャッシュ／CDN 利用
  プロキシキャッシュや CDN を使って、タイル取得負荷を軽減する構成が望まれます。
• リクエスト節約
  不要なズームレベルでの読み込みを制限したり、不要なレイヤー読み込みを遅延化（Lazy Load）する工夫が重要です。

マーカー配置とポップアップ表示

次は観光スポットをマーカーで表示し、クリック時に詳細情報を表示するようにします。

単一マーカーの追加とポップアップ

まずは簡単に、ひとつのマーカーを追加してポップアップを表示する例です。

// 地図 map が生成済とする
const marker = L.marker([35.6895, 139.6917]).addTo(map);
marker.bindPopup('<b>東京タワー</b><br>東京の有名な展望塔です。');

.bindPopup(...) でマーカーポップアップ内容を指定できます。.openPopup() をつけると初期表示時からポップアップ展開できます。

複数マーカーを配列で管理して追加

観光スポットが複数ある場合は、JavaScript の配列で管理し、ループでマーカーを生成する形が一般的です。

const spots = [
  {
    name: '東京タワー',
    desc: '東京の有名な展望塔です。',
    lat: 35.65858,
    lng: 139.745433,
  },
  {
    name: '浅草寺',
    desc: '浅草の歴史あるお寺。',
    lat: 35.714765,
    lng: 139.796655,
  },
  // 他スポット…
];

spots.forEach((spot) => {
  const marker = L.marker([spot.lat, spot.lng]).addTo(map);
  marker.bindPopup(`<b>${spot.name}</b><br>${spot.desc}`);
});

この形式であればスポット数が増えても拡張しやすくなります。

カスタムアイコンを使う

マーカーアイコンをオリジナルの画像に変更する例

const customIcon = L.icon({
  iconUrl: 'assets/icons/spot-icon.png',
  iconSize: [32, 37], // 幅・高さ（px）
  iconAnchor: [16, 37], // アイコンの尖った位置（マーカー先端）を基準点に
});

spots.forEach((spot) => {
  const marker = L.marker([spot.lat, spot.lng], { icon: customIcon }).addTo(map);
  marker.bindPopup(`<b>${spot.name}</b><br>${spot.desc}`);
});

アイコン画像のパスやサイズ調整を適切に行うことで、見栄えを改善できます。

ポップアップ内に HTML やリンクを入れる

ポップアップには HTML を自由に含められます。

marker.bindPopup(`
  <div>
    <h3>${spot.name}</h3>
    <img src="assets/images/${spot.image}" alt="${spot.name}" width="200">
    <p>${spot.desc}</p>
    <a href="${spot.url}" target="_blank">公式サイトへ</a>
  </div>
`);

画像やリンク、スタイルを入れることで、ユーザにとってリッチな情報を提示できます。

GeoJSON データの読み込みと表示

多数のスポット情報を管理するには、GeoJSON 形式でデータを扱うのが便利です。

GeoJSON とは何か

GeoJSON は地理空間情報を JSON で記述するデータフォーマットで、点（Point）、線（LineString）、面（Polygon）などを表現できます。属性情報（プロパティ）も含められるため、地図アプリでは扱いやすい形式です。

GeoJSON の構造例（観光スポット用）：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "東京タワー",
        "desc": "東京の有名な展望塔です。",
        "image": "tokyo-tower.jpg",
        "url": "https://www.tokyotower.co.jp/"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [139.745433, 35.65858]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "浅草寺",
        "desc": "浅草の歴史あるお寺。",
        "image": "sensouji.jpg",
        "url": "https://www.senso-ji.jp/"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [139.796655, 35.714765]
      }
    }
    // …他のスポット
  ]
}

注意：Leaflet は緯度・経度順 [lat, lon] ではなく、GeoJSON の座標は [longitude, latitude] の順で定義する点に注意する必要があります。

GeoJSON を使って観光スポット情報を保持する設計

data/spots.geojson に上記の形式でスポットを記述しておき、クライアント側でこれを取得してマップ上にレンダリングします。この設計により、データと表示ロジックを分離でき、後からスポットの追加・更新が容易になります。

L.geoJSON() による読み込みとマップへの配置

main.js に以下のようなコードを追加します。

function initMap() {
  // …地図初期化処理…

  // GeoJSON をフェッチして表示
  fetch('data/spots.geojson')
    .then((resp) => resp.json())
    .then((geojson) => {
      L.geoJSON(geojson, {
        onEachFeature: onEachSpotFeature,
      }).addTo(map);
    })
    .catch((err) => console.error('GeoJSON 読み込みエラー:', err));
}

// 各 Feature に対する処理
function onEachSpotFeature(feature, layer) {
  if (feature.properties && feature.properties.name) {
    const popupContent = `
      <div>
        <h3>${feature.properties.name}</h3>
        <p>${feature.properties.desc}</p>
        ${feature.properties.image ? `<img src="assets/images/${feature.properties.image}" width="200" />` : ''}
        ${feature.properties.url ? `<br><a href="${feature.properties.url}" target="_blank">公式サイト</a>` : ''}
      </div>
    `;
    layer.bindPopup(popupContent);
  }
}

このように、GeoJSON の各 Feature を L.geoJSON で読み込むと、自動的に適切な Leaflet レイヤー（この場合は点 → マーカー）として変換され、onEachFeature 関数でポップアップ処理などを設定できます。

onEachFeature によるポップアップバインド

onEachFeature(feature, layer) 関数は、GeoJSON の各 Feature に対して呼ばれ、layer（Leaflet 上のレイヤー）にポップアップやイベントをバインドできます。前述の例では layer.bindPopup(...) を使っています。

この関数をもっと拡張して、クリックイベントや mouseover／mouseout イベントなども設定できます。

スタイリング（スタイル関数）

GeoJSON のレイヤーにスタイルを与えることも可能ですが、点（Point）ではマーカーアイコンで代替することが多く、線・面（Polyline／Polygon）を描く用途で有効です。

たとえば、線（観光ルート）やエリア（観光エリア範囲）を GeoJSON で定義してスタイルを指定する例：

L.geoJSON(geojsonLineOrPolygon, {
  style: function(feature) {
    return {
      color: feature.properties.color || 'blue',
      weight: feature.properties.weight || 3,
      opacity: feature.properties.opacity || 0.7,
    };
  },
  onEachFeature: function(feature, layer) {
    if (feature.properties && feature.properties.name) {
      layer.bindPopup(feature.properties.name);
    }
  },
}).addTo(map);

観光地マップでは、線／エリアを使う機会はルート表示やエリアハイライトといった拡張部分で出てきます。

レイヤー制御、グループ化、絞り込み機能

L.layerGroup／L.featureGroup の活用

観光地マップでは、スポットの種類（例：史跡・自然・グルメなど）ごとにマーカーをまとめたい場面があります。Leaflet にはそのための機能として L.layerGroup() と L.featureGroup() が用意されています。

• L.layerGroup()：単純に複数レイヤー（マーカーなど）をまとめるためのコンテナ。
• L.featureGroup()：L.layerGroup に加え、グループ全体にイベント（クリック、mouseover など）を設定できる。

const historicalGroup = L.layerGroup();
const foodGroup = L.layerGroup();
const natureGroup = L.layerGroup();

// 各カテゴリに属するマーカーを追加
L.marker([35.71, 139.79]).bindPopup('浅草寺').addTo(historicalGroup);
L.marker([35.67, 139.77]).bindPopup('築地市場').addTo(foodGroup);
L.marker([35.68, 139.73]).bindPopup('日比谷公園').addTo(natureGroup);

// デフォルトでは全部表示
historicalGroup.addTo(map);
foodGroup.addTo(map);
natureGroup.addTo(map);

コントロール（レイヤー切り替え）を追加

Leaflet には地図上でレイヤーを切り替えるUI部品が標準で用意されています。
次のようにして、チェックボックス式のレイヤーコントロールを追加できます。

const baseMaps = {
  "OpenStreetMap": osmLayer,
  "OSM Humanitarian": humanitarianLayer,
};

const overlayMaps = {
  "史跡": historicalGroup,
  "グルメ": foodGroup,
  "自然": natureGroup
};

L.control.layers(baseMaps, overlayMaps).addTo(map);

これで地図右上にレイヤー選択ウィジェットが追加され、ユーザが表示・非表示を切り替えられるようになります。観光情報のカテゴリ分けに最適です。

UI制御でカテゴリごとに絞る

レイヤー切り替えの代わりに、HTML の <select> や <button> を使ってカテゴリごとに絞る方式もよく使われます。

<select id="category">
  <option value="all">すべて</option>
  <option value="historical">史跡</option>
  <option value="food">グルメ</option>
  <option value="nature">自然</option>
</select>

JavaScript 側ではイベントを監視して絞り込みを制御します。

document.getElementById('category').addEventListener('change', (e) => {
  const val = e.target.value;
  [historicalGroup, foodGroup, natureGroup].forEach(g => map.removeLayer(g));
  if (val === 'all' || val === 'historical') historicalGroup.addTo(map);
  if (val === 'all' || val === 'food') foodGroup.addTo(map);
  if (val === 'all' || val === 'nature') natureGroup.addTo(map);
});

UIと連携することで、より自然な操作感を実現できます。

フィルタリング機能の応用

GeoJSON データを大量に扱う場合、クライアント側でフィルタリングしてから描画する方法も有効です。

fetch('data/spots.geojson')
  .then(res => res.json())
  .then(json => {
    const filtered = json.features.filter(f => f.properties.category === 'historical');
    L.geoJSON({ type: 'FeatureCollection', features: filtered }).addTo(map);
  });

これにより、データを都度再描画する形で軽量に扱うこともできます。

ルート表示・ナビゲーション機能（応用）

ルート API の選定

Leaflet 自体には経路探索機能はありません。そのため、外部のルーティングサービスを利用します。代表的なものとして

ルート取得リクエスト

OpenRouteService の例を見てみましょう。
以下のようなエンドポイントに GET リクエストを送信します。

https://api.openrouteservice.org/v2/directions/foot-walking?api_key=YOUR_KEY&start=139.745433,35.65858&end=139.796655,35.714765

返却される JSON は GeoJSON 形式のルート情報を含んでおり、これを L.geoJSON() で表示可能です。

GeoJSON によるルート描画

fetch(url)
  .then(res => res.json())
  .then(data => {
    const route = data.features[0];
    L.geoJSON(route, {
      style: {
        color: 'red',
        weight: 4
      }
    }).addTo(map);
  });

これで、2地点間のルートが地図上に赤いラインで表示されます。

出発地・目的地の入力フォーム

ユーザーに自由に経路を指定させる場合は、HTML フォームを追加します。

<input id="start" placeholder="出発地（緯度,経度）">
<input id="end" placeholder="目的地（緯度,経度）">
<button id="routeBtn">ルート表示</button>

ボタンクリックで API にリクエストを送り、ルートを描画する仕組みです。
UIを工夫すれば、クリックで地点を選んだり、現在地を自動入力したりもできます。

複数ルート・案内表示

OpenRouteService などは複数ルート案を返すこともあり、これを切り替えて表示することで利便性を向上できます。
さらに、ルートの距離や所要時間をポップアップやサイドバーに表示すれば、簡易ナビとしても機能します。

インタラクティブ性を高める工夫

クリック・ズームイベントの活用

Leaflet では地図やマーカーに多数のイベントを設定できます。

map.on('click', function(e) {
  L.popup()
    .setLatLng(e.latlng)
    .setContent(`緯度: ${e.latlng.lat.toFixed(5)}, 経度: ${e.latlng.lng.toFixed(5)}`)
    .openOn(map);
});

地図をクリックした場所の座標を確認できるデバッグ用の機能として便利です。

現在地取得と追従

ブラウザの Geolocation API を使えば、現在地を取得して地図中心を自動移動できます。

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition((pos) => {
    const lat = pos.coords.latitude;
    const lng = pos.coords.longitude;
    map.setView([lat, lng], 15);
    L.marker([lat, lng]).addTo(map).bindPopup("現在地");
  });
}

旅行中にスマートフォンで使う観光マップでは特に有用です。

クラスター化

観光地が数百件を超えると、マーカーが重なり視認性が落ちます。
leaflet.markercluster プラグインを使うと、近接したマーカーをグループ化してまとめて表示できます。

const markers = L.markerClusterGroup();
spots.forEach((s) => {
  const m = L.marker([s.lat, s.lng]).bindPopup(s.name);
  markers.addLayer(m);
});
map.addLayer(markers);

クラスターをクリックするとズームして展開され、軽快な操作感が得られます。

UX 改善の小技

• マウスオーバーでスポット名をツールチップ表示
• マーカークリック時にスクロールを抑止
• flyTo() や panTo() を使ってスムーズに地図中心を移動
• ズームや回転をアニメーション化（モバイルでは特に効果的）

スマホ対応のポイント

地図は height: 100vh で全画面表示し、UIボタンは固定配置にします。
スマホではポップアップサイズを調整し、誤タップを防ぐ余白を設けると良いでしょう。

パフォーマンスと最適化

Leaflet は軽量ですが、データ量が多いと描画負荷が上がります。ここでは高速化のポイントを整理します。

タイルキャッシュ・CDN

タイル画像を自前でキャッシュするか、Maptiler などの CDN タイルを利用することで、レスポンスを大幅に改善できます。

GeoJSON の軽量化

• 不要な属性を削除
• 緯度経度を小数点4桁程度に丸める
• GeoJSON を分割して遅延読み込み

これによりデータ転送量を削減できます。

レンダリング最適化

マーカーが多すぎる場合は、すべてを一度に描画せず、ズームレベルに応じて表示数を制御します。

map.on('zoomend', () => {
  const zoom = map.getZoom();
  if (zoom < 10) {
    map.removeLayer(detailGroup);
  } else {
    map.addLayer(detailGroup);
  }
});

ズームレベル制限

あまり細かくズームできる必要がない場合、maxZoom を低めに設定すると、不要なタイルロードを防げます。

レイヤー遅延読み込み

スクロールやボタン操作で特定エリアに来たときだけデータを読み込む方式（Lazy Load）も有効です。

デプロイと運用上の注意点

HTTPS 必須

地図APIやGeolocation APIを利用するには、サイトがHTTPSである必要があります。
特に現在地取得はHTTP環境では動作しません。

タイルサーバーの選択

商用サービスでの安定運用には、次のような代替タイル提供元を検討します。

• Maptiler Cloud
• Stadia Maps
• Thunderforest
• CARTO Basemaps

それぞれスタイルや利用制限、価格体系が異なるため、用途に合わせて選定します。

APIキー管理

OpenRouteService などの外部APIを使う場合は、.env やサーバ側でキーを隠蔽するのが鉄則です。
フロントに直接埋め込むと不正利用のリスクが高まります。

モニタリングとログ

アクセスログやリクエスト数を可視化し、負荷が高い時間帯を把握することでタイル制限を回避しやすくなります。

著作権とライセンス表記

地図の下部に OSM のクレジット表記を残すことは必須です。
自作タイルを使う場合でも、元データが OSM の場合は「© OpenStreetMap contributors」と明記します。

完成例と拡張アイデア

完成例イメージ

完成したマップは、観光地スポットを色分けしたマーカーで表示し、クリックで写真・説明文を表示します。
ジャンル別の絞り込みUIと、ルート検索ボタンを併設することで、実用的な観光ナビとして機能します。

拡張アイデア

• レビュー機能：各スポットにコメントや評価を追加
• 写真ギャラリー：ポップアップにスライダーを埋め込み
• オフラインキャッシュ：PWA対応で一部キャッシュ
• 多言語化：Leaflet のラベルやUIを英語・中国語対応
• 時系列データ：季節イベントや期間限定情報を時間軸で管理

活用ケース

• 自治体や観光協会の案内サイト
• イベントマップ（花火大会・祭り）
• トレッキング／自転車ルート案内
• ショッピングモールや施設内マップ

まとめと次のステップ

Leaflet.js と OpenStreetMap を組み合わせることで、無料かつ柔軟な観光地マップを構築できました。
今回のポイントを整理します。

1. Leaflet の基礎構造：L.map() で地図を生成し、L.tileLayer() でOSMタイルを追加。
2. マーカーとポップアップ：L.marker() と .bindPopup() で地点情報を視覚化。
3. GeoJSON の利用：観光地データを分離し、柔軟に更新可能。
4. レイヤー管理：カテゴリごとにグループ化し、ユーザ操作で切り替え。
5. ルート描画：外部APIと組み合わせてナビゲーション実装。
6. パフォーマンスと運用：キャッシュ、API管理、著作権表記を徹底。

Leaflet はプラグインが豊富で、今後さらに機能拡張が可能です。
次のステップとしては以下を試すとよいでしょう。

• Leaflet Routing Machine を使った経路案内
• Turf.js による地理解析（距離計算・範囲抽出）
• Leaflet Search プラグインによる検索機能追加
• サーバ連携：バックエンドから GeoJSON を動的取得

この内容は、QGISを使ったGIS初心者でも再現できるよう、データ取得からWebマップ活用までまとめました。

QGISとは？概要と入手方法

QGISの概要

QGIS（キュージーアイエス）は、オープンソース・無料で利用できる地理情報システム（GIS）ソフトウェアです。国際的に普及しており、日本でも防災・インフラ・観光・登山など幅広い分野で使われています。

主な用途

• ラスタ（DEM標高データ）とベクタ（道路・登山道等）データ統合
• 標高プロファイルや等高線の自動生成
• 3D表示や俯瞰図作成
• Webマップ用データ作成

QGISの入手方法

Download · QGIS Web Site

qgis.org

インストールは「Long Term Release（長期安定版）」を推奨します。OSごとにインストーラーが用意されています。

必要なデータの取得

国土地理院DEM（基盤地図情報 数値標高モデル）

誘導ページ

fgd.gsi.go.jp

• 範囲を選択して5mまたは10mメッシュ（XML/GML形式）をダウンロード。
• 都市部は5m、郊外は10mが推奨です。

OpenStreetMapのルート・道路データ

▶ Overpass Turbo ：範囲指定・道路種別指定が可能。

▶ Geofabrik ：都道府県単位など広域データ（PBF形式）。

GeoJSONまたはShapefile形式で取得し、QGISへ読み込みます。

QGISによるDEM → OSMへの標高付与手順

1. DEM（GML形式）をGeoTIFFへ変換
   ・QGISで GML ファイルを読み込み。
   ・「ラスタ → ラスタデータセット変換」でGeoTIFF形式へエクスポート。
   ・座標系はEPSG:4326（WGS84） に変換統一。
   これにより、他ツールやWebマップでも扱いやすくなります。
   
2. OSMルートへの標高付与
   ・OSMから取得した登山道や道路のルートをQGISへ読み込み（GeoJSON等）。
   ・DEM（GeoTIFF）を読み込み。
   ・「ベクタ → ラスタ → ラスタ値抽出（サンプリング）」で標高値（Z座標）をルート上各頂点に付与。
   ・出力をGeoJSON形式とし、Z値（標高）を保持。
   
3. GeoJSONの出力イメージ
   

   {
     "type": "FeatureCollection",
     "features": [{
       "type": "Feature",
       "properties": {},
       "geometry": {
         "type": "LineString",
         "coordinates": [
           [139.6917, 35.6895, 123],
           [139.6927, 35.6905, 135],
           [139.6937, 35.6915, 140]
         ]
       }
     }]
   }
   

   このZ座標（3番目の数値）が標高（単位：m）です。

Webマップでの標高プロファイル表示【Leafletサンプル】

使用ライブラリ（CDN）

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet-elevation@0.0.4/dist/leaflet-elevation.min.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script>
<script src="https://unpkg.com/leaflet-elevation@0.0.4/dist/leaflet-elevation.min.js"></script>

地図＋標高プロファイル表示サンプル

<div id="map" style="height: 500px;"></div>
<script>
const map = L.map('map').setView([35.6895, 139.6917], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

const elevation = L.control.elevation({
    theme: "steelblue-theme",
    height: 125,
    detached: true
}).addTo(map);

fetch('route_with_elevation.geojson')
    .then(response => response.json())
    .then(geojson => {
        L.geoJSON(geojson, {
            onEachFeature: elevation.addData.bind(elevation)
        }).addTo(map);
    });
</script>

これで、ルート上に標高プロファイル（距離 vs 標高）が動的に表示され、マウスオーバーで該当地点がハイライトされます。

完成イメージと活用例

活用例

表示結果イメージ

1. OSM地図上にルート表示
2. 下部に標高プロファイル（距離 vs 標高）
3. マウスオーバーでルートと連携表示

関連リンクまとめ

本記事では、OSMとLeaflet、OSRMを組み合わせて「出発地から目的地までのルート」を地図上に表示する仕組みを、初心者向けに解説します。特に、自転車ナビや観光地案内サイト、キャンプ場や宿泊施設の周辺案内などに活用したい方におすすめです。

なぜOSRMを使うのか？

OSRMは非常に軽量・高速で、APIキーなしで試せるのが最大の利点です。APIリクエスト制限もありません（ただしパブリックAPIはあくまでテスト用と位置づけられています）。

本番用途では自前でサーバを構築することで、完全に独立したナビゲーションシステムを構築できます。

OSRMの基本API仕様

OSRMのパブリックAPIは以下のようなエンドポイントを使います：

https://router.project-osrm.org/route/v1/{profile}/{lon1},{lat1};{lon2},{lat2}?overview=full&geometries=geojson

実用サンプル：徒歩ルートを表示する

以下は東京駅から東京タワーまでの徒歩ルートをLeafletとOSRMで描画するHTMLサンプルです：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Leaflet + OSRM 徒歩ルート表示</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>#map { height: 500px; }</style>
</head>
<body>
  <div id="map"></div>

  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script>
    const map = L.map('map').setView([35.6764, 139.6993], 13); // 渋谷近辺

    // OpenStreetMapレイヤー
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    // 出発地と目的地（東京駅 → 東京タワー）
    const start = [35.681236, 139.767125];
    const end = [35.6586, 139.7454];

    // マーカー
    L.marker(start).addTo(map).bindPopup("出発地").openPopup();
    L.marker(end).addTo(map).bindPopup("目的地");

    // OSRM APIエンドポイント
    const url = `https://router.project-osrm.org/route/v1/foot/${start[1]},${start[0]};${end[1]},${end[0]}?overview=full&geometries=geojson`;

    fetch(url)
      .then(res => res.json())
      .then(data => {
        const route = data.routes[0].geometry;

        L.geoJSON(route, {
          style: {
            color: 'blue',
            weight: 5
          }
        }).addTo(map);

        map.fitBounds(L.geoJSON(route).getBounds());
      });
  </script>
</body>
</html>

応用：自転車ナビに切り替える

上記のサンプルでは foot（徒歩） を指定していますが、自転車ナビに切り替えるにはエンドポイントの一部を以下のように変更するだけです：

const url = `https://router.project-osrm.org/route/v1/bike/${start[1]},${start[0]};${end[1]},${end[0]}?overview=full&geometries=geojson`;

自転車ナビは自動車用の経路とは異なり、歩道やサイクリングロードを考慮したルートを表示してくれます。

地図クリックでルート計算（応用例）

Leafletの map.on('click', ...) を使えば、ユーザーが地図上をクリックしてルートの出発地・目的地を選べるインタラクティブなUIも作れます。サンプルコードが必要な場合はお知らせください。

よくあるトラブルと対策

自前でOSRMサーバを立てる方法（中級者向け）

より信頼性の高い運用や独自ルート定義を行いたい場合は、OSRMサーバを自前で構築することも可能です。Dockerでの立ち上げが一般的です：

docker run -t -i -p 5000:5000 osrm/osrm-backend osrm-routed --algorithm mld /data/japan-latest.osrm

日本用の .osm.pbf ファイルは Geofabrik から取得できます。

今後の拡張アイデア

まとめ

LeafletとOSRMを組み合わせれば、APIキー不要・無料で軽快なルート表示をWebサイトに実装できます。Google Mapsでは費用や制限がネックになるケースも、OSMエコシステムなら自由度が格段に広がります。

Web地図の可能性を、自分の手で広げてみましょう。シンプルな構成からはじめて、ぜひ“あなた専用の地図ナビ”へと育ててみてください。

そんなときに頼れるのが OpenStreetMap（OSM） と Leaflet.js の組み合わせです。本記事では、OSMの地図上に「ショップ」や「観光スポット」などをマーカーで表示する方法を、初心者にもわかりやすく解説します。

なぜOpenStreetMap＋Leafletなのか？

カスタマイズ性や軽さ、将来の拡張を考えるなら、Leaflet＋OSM の組み合わせは非常に強力です。

まずは地図を表示してみよう

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Leaflet × OpenStreetMap</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <style>
    #map { height: 500px; }
  </style>
</head>
<body>
  <h2>OpenStreetMap × Leafletで観光地マップ</h2>
  <div id="map"></div>

  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script>
    var map = L.map('map').setView([35.6895, 139.6917], 13); // 東京駅付近

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
  </script>
</body>
</html>

マーカーを追加してみよう（ショップや観光スポット）

// 観光地・スポット情報
var spots = [
  {
    name: "浅草寺",
    lat: 35.7148,
    lng: 139.7967,
    desc: "東京最古のお寺。雷門と仲見世通りが有名です。"
  },
  {
    name: "東京スカイツリー",
    lat: 35.7100,
    lng: 139.8107,
    desc: "高さ634m、日本一高いタワー。展望デッキからの眺望は圧巻。"
  },
  {
    name: "上野動物園",
    lat: 35.7160,
    lng: 139.7710,
    desc: "パンダで有名な動物園。ファミリーに人気。"
  }
];

// マーカー追加処理
spots.forEach(function(spot) {
  L.marker([spot.lat, spot.lng])
    .addTo(map)
    .bindPopup("<b>" + spot.name + "</b><br>" + spot.desc);
});

実際に地図上にクリック可能なマーカーが表示され、説明文付きの吹き出し（ポップアップ）が開きます。

アイコンをカスタムにしたいときは？

デフォルトのマーカーでは物足りない場合、以下のようにオリジナルのアイコン画像を設定できます。

var shopIcon = L.icon({
  iconUrl: 'https://example.com/icons/shop.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [0, -32]
});

L.marker([35.6895, 139.6917], { icon: shopIcon })
  .addTo(map)
  .bindPopup("ショップの名前");

※ 商用利用の画像は著作権に注意。

複数マーカーをカテゴリごとにまとめたいなら？

Leafletのレイヤーグループ機能を使えば、カテゴリごとにグループ化して表示・非表示を切り替えることも可能です。

詳しい実装方法はこちらのLeaflet公式チュートリアルをご参照ください。

Leaflet — an open-source JavaScript library for interactive maps

Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps.

leafletjs.com

注意点：OpenStreetMapの利用にはクレジット表示が必要です

Leaflet × OSMを使う際には、地図の下に以下のようなクレジットを表示する必要があります。

attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

これはライセンス上の義務ですので、必ず記載しましょう。

今後の応用アイデア（本記事では割愛）

• GeoJSONと連携して外部データをマーカーとして表示
• マーカーをクリックした際に詳細ページへジャンプ
• マップ上で検索やフィルターを実装

これらの応用については、別記事で詳しく紹介予定です。

おわりに

Google Mapsでは自由にできなかった地図の「見せ方」や「使い方」が、LeafletとOpenStreetMapを使うことで柔軟に実現できます。

自社サービスのマップ表示や、観光ブログ、ポータルサイトなど、「伝えたい場所がある」すべての人にとって、Leafletは非常に強力な武器になります。

はじめに：Google Mapsの壁にぶつかっていませんか？

「地図をWebアプリやサイトに表示したい」
「位置情報を使ったサービスを提供したい」
――そんなとき、多くの開発者が真っ先に思い浮かべるのがGoogle Maps APIでしょう。

Googleが提供するこのサービスは確かに強力ですが、年々厳しくなる利用制限や価格設定、APIキーの発行と制御など、商用利用や中〜大規模サービスの構築時には「コスト」と「制約」の壁にぶつかります。

たとえばこんな課題、心当たりはありませんか？

• 月額の無料枠を超えて突然発生する高額課金
• APIキーの管理やレート制限に神経を使う毎日
• サービス停止を恐れてキャッシュの工夫に追われる
• 「やりたいことができない」ライセンスの縛り

そんなあなたにこそ知ってほしいのが、自由と開放の象徴――OpenStreetMap（OSM）です。

OpenStreetMapとは？ 一言で言えば「みんなで作る、世界地図」

OpenStreetMap（以下OSM）は、イギリス発のオープンソース地図プロジェクトで、ユーザー自身が地図データを追加・編集・改善していけるのが最大の特徴です。

OSMの魅力は何といってもその「自由さ」です。

• 地図データはすべて無料で使える（商用利用OK）
• データの所有権は誰にも奪われない（データポータビリティ）
• データを加工・分析・再利用することができる（ライセンスの緩さ）

要するに「地図データという“資産”を、誰でも無償で使える」これがOSM最大の価値です。

Google MapsとOpenStreetMapの“決定的な違い”

ここで、Google Maps APIとOSMの主要な違いを一覧で見てみましょう。

コストゼロ、自由度100％――この対比がOSMを選ぶ理由になります。

「OpenStreetMapって扱いにくいんじゃないの？」という誤解

「自由すぎて逆に使いにくそう……」という声もあるかもしれません。

でも心配は無用。OSMを「Google Mapsと同じ感覚で使う」ための便利なライブラリが存在します。それが以下の2大ライブラリです。

• Leaflet.js：軽量・モバイル対応・直感的なJavaScriptライブラリ
• OpenLayers：高機能・GIS対応・大規模プロジェクト向け

中でもLeaflet.jsは初心者にも扱いやすく、コードも非常にシンプルです。

<div id="map" style="height: 400px;"></div>
<script>
  var map = L.map('map').setView([35.681236, 139.767125], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
  }).addTo(map);
</script>

これだけで、即座に地図表示ができます。Google MapsのようなAPIキー取得・課金登録・SDK初期化などは不要です。

どんな開発に向いている？ OSM活用シーンの例

1. 地図付きのブログや旅行記サイト

写真やエピソードに地図を添えることで説得力アップ。無料で使えるからPVに左右されず継続可能。

2. 不動産・店舗検索サイト

カスタムマーカーやルート表示も思いのまま。独自スタイルで見やすさもUP。

3. 災害支援アプリや避難所マップ

地域貢献型のアプリにも最適。自治体や市民団体でも活用されています。

4. 公共交通・ルート検索サービス

GTFS（公共交通データ）と組み合わせれば、複雑なルート表示も可能。

デメリットは？あえて正直に言うなら

OpenStreetMapにも課題はあります。以下が代表的なものです。

• 表示スタイルがやや地味：ただしスタイル変更・独自タイル導入で解決可能
• 公式サーバーの使用制限：大量アクセス用途には独自タイルサーバー構築が必要
• 一部地域で情報が不完全：ローカル情報はコミュニティ次第

とはいえ、これらの多くは「自分で制御できる」範囲にあります。Google Mapsのように「ルールに縛られる」のではなく「ルールを作れる」というのが大きな違いです。

コスト比較：商用開発における現実的な差

Google Maps APIは2025年現在、月200ドル分の無料枠を超えると以下の課金が発生します。

• 地図の表示：1,000回あたり7ドル
• ジオコーディング：1,000回あたり5ドル

月に20万回以上表示されるような中〜大規模サービスでは、月数十万円の請求が発生することもザラです。

一方でOSMは無料。タイルの表示も、Leafletや独自ホスティングで維持費ゼロまたは数千円レベルに抑えることができます。

よくある質問（FAQ）

Q. 商用サイトでも本当に無料で使えますか？
A. はい。ライセンス表示（©OpenStreetMap contributors）さえ守れば、商用利用も問題ありません。

Q. APIキーは必要ですか？
A. 不要です。地図表示もジオコーディングも、APIキー不要なライブラリやサービスがあります。

Q. 自社スタイルの地図が作れますか？
A. 可能です。TileMillやMapbox Studioなどを使えば完全なカスタム地図が作成できます。

まとめ：OSMは「地図開発の自由」を取り戻す鍵

地図を使った開発は、今やあらゆるWebサービスにおいて必要不可欠です。
ですが、その地図が“企業依存”である限り、あなたのサービスは自由ではありません。

OpenStreetMapは、誰でも・無料で・無制限に使える「インフラとしての地図」です。
それを支えるのは、世界中のユーザーが育てる地図データと、それを支えるオープンな開発コミュニティ。

Google Mapsのように簡単に使える一方で、自由度と持続可能性は段違い。
この機会に、あなたのサービスにも「地図の自由」を取り戻してみませんか？

標高データAPIの現状と課題

インターネット上には無料で利用できる標高データAPIがいくつか存在します。代表的なものを以下に挙げます（※APIリクエスト制限や有料プランへの誘導が多い点にご留意ください）。

1. Google Maps Elevation API
   • 無料枠あり。ただし1日あたり2,500リクエストまで。超過時は課金。
2. Open-Elevation API
   • 完全無料。ただしリクエスト遅延、運営不安定の報告あり。
3. Mapbox Terrain-RGB
   • 無料枠あり。高精度だが、商用利用ではプラン契約必須。
4. USGS Elevation Point Query Service
   • アメリカ国内限定。無料だが日本国内では未対応。
5. OpenTopography
   • 無料プランあり。リクエスト制限・APIキー取得が必要。

これらのAPIを利用すると手軽ですが、多くが利用規約やリクエスト制限に縛られ、継続運用コストや安定性に課題があります。そこで本記事では、API依存せず、自ら標高データを取得しOSMに組み込む手法を最終目標とします。

標高データの代表的提供元とその取得方法

国内における最も信頼性が高い標高データ提供元は国土地理院（GSI）の「基盤地図情報 数値標高モデル（DEM）」です。以下、主要な提供元との比較と、国土地理院を選ぶ理由をまとめます。

国土地理院を選ぶ理由

• 公的機関提供
  データの信頼性・正確性が高い
• ライセンス自由度
  商用・非商用問わず再配布や加工が可能
• 更新頻度
  最新の標高データが定期的に公開

国土地理院データ取得の手順

以下の手順で「基盤地図情報ダウンロードサービス」から数値標高モデルを入手します。

1. ブラウザで「基盤地図情報ダウンロードサービス」
   （https://service.gsi.go.jp/kiban/app/）にアクセス。
2. 「基盤地図情報」の一覧から「数値標高モデル」を選択し移動。
3. データ形式として1mメッシュ／5mメッシュ／10mメッシュを選択可能。
   • ※本記事ではバランスの取れた5mメッシュを選択します。
4. 地図上で埼玉県所沢市周辺を拡大し、スケールを2,000ピクセル程度に設定。
   タイル番号「533953」をクリックしてダウンロードリストに追加。
5. 「ダウンロード・解凍」ボタンを押下し、XML形式データ（100ファイル）が取得できることを確認。
6. ダウンロードした100ファイルの中から「FG-GML-5339-53-01-DEM5A-20250214.xml」をテキストエディタで開く。
7. <gml:tupleList>要素を探すと、33750個の標高データが並ぶリストが存在。

<gml:tupleList>のデータ構造と意味

<gml:tupleList>には、5mメッシュの各格子点に対応する標高値が「空白区切り」の数値として格納されています。33750という数字は、縦225点 × 横150点のグリッドに相当し、以下のように配列されています。

• 並び順：
  1行目の左上から右方向に150点分、
  続いて2行目の左端から右方向に150点分、
  …を繰り返して225行分。
• 解釈例：
  • 最初の数値＝タイル左上の標高（m）
  • 150番目の数値＝タイル上辺の右端標高
  • 151番目＝2行目左端の標高

5mメッシュタイルの面積計算

5mメッシュ1格子の面積：5m × 5m = 25㎡
タイル全体の格子数：33750点
→ タイル面積 = 25㎡ × 33750 = 843,750㎡（約0.844km²）

100ファイル分を用いると、所沢市を含むタイル群の合計面積を算出できます。
（例：東京多摩地域全体をカバーするエリアなど応用可能）

メッシュ解像度とサーバ要件

1mメッシュ

• データ量は5mメッシュの約25倍（225×5=1125行、150×5=750列→843,750点）
• 高性能なストレージ・メモリ・CPUが必須

5mメッシュ

• バランス良く用途が多いが、標高解析が多岐にわたる場合は尚更高性能環境が望ましい

10mメッシュ

• データ量はさらに軽量で、まずはこちらで運用実績を積み、パフォーマンス確認をおすすめします
• 次のステップアップとして5mメッシュ導入を検討

まとめ

本記事では、OSMに標高データを組み込むための前提知識と、国土地理院を活用したデータ取得手順、データ構造の解説、面積計算例、解像度別の運用提案までをご紹介しました。次回以降では、実際に取得したXMLデータをGeoJSONやタイル形式に変換し、Leaflet.js上で可視化するステップに進みます。

実際に地図を表示・操作するには、「Leaflet.js」のような地図ライブラリ（表示エンジン）が必要です。本記事では、

• なぜライブラリが必要なのか？
• なぜLeaflet.jsがおすすめなのか？
• 実際にOSMをHTMLに表示するサンプルコード
• JavaScriptコードの丁寧な解説

までを、初心者の方にもわかりやすく紹介していきます。

なぜOSMには地図表示用のライブラリが必要なのか？

OpenStreetMapは「地図を作るためのデータベース」です。たとえば、ある地点の緯度・経度、道路の形状、建物の位置などは持っていますが、

「Webページに地図を表示する機能」そのものは提供していません。

OSMが提供しているのは、「地図データ」や「タイル画像（地図の小さな画像）」です。それをどう表示するかは利用者側で実装する必要があるのです。

例えるなら…

• OSM：素材（野菜や肉など）
• Leaflet.js：料理を作るためのフライパンや調理法
• 完成したWebマップ：美味しい料理（ユーザーが見る地図）

つまり、OSMだけでは“見える”地図にならず、「表示するための道具（＝ライブラリ）」が必要なのです。

なぜLeaflet.jsをおすすめするのか？

地図ライブラリには他にもさまざまな選択肢があります

この中でも、OSMの表示にLeaflet.jsをおすすめする理由は以下の通りです。

Leaflet.jsの強み

1. 非常に軽量で高速（CDNで一発読み込み、サイズも小さい）
2. 設定がシンプル（地図の表示もマーカー追加も数行）
3. OSMタイルとの相性が抜群（デフォルトで利用可能）
4. コミュニティが活発で情報も多い
5. モバイル対応も標準装備（スマホでも快適に動く）

特に初心者や中小規模のWebサイト運営者にとって、手軽に地図を扱える安心感とカスタマイズの柔軟さが両立している点は他のライブラリにはない魅力です。

OpenStreetMapをLeaflet.jsで表示するサンプル

以下は、Leafletを使ってOSMをHTML上に表示する最小構成の実装例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>OpenStreetMap × Leaflet サンプル</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- LeafletのCSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <style>
    #map {
      height: 500px;
    }
  </style>
</head>
<body>

<h2>OpenStreetMap 地図表示サンプル</h2>
<div id="map"></div>

<!-- LeafletのJS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
  // 地図を表示する領域を指定
  var map = L.map('map').setView([35.681236, 139.767125], 13); // 東京駅の緯度・経度

  // OpenStreetMapのタイルレイヤーを設定
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors',
    maxZoom: 19
  }).addTo(map);

  // ピン（マーカー）を追加
  L.marker([35.681236, 139.767125]).addTo(map)
    .bindPopup('東京駅です')
    .openPopup();
</script>

</body>
</html>

JavaScript部分の解説

var map = L.map('map').setView([35.681236, 139.767125], 13);

• L.map('map')：IDがmapのdivに地図を表示
• .setView([緯度, 経度], ズーム)：初期表示位置とズーム設定

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors',
  maxZoom: 19
}).addTo(map);

• tileLayer()：地図のタイル画像を読み込むURLを設定（ここではOSM公式）
• {z}/{x}/{y}：ズームレベル・タイル座標を自動で置換して表示
• addTo(map)：このレイヤーを現在の地図に追加

L.marker([35.681236, 139.767125]).addTo(map)
  .bindPopup('東京駅です')
  .openPopup();

• marker()：指定した緯度・経度にマーカー（ピン）を置く
• bindPopup()：マーカーをクリックすると表示される吹き出し（ポップアップ）
• openPopup()：初期表示時に自動で吹き出しを開く

まとめ

この記事では、これからOpenStreetMapを初めて使う方に向けて、基本的な仕組みから、Google Mapsとの違い、技術的な面でのメリット・デメリット、そしてなぜOSMを選ぶべきなのか、将来性までをじっくり解説します。

OpenStreetMap（OSM）とは？

OpenStreetMap（オープンストリートマップ）とは、一言で言えば「みんなで作る地図」です。

• 誰でも自由に編集・利用できるオープンな地図データ
• 世界中のボランティアが手動で道路、建物、施設などを登録・修正
• 非営利団体「OSMF（OpenStreetMap Foundation）」が運営

つまり、OSMはWikipediaの地図版と捉えるとわかりやすいでしょう。商業サービスではないため、ライセンスや利用料の制限が少なく、商用利用もOK（条件あり）というのが大きな魅力です。

Google Mapsとの違いは？

Google MapsとOSMの違いは、地図の「提供主体」や「自由度」にあります。

Google Mapsは便利で強力なプラットフォームですが、制限も多く、料金体系も複雑です。対して、OSMは自由度が高く、自分で地図を“育てて”いくことも可能です。

技術的な違いと難易度は？

ここが多くの初心者がつまずくポイント。「Google MapsのAPIってコピペすれば地図が出るけど、OSMってちょっと難しそう…」という印象、ありますよね。

実はその印象、半分正解・半分誤解です。

Google Maps APIの特徴

• JavaScript SDKを使えば数行のコードで地図を表示可能
• 豊富なドキュメントとサンプルが揃っている
• ただしAPIキーが必須で、利用回数に応じて課金される

OSMを使うには？

OpenStreetMap自体には「表示用のAPI」は存在しません（主にデータ提供が目的）。表示には以下のような地図表示ライブラリを使います：

• Leaflet.js（初心者向け、軽量）
• OpenLayers（中〜上級者向け、高機能）
• MapLibre GL JS（Mapboxのオープン版）

これらを使って、OSMの地図タイル（地図画像）を読み込み、Webページに表示するという流れになります。

// Leafletの例（超シンプル）
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')

つまり、Leafletなどのツールを使えば、Google Mapsに劣らないくらい手軽にOSMを扱えるのです。

なぜOpenStreetMapを選ぶのか？

1. コストがゼロに近い
   • APIキー不要、表示回数に制限なし（タイル提供元の利用ポリシーには注意）
2. 地図の見た目をカスタマイズできる
   • スタイルを自分好みに変更可能（例：白黒地図、夜間モード、登山向け地図など）
3. データを修正・拡張できる
   • 地図に足りない要素を自分で追加・改善できる（例：お店の場所、歩道の情報）
4. プライバシーへの配慮
   • OSMは基本的にトラッキングを行わない。Google Maps APIはページ閲覧情報をGoogleに送る。
5. 災害時・地域支援にも活用されている
   • 例：東日本大震災・トルコ地震などでOSMの迅速な地図更新が支援活動に貢献

OpenStreetMapの将来性と世界での活用

OSMはもはや「マニア向け」ではありません。実際、世界中の企業・自治体・NPOがOSMを採用しています。

活用事例（一部）

• Facebook（Meta）
  ナビ・災害情報にOSMを利用
• UberやLyft
  一部地域のルート情報にOSMを導入
• 人道支援団体（HOT OSM）
  災害地域の即時地図更新
• 日本の自治体
  観光マップや自転車マップなどで活用

これらの背景には、「誰かに依存しない地図インフラが必要だ」という社会的な流れがあります。

OpenStreetMapをおすすめしないケース

あえて、OSMを「おすすめしないケース」も挙げておきます

1. 商用利用で超高精度なナビゲーションが必要な場合
   • OSMは地域によって精度が異なり、特に田舎や新興国では情報が古いことも
2. 地図の見た目や使い方を変更したくない／学習コストをかけたくない場合
   • Google Mapsなら、APIキーだけで簡単に使える利点がある
3. 膨大なアクセスが見込まれる場合
   • OSM公式タイルサーバには負荷をかけないよう注意が必要。自前でタイルホスティングする工夫が求められる

まとめ：OpenStreetMapは「自由をくれる地図」

Google Mapsは確かに便利ですが、使うには制限があり、場合によっては「閉じた世界」に感じることもあります。

一方のOpenStreetMapは、多少手間はかかりますが、使う人の意志で自由に形を変えられる「開かれた世界」です。

プログラマーだけでなく、登山家、旅人、福祉関係者、災害支援チーム——あらゆる人がOSMを活用しています。

あなたのプロジェクトにも、OSMの地図という「自由な地図の土台」を加えてみませんか？