ブログやサービスに地図を掲載する際、「Google Mapsは有料化が進んで使いにくい…」「もっと自由に使える地図が欲しい…」と感じたことはありませんか？
そんなときに頼れるのが OpenStreetMap（OSM） と Leaflet.js の組み合わせです。本記事では、OSMの地図上に「ショップ」や「観光スポット」などをマーカーで表示する方法を、初心者にもわかりやすく解説します。
なぜOpenStreetMap＋Leafletなのか？
| 比較項目 | OpenStreetMap（＋Leaflet） | Google Maps |
|---|---|---|
| 利用料金 | 無料 | 商用利用はAPI数に応じて課金 |
| カスタマイズ性 | 非常に高い（HTML＋JSで自由に制御可能） | 制限あり（API依存） |
| 表示スタイルの変更 | タイルやアイコンを自由に差し替え可能 | スタイル変更に制限あり |
| 著作権・商用表示制限 | クレジット表示すれば自由に使える | Googleの規約順守が必要 |
| 軽量さ・速度 | 高速。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: '© <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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
これはライセンス上の義務ですので、必ず記載しましょう。
今後の応用アイデア（本記事では割愛）
- GeoJSONと連携して外部データをマーカーとして表示
- マーカーをクリックした際に詳細ページへジャンプ
- マップ上で検索やフィルターを実装
これらの応用については、別記事で詳しく紹介予定です。
おわりに
Google Mapsでは自由にできなかった地図の「見せ方」や「使い方」が、LeafletとOpenStreetMapを使うことで柔軟に実現できます。
自社サービスのマップ表示や、観光ブログ、ポータルサイトなど、「伝えたい場所がある」すべての人にとって、Leafletは非常に強力な武器になります。
コメント