パントレ開発部

【Leaflet入門】地図を表示する方法と基本的な使い方

Map

 サイトやブログにカスタマイズした地図を載せたい時がありますが、そんなときに Leaflet は有効なツールの一つです。このページでは Leaflet の基本的な使い方について説明します。

はじめに

 Web サイトに地図をカスタマイズして埋め込む場合、Google Map だと料金や著作権が問題となってきます。ここで Google Maps の代わりとなるのが Leaflet です。Leaflet とは JavaScript のライブラリで、自由度の高いカスタマイズを行うことができる上、オープンソースの地図を参照すれば著作権の問題も緩和されます。OpenLayers や MapLibre など他のライブラリも有りますが、それらと比較して簡単なコードでかけて、プラグインも充実しています。歴史がありユーザー数も多いので、ネット上に情報が沢山あることも良いところです。

 今回はそんな Leaflet の導入方法について簡単に説明します。
 

Leaflet の導入方法

 自分で JavaScript と HTML を使って表示させる方法について説明します。

 まず HTML ファイルを作成して、Leaflet の CSS と JavaScript ファイルを読み込みます。CSS、JavaScript の順に記載します。integrity の欄がありますが、CDN(Leaflet を保存しているネット上の空間)でのセキュリティの為に必要との事です。

<!-- 以下LeafletのJavaScriptとCSS -->
<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>

 次に、マップを表示させるエリアを div タグで定義します。z-index はサイトのデザインに応じて設定してください。

<!-- 埋め込みマップのdivタグ。マップサイズはwidth(幅)とheight(高さ)で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>

 JavaScript でマップの表示領域を指示します。ちなみに「map」 という変数を定義していますが、「Map」と変数名を設定しない方が良いです。「Uncaught TypeError : Map is not a constructor」というエラーが出ます。

const map = L.map('mapcontainer');
map.setView([43.66, 142.146], 6); //初期の中心位置とズームレベルを設定

 マップタイル(地図の画像)を OpenStreetMap のサーバーから参照します。マップタイルについてはこちらに利用規約の概要をまとめました。

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {attribution: "<a href='http://osm.org/copyright'> ©OpenStreetMap </a>"}).addTo(map);

 全体のソースコードと実装例は以下の通りです。

<!DOCTYPE html>
<html>
<head>
<title>htmlMap</title>
<meta http-equiv='content-type' charset='utf-8'>
<meta name='viewport' content='width=device-width'>
</head>
<body>
<!-- 埋め込みマップのdivタグ。マップサイズはwidth(幅)とheight(高さ)で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>
<!-- 以下LeafletのJavaScriptとCSS -->
<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>

<script>
function init_map() {
    const map = L.map('mapcontainer');

    //初期の中心位置とズームレベルを設定
    map.setView([43.66, 142.146], 6); 

    //マップタイルを読み込み、引用元を記載する
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
        {attribution: "<a href='http://osm.org/copyright'> ©OpenStreetMap </a>"}
    ).addTo(map);
}

//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());

</script>
</body>
</html>

実装例

 

マーカーを追加する

 マップ上にマーカーを追加するには、次のように記述します。

L.marker([緯度,経度]).addTo(map);

 しかしこのままだと、マップ上にマーカーが配置されるだけなので、マーカーを長押し(右クリック)すると、別ウインドウで Google Maps が開くようにしてみます。

L.marker([緯度, 経度])
    .on('contextmenu', function(e){
        window.open( "https://www.google.co.jp/maps/place/"+e.latlng.lat+","+e.latlng.lng+"/@"+e.latlng.lat+","+e.latlng.lng+",15z/data");
    }).addTo(map);

 長押し(右クリック)のようなイベントは他にもあり、代表的なものを以下にまとめます。

項目内容
clickマーカーをタップ(クリック)した時に発火
dblclickマーカーダブルクリックした時に発火
contextmenuマーカーを長押し(右クリック)した時に発火
mouseoverマウスをマーカーにかざしたときに発火
mouseoutマウスがマーカーから離れたときに発火

 例えばマーカーをクリックすると別ページにジャンプするようにしてあげると、旅ブログやグルメブログなどは見やすくなって良いかもしれません。プラグインも多いので、いろいろとカスタマイズしていくのも面白そうです。

 全体のソースコードと実装例は以下の通りです。

<!DOCTYPE html>
<html>
<head>
<title>htmlMap</title>
<meta http-equiv='content-type' charset='utf-8'>
<meta name='viewport' content='width=device-width'>
</head>
<body>
<!-- 埋め込みマップのdivタグ。マップサイズはwidth(幅)とheight(高さ)で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>

<!-- 以下LeafletのJavaScriptとCSS -->
<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>

<script>
function init_map() {
    const map = L.map('mapcontainer');
    map.setView([39.198, 138.603], 4);

    //マップタイルを読み込み、引用元を記載する
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
        {attribution: "<a href='http://osm.org/copyright'> ©OpenStreetMap </a>"}
    ).addTo(map);
    
    //マーカーの配置
  L.marker([35.301, 136.138]).on('contextmenu', function(e){
       window.open( "https://www.google.co.jp/maps/place/"+e.latlng.lat+","+e.latlng.lng+"/@"+e.latlng.lat+","+e.latlng.lng+",15z/data");
   }).addTo(map);
}

//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());

</script>
</body>
</html>

実装例

 

スケールバーを追加する

 以下の1行を追加すれば、スケールバーが表示されます。

L.control.scale().addTo(map);

 デフォルトの状態ではマイル/フィート表記もあるので、メートル表記のみにするには、以下のように記載します。

L.control.scale({imperial: false, metric: true}).addTo(map);

 スケールバーの位置を変更するためには、以下のように記載します。

L.control.scale({imperial: false, metric: true, position: 'topright'}).addTo(map);

 全体のソースコードと実装例は以下の通りです。

<!DOCTYPE html>
<html>
<head>
<title>htmlMap</title>
<meta http-equiv='content-type' charset='utf-8'>
<meta name='viewport' content='width=device-width'>
</head>
<body>
<!-- 埋め込みマップのdivタグ。マップサイズはwidth(幅)とheight(高さ)で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>

<!-- 以下LeafletのJavaScriptとCSS -->
<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>

<script>
function init_map() {
    const map = L.map('mapcontainer');
    map.setView([43.66, 142.146], 6);

    //マップタイルを読み込み、引用元を記載する
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
        {attribution: "<a href='http://osm.org/copyright'> ©OpenStreetMap </a>"}
    ).addTo(map);

    //スケールバーを追加する
    L.control.scale({imperial: false, metric: true}).addTo(map);
}

//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());

</script>
</body>
</html>

実装例

 

関連記事

 GUI で Leaflet の HTML/JavaScript を生成するツールはこちら。

 Leaflet、MapLibre、OpenLayers の比較はこちら。

 MapLibre についてはこちら。

 

ちょっと宣伝

 当サイトは Web 地図を積極的に用いた海外旅ブログまとめサイトとなっています。トップページに地図がありますが、地名を押すと画像が開き、画像を押すと関連記事一覧(クリック数順)が開きます。記事数が多い国ほど赤く、地名もその国で記事が多い都市の文字が大きくなるようにしています。ぜひ覗いてみてください。
 当サイトで海外旅ブログを執筆することも可能です(もちろん無料です)! また既にブログをお持ちの方も、当サイトからリンクを貼ることができるようになっています。パントレ開発部までお気軽にお問い合わせください。


 このページが皆様のプログラミングの一助となりますことをお祈りいたします

パントレ開発部