Leaflet を使って地図を表示する

Leaflet は Web地図のためのJavaScriptライブラリである。

下記を参考に地図を表示するavaScriptプログラムを作成する。

上記の記事では「ロンドン」にマーカーを表示しているが、

今回は「横浜」にマーカーを表示する。

内陸の「ロンドン」よりも

東京湾沿いの「横浜」の方が地図として分かりやすい。

var lat = 35.444167;
var lon = 139.638056;
var ZOOM = 10;
var mymap = L.map('mapid');
mymap.setView([lat, lon], ZOOM);
 var marker = L.marker([lat, lon]).addTo(mymap);
  marker.bindPopup("<b>Yokohama, Japan</b>").openPopup();

地図タイル

Leafletは JavaScriptライブラリであり、地図タイルは提供していない。

上記の記事では地図タイルの提供元に「 Mapbox」を使用している。

Mapbox はウェブサイト、アプリケーション向けの大規模プロバイダである。

また、Mapboxは「Leaflet」などのオープンソースの地図ライブラリやアプリケーションを開発もしくは主要作成者である。

今回の記事では地図タイルの提供元に「OpenStreetMap」を使用する。

OpenStreetMap は自由に利用でき、なおかつ編集機能のある世界地図を作る共同作業プロジェクトである。

「Mapbox」ではアカウントを作成して「Access tokens」を取得する必要があるが、

OpenStreetMap」では不要である。

var layer_osm = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: "Map data © <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
});
layer_osm.addTo(mymap);

OpenStreetMap タイル利用規約

下記に地図タイルの提供元の一覧がある。

XYZ Tiles（地図タイル）のURL一覧

地理院タイル

地図タイルの提供元として「国土地理院」が利用できます。

Leaflet などのライブラリを用いたサンプルが提供されている。開発者目線のありがたい記事です。

地理院タイルを用いたサイト構築サンプル集

様々な地図タイルが提供されている。航空写真もある。

地理院タイル一覧

下記に表示例がある。

沼津高専: ウェブで国土地理院の地図を見る

国土地理院コンテンツ利用規約

地図タイルを切り替える

Leaflet には地図タイルを切り替える「Layers Control」という機能がある。

Leaflet utorials: Layer Groups and Layers Control

下記の３つの地図タイルを切り替える - OpenStreetMap
- 地理院タイル(標準地図)
- 地理院タイル(航空写真)

//OpenStreetMap
var layer_osm = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: "Map data © <a href='https://www.openstreetmap.org/copyright' target='_blank'>OpenStreetMap</a> contributors"
});
//地理院タイル(標準地図)
var layer_gsi = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
  attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
});
//地理院タイル(航空写真)
var layer_gsi_photo = new L.tileLayer(
    'https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', 
    {
      attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>-電子国土基本図(オルソ画像)-"
     });
//３つの地図タイルを持つbaseMapsを作る
var baseMaps = {
    "OpenStreetMap"  : layer_osm,
    "GSI Standard" : layer_gsi,
    "GSI Photo" : layer_gsi_photo,
};
//Layers Controlに設定する
      L.control.layers(baseMaps).addTo(mymap);

プログラムは Github に公開した。

https://github.com/ohwada/World_Countries/tree/main/leaflet/yokohama_japan