Leaflet Quick Start Guide: 地図の表示

本ページは，leaflet のチュートリアルの Leaflet Quick Start Guide を日本語で簡単にまとめたものである．本ページではブラウザ上に地図を表示することまでを行う.

準備

HTML のヘッダ部において, Leaflet CSS を読み込む.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
     integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
     crossorigin=""/>

HTML のヘッダ部において, Leaflet JavaScript file を Leaflet CSS の後に書く.

<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
        integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
        crossorigin=""></script>

div 要素を入れる. id は適宜決める (以下では mapid とした). body 要素内の図を表示したい場所にこれを書き込むこと. 

<div id="mapid"></div>

地図の大きさを決める．

#mapid { height: 600px; }

地図のセットアップ

地図の緯度経度を指定する．最後の数字 (以下では 15) は地図の拡大率を示す．

var mymap = L.map('mapid').setView([35.495897, 133.025808], 15);

国土地理院の地図タイルを使う場合は，以下のように tileLayer に設定する．

// データソースは国土地理院
L.tileLayer(
    'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',  {
        attribution: '&copy; <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
    }).addTo(mymap);

まとめ

以下のような HTML を作成すると，松江高専付近の地図が表示されるはずである． <URL:leaflet-samples/> の leaflet-01.html をダウンロードして用いてみよ．

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex" />
  <title>Leafletチュートリアル</title>

  <!-- Leaflet's CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
        integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
        crossorigin=""/>

  <!-- Leaflet JavaScript file -->
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
          integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
          crossorigin=""></script>
  <style>
    #mapid { height: 600px; }
  </style>
</head>
<body>
<div id="mapid"></div>

<script>
  var mymap = L.map('mapid').setView([35.495897, 133.025808], 15);

  // データソースは国土地理院
  L.tileLayer(
      'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',  {
          attribution: '&copy; <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
      }).addTo(mymap);

</script>
</body>
</html>