LeafletでOpenStreetMapの地図を出力してみよう

更新日：2025-10-20

リーフレット(Leaflet)というJavaScriptのライブラリを活用して、オープンストリートマップ(OpenStreetMap)の地図を出力してみよう。

Leaflet - a JavaScript library for interactive maps

OpenStreetMap

オープンストリートマップは「みんなの手でつくる、自由な地図」の世界的な地図アプリケーションのプロジェクトで、世界中の誰もが地図を編集したり、新しい情報を追加したりできます。

誰でも無料で使ったり、印刷したり、加工したりすることもできます。

リーフレットというJavaScriptのライブラリを利用することで、自身のサイトにも地図を表示する事が出来るようになります。

今回はHTMLで書いたコード上でオープンストリートマップを呼び出してみます。

最初に地図を表示する時の中心位置をオープンストリートマップのページで調べておきます。

中心にした箇所で右クリックをして、アドレスを表示を選択します。

上の図のような検索結果が表示されますので、内部の下にある緯度経度の数値を記録しておきます。

今回であれば緯度(latitude：lat)が35.02522で、経度(longitude : lng)が135.76196になります。

自身のマシンでHTMLファイルを作成します。

今回はmap.htmlというファイルにし、Download - Leaflet - a JavaScript library for interactive mapsのUsing a Hosted Version of Leafletにあるコードを自身のコードにコピー・ペーストします。

※当記事の執筆時のLeafletのバージョンは1.9.4になります。

<!DOCTYPE html>
<html>
<head>
<title>Leaflet + OpenStreetMap</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
</head>
<body>
</body>
<script>
// ここにLeafletのコードを書く
</script>
</html>

※太字の箇所がLeafletの呼び出しのコードになります。

続いて、地図を呼び出す箇所を決めます。

bodyタグ内に書きのように地図出力用のコードを追加します。

<body>
<div id="map" style="width:400px;height:300px;"></div>
</body>

最後に先程挿入しました地図出力用のコードの箇所に地図を出力するためのコードを追加します。

scriptタグ内に下記のコードを追加します。

<script>
// オープンストリートマップのページで調べた緯度(lat)と経度(lng)を指定する。
let lat = 35.02522;
let lng = 135.76196;

// 地図描写時にどれくらい拡大表示するか？
let zoom = 15;

let map = L.map('map', {
	center: [lat,lng],
	zoom: zoom,
});

// オープンストリートマップの地図タイルを読み込むためのオブジェクトの作成。クレジット付き 
let tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
});
tileLayer.addTo(map);
</script>

コードを保存した後、フォルダでmap.htmlを探し、ダブルクリックをして作成しましたコードを実行してみます。

このような感じで地図が表示されたら成功です。

今回作成したコードは下記URLから確認できます。

https://github.com/inunosinsi/Leaflet_OpenStreetMap_Sample/blob/main/1.html

追記

inunosinsiというアカウントで、オープンストリートマップに参加しています。

https://www.openstreetmap.org/user/inunosinsi

LeafletでOpenStreetMapの地図を出力してみよう

About