Leafletを使って地理院地図を表示するだけの基本的なプログラムです。
地図の移動や拡大縮小などは、すべてLeafletが行ってくれます。
Leafletを使って地理院地図を表示するだけの基本的なプログラムです。
地図の移動や拡大縮小などは、すべてLeafletが行ってくれます。
Leafletを利用する場合、HTMLの<head>タグに、LeafletのJavaScriptのソースファイルとCSSファイルを参照するための指定を行います。 ソースは、ダウンロードしたファイルを指定しても構いませんし、Leafletのサーバのファイルを直接指定しても構いません。 私は、ダウンロードしたファイルを指定して利用しています。
<link rel="stylesheet" href="js/leaflet.css" />
<script src="js/leaflet.js"></script>
Leafletを利用する場合、HTMLの<body>タグには、地図を表示するためのdivタグを作成するだけです。 divタグには、idを設定し、このidをleafletに渡します。
<div id="map_container"></div>
divタグに、widthやheightスタイルを使ってサイズ指定をすれば、その範囲内に地図が表示されます。 地図を全画面に表示したい場合は、下記の様にスタイルを設定します。 Leafletのデフォルトでは、手のマウスカーソルになってしまいますので、デフォルトの矢印カーソルに戻しています。
#map_container {
position: absolute;
top:0; left:0; right:0; bottom:0;
cursor: default;
}
地図を表示するためには、HTML読込後に下記のソースを実行する必要があります。
私は、<body>タグのonloadイベントに登録した関数で実行しています。
最初に、LeafletのMapクラスで地図を作成し、TileLayerクラスで、表示する地図を指定します。
setViewメソッドでは、地図の中心位置の緯度経度とズームレベルを指定します。
サンプルプログラムでは、地理院地図で日本全体を表示するように設定しています。
let map = L.map('map_container');
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>"
}).addTo(map); // 地理院地図を表示
map.setView([37,136.5], 6); // 日本を表示
Leafletの特徴ですが、クラスを作成するときは、小文字で始まる名前で作成します。
ですから、L.mapや、L.tileLayerのAPI仕様を参照する場合は、大文字で始まるMapクラスや、TileLayerクラスの仕様を参照する必要があります。
「map = L.map」は「map = new L.Map」と同じ意味です。