LeafletはWeb地図サービスの為のオープンソースJavaScriptライブラリです。軽量で実装も簡単であり、カスタマイズ性も高く、使いやすいWeb地図ライブラリです。機能も十分に備わっています。
Leafletの特徴
- 商用・非商用共に無料で利用可能（著作権表示は必須）
- オープンソースなJavaScriptライブラリ
- プラグインが豊富でカスタマイズ性に富んでいる
- 動作が軽量
使い方
まず、HTMLファイルを作成し、css/jsファイルを読み込みます。
css/jsファイルをダウンロードして使用することも可能です。
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>次にbodyタグ内にdiv要素を追加します。高さの指定は必須です。
<div id="map" style="width:500px;height:500px"></div>style=”width:100%;height:100%”とすることで全画面表示に、更に、style=”position:absolute; top:0; bottom:0; right:0; left:0;”とすることで余白の無い全画面表示も可能です。
最後にJavascriptを書いていきます。
１．地図ライブラリの初期化
var _map = L.map('map');２．地図の初期表示位置の設定
地図の中心座標とズームレベルを指定します。以下は東京都庁を中心にズームレベル１０を設定した場合。
_map.setView([35.6895, 139.69172], 10);３．背景地図の設定
様々な機関が背景地図の提供サービスを実施しています。ここでは地理院タイルを利用します。地理院タイルは出典の明示のみで利用申請不要なので、出典は、「国土地理院」と記載し、地理院タイル一覧ページ（https://maps.gsi.go.jp/development/ichiran.html）へのリンクを付けます。背景地図は様々ありますが、まずは標準地図を利用してみましょう。
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);
全体コード
<html lang="ja">
<head>
<title>Leafletの基本</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="width:500px;height:500px"></div>
<script>
var _map = L.map('map');
_map.setView([35.6895, 139.69172], 10);
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);
</script>
</body>
</html>
コメント