marker | takeHo（たけほ）のへなちょこ台帳 https://blog.takeho.com いわゆる自由帳ってところです。 Thu, 26 Jun 2025 08:54:59 +0000 ja hourly 1 https://wordpress.org/?v=6.6 https://blog.takeho.com/wp-content/uploads/2024/08/icon-150x150.png marker | takeHo（たけほ）のへなちょこ台帳 https://blog.takeho.com 32 32 なぜLeaflet.js？OpenStreetMapを表示するために必要な理由と具体的サンプル解説 https://blog.takeho.com/why-leaflet-js-why-it-is-necessary-to-display-openstreetmap-and-concrete-sample-explanation/ https://blog.takeho.com/why-leaflet-js-why-it-is-necessary-to-display-openstreetmap-and-concrete-sample-explanation/#respond Sat, 07 Jun 2025 05:29:07 +0000 https://blog.takeho.com/?p=1083 OpenStreetMap（以下、OSM）は、自由に使える地図データとして人気が高まっていますが、「OSMを使って地図を表示したい」と思っても、そのままではWebページに表示することはできません。

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

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

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

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

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

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

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

例えるなら…

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

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

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

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

ライブラリ特徴
Leaflet.js軽量、学習コスト低、初心者向け
OpenLayers高機能（GIS向け）、やや複雑
MapLibre GL JS3Dやベクトルタイルに強い、比較的新しい
CesiumJS3D地球・宇宙向け、非常に高機能

この中でも、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: '&copy; 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()：初期表示時に自動で吹き出しを開く

まとめ

]]> https://blog.takeho.com/why-leaflet-js-why-it-is-necessary-to-display-openstreetmap-and-concrete-sample-explanation/feed/ 0