leafletを使って地図を表示させる方法〜初心者向け〜 #JavaScript

今回はleafletを使って地図を表示させる方法について紹介していきます。

主な言語としてはJavascriptを使う予定ですが、HTML文章のscriptタグを使ってLeafletを実装する方法を示します。

まず初めに、完成のコードは以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Leaflet地図サンプル</title>
  <!-- LeafletのCSSファイルを読み込む -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <!-- LeafletのJavaScriptファイルを読み込む -->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <!-- 地図のスタイルを定義する -->
  <style>
    #map {
      width: 100%;
      height: 500px;
    }
  </style>
</head>
<body>

<div id="map"></div>

<script>
  // 地図を表示する要素を指定し、地図の中心座標とズームレベルを設定
  const map = L.map('map').setView([35.6895, 139.6917], 13);

  // OpenStreetMapをタイルレイヤーとして追加
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  // マーカーを追加する
  const marker = L.marker([35.6895, 139.6917]).addTo(map);
  // ポップアップを追加する
  marker.bindPopup('<b>東京都</b><br>日本').openPopup();
</script>

</body>
</html>

表示されるものとしては、以下のようものになります。

OpenStreetMapというマップを表示していて、真ん中のところにピンが打ってあります。ピンにはポップアップがついていて、「東京都　日本」と書いてあります。

今回は地図の表示と、ピンの打ち方について学んでいきます。

手順としては以下の通りになります。

linkタグでleafletのcssのファイルとscriptタグでJavaScriptのファイルを読み込む
style地図のスタイルを定義する
divタグで、地図を入れるための要素を用意する
scriptタグでJavascriptの処理をする
- mapのオブジェクトを生成する。真ん中の地点を設定
- タイルレイヤーを設定して、見た目の設定をする
- マーカーを設定して、ピンを打つ
- ピンに浮かんでくるポップアップを追加する

それでは1つ1つ解説していきます。

初めに、headタグに入れるものから紹介します。

`link`タグでleafletのcssのファイルとJavaScriptのファイルを読み込む

<!-- LeafletのCSSファイルを読み込む -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  <!-- LeafletのJavaScriptファイルを読み込む -->
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

指定されたURLを設定して、読み込みます。行数は少ないですが、ここがないと何も動きませんので、忘れずに書いてください。

`style`地図のスタイルを定義する

 <!-- 地図のスタイルを定義する -->
  <style>
    #map {
      width: 100%;
      height: 500px;
    }
  </style>

widthで横幅の大きさを指定して、heightで高さを指定します。

以上の二つの要素が、headタグの中に記述するものです。

次からは、bodyタグの中に記述するものです。

`div`タグで、地図を入れるための要素を用意する

 <div id="map"></div>

divタグである必要性はありませんが、mapを表示するための場所が必要です。今回はidが"map"である要素に地図を入れるので、このように記述しています。

`script`タグでJavascriptの処理をする

mapのオブジェクトを生成する。真ん中の地点を設定

// 地図を表示する要素を指定し、地図の中心座標とズームレベルを設定
  const map = L.map('map').setView([35.6895, 139.6917], 13);

L.map('map')とすることで、表示する要素を設定できます。カッコの中にある'map'は先ほどのdivタグのidにあった"map"と同じです。なので、極端な話、以下のようなコードでも成り立ちます。

 <div id="mapaaaa"></div>

// 地図を表示する要素を指定し、地図の中心座標とズームレベルを設定
  const map = L.map('mapaaaa').setView([35.6895, 139.6917], 13);

そして、.setView()によって、表示する地図の中心座標とズームレベルを設定できます。中心座標は、配列の中の左が緯度、右が経度で指定できます。ズームレベルは今回は13としていますが、数字が大きくなるほど拡大して、小さくなるほど縮小していきます。試してみてください。

タイルレイヤーを設定して、見た目の設定をする

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

L.tileLayer()という関数を使って見た目の設定をしています。今回はOpenStreetMapを使っています。

マーカーを設定して、ピンを打つ

// マーカーを追加する
  const marker = L.marker([35.6895, 139.6917]).addTo(map);

L.marker()でマーカーを設定します。Google Mapで出てくるような場所を示すピンみたいなものです。緯度と経度を指定して、.addTo(map)をしてあげると、地図にマーカーが表示されます。たくさん作るとたくさん表示されるので、ぜひ作ってみてください。

ピンに浮かんでくるポップアップを追加する

// ポップアップを追加する
  marker.bindPopup('<b>東京都</b><br>日本').openPopup();

最後に、さっき作成したmarkerに.bindPopup()をつけるとピンに浮かんでくる、説明文のようなポップアップを追加することができます。今回は「'<b>東京都<br>日本'」としていますが、中身はMarkdown記法で書かれています。「東京都」という文字を大文字にしてから、<br>で改行をして、「日本」という文字を表示しています。

終わりに

以上で、leafletを使って地図を表示させる方法の説明を終わりにします！
お疲れ様でした。

leafletを使って地図を表示させる方法〜初心者向け〜

linkタグでleafletのcssのファイルとJavaScriptのファイルを読み込む

style地図のスタイルを定義する

divタグで、地図を入れるための要素を用意する

scriptタグでJavascriptの処理をする