メインコンテンツまでスキップ

Leafletで地図をデザインする

· 約3分

Leafletを使って地図をデザインする方法についての解説します。

Leafletの始め方​

Leafletとは

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

<div id="mapid"></div>
#mapid {
  height : 500px;
}
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);

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/leaflet@1.6.0/dist/leaflet.css">
<script src="https://unpkg.com/browse/leaflet@1.6.0/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で表示位置､ズームレベルを指定します｡

引数のパターン​

  1. map.setView([35,136], 16);
  2. map.setView({lon: 136, lat: 35}, 16);
  3. map.setView({lat: 35, lng: 136}, 16);
  4. map.setView(L.latLng(35,136), 16);

ズームレベルは地図の拡大率で数値が大きくなるほど拡大されます｡

tileLayerで地図タイルを読み込むことが出来ます｡​

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);

引数には地図タイルの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>

コメント

コメントはまだありません