Leaflet.jsを使ってお手軽に地図を表示させてみた
この記事は2025/06/01に作成されました。
サイトで地図を表示する手段といえば？と聞かれて「Google Mapの埋め込み？」と答えてしまうくらいには筆者はGoogle Mapに依存して過ごしてきたのですが、独自のピンを刺したりなどのカスタマイズをしたい場合Google Maps APIを使用しなければなりません。
この「Google Maps API」、無料枠を超えたら有料という形だったのが少し前に料金体制が変わってしまったので、できることなら別の無料ツールを使いたいな…と代替案を探して見つけたのが、今回紹介する Leaflet.js です。
Leaflet.js とは？
Leaflet.jsは無料で使えるjsライブラリ で、軽量かつシンプルな地図表示ができるのが特徴です。
Google Mapsとは異なり、地図のタイル画像にはOpenStreetMapなどのオープンデータを利用します。
実際に使ってみた
実装方法も非常にシンプルでLeaflet.jsを読み込んだあと、初期表示する地図の中心位置（緯度・経度） を指定するだけです。
<div id="map" style="height: 400px;"></div>
<script>
const map = L.map('map').setView([35.681236, 139.767125], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
</script>
これだけで、地図表示・ドラッグ移動・拡大／縮小（ズーム） まで基本操作が可能になります。
この状態をベースにカスタマイズしていくこともできます。
ピンを独自画像に変更する
デフォルトでは青いマーカーが表示されますが、オリジナルの画像をピンとして表示する ことも可能です。
const customIcon = L.icon({
iconUrl: 'pin.png',
iconSize: [32, 32], // サイズ
iconAnchor: [16, 32], // アイコンの位置基準
popupAnchor: [0, -32] // ポップアップの位置
});
L.marker([35.681236, 139.767125], { icon: customIcon }).addTo(map);
縮小時にサークル＋件数を表示する
地図を縮小した時に「エリアごとの件数」をサークルで表示するような表現も可能です。
Leaflet.jsのプラグイン「Leaflet.markercluster」を使うと簡単に実現できます。
// マップにピンを表示させたい場所をdataに格納
const data = [
{ lat: 35.681236, lng: 139.767125, name: '東京駅' },
{ lat: 35.689487, lng: 139.691706, name: '新宿駅' },
{ lat: 35.658034, lng: 139.701636, name: '渋谷駅' }
];
const markers = L.markerClusterGroup();
data.forEach(function(item) {
const marker = L.marker([item.lat, item.lng]);
markers.addLayer(marker);
});
map.addLayer(markers);
さいごに
いかがでしたか？
今回紹介した他にも様々なカスタマイズができるので、みなさんもぜひ調べて使ってみてくださいね
Leaflet.js：https://leafletjs.com
エンジニア/O.H
主にHTML、CSS、JavaScriptを使用してフロントエンドのコーディングを担当。プロジェクトによってはGoogle Apps Scriptを用いた開発や、CodeIgniterやVue.jsのフレームワークを使用したバックエンドも請け負う。
