[Javascript] Leafletの始め方

Leafletとは

簡単にWebページ上に地図を表示させることが出来るJavascriptライブラリです

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

CDNからライブラリを読み込む

<!-- cdnjs -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
<!-- unpkg -->
<link rel="stylesheet" href="https://unpkg.com/browse/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/browse/[email protected]/dist/leaflet.js"></script>

地図を表示させたい所にid付きのdivを置く

divに高さを設定しないと高さ0の地図となり､地図が表示されません｡ 

<div id="mapid" style="height:500px;"></div>

Mapを初期化し､国土地理院の地図タイルを挿入

let map= L.map('mapid');
map.setView([35.1709194,136.8793482], 16);

L.mapでMapを初期化します
引数にはidの他HTMLElementも指定できます

setViewで表示位置､ズームレベルを指定します｡
　　引数のパターン
　　　①map.setView([35,136], 16);
　　　②map.setView({lon: 136, lat: 35}, 16);
　　　③map.setView({lat: 35, lng: 136}, 16);
　　　④map.setView(L.latLng(35,136), 16);
ズームレベルは地図の拡大率で数値が大きくなるほど拡大されます｡

let tile = 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>',
    minZoom:2,
    maxZoom:18,
});
map.addLayer(tile);

tileLayerで地図タイルを読み込むことが出来ます｡
引数には地図タイルのURLを指定します､
今回は国土地理院の基本測量成果標準地図を利用したいので
国土地理院HPに記載されているURLを入れます｡

attributionには出典を表示します｡
｢ご利用について｣にあるように国土地理院の名称と地理院タイルへのリンクを設定します｡

minZoomとmaxZoomでズームレベルを制限します｡
今回利用する国土地理院の標準地図は[2-4,5-8,9-11,12-14,15-17,18]が用意されていますので､最小の2と最大の18を指定します｡

tileLayerをMapにaddLayerで追加することにより地図が表示されます｡

まとめ

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
    <title>国土地理院 標準地図</title>
</head>
<body>
    <div id="mapid" style="height:500px;"></div>
    <script>
        let map= L.map('mapid');
        map.setView([35.1709194,136.8793482], 16);
        let tile = 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>',
            minZoom:2,
            maxZoom:18,
        });
        map.addLayer(tile);
    </script>
</body>
</html>

コメント