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

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

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

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

```html
<!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>

```

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

![Screenshot 2023-03-20 at 18.24.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3291115/e4edfffb-5574-1280-923b-7d0f979930b4.png)
OpenStreetMapというマップを表示していて、真ん中のところにピンが打ってあります。ピンにはポップアップがついていて、「東京都　日本」と書いてあります。

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

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

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


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

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

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

```html
<!-- 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`地図のスタイルを定義する
```html
 <!-- 地図のスタイルを定義する -->
  <style>
    #map {
      width: 100%;
      height: 500px;
    }
  </style>
```
widthで横幅の大きさを指定して、heightで高さを指定します。


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

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


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

### `script`タグでJavascriptの処理をする
#### mapのオブジェクトを生成する。真ん中の地点を設定
```javascript
// 地図を表示する要素を指定し、地図の中心座標とズームレベルを設定
  const map = L.map('map').setView([35.6895, 139.6917], 13);
```
`L.map('map')`とすることで、表示する要素を設定できます。カッコの中にある'map'は先ほどの`div`タグのidにあった"map"と同じです。なので、極端な話、以下のようなコードでも成り立ちます。

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

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

#### タイルレイヤーを設定して、見た目の設定をする
```javascript
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を使っています。

#### マーカーを設定して、ピンを打つ
```javascript
// マーカーを追加する
  const marker = L.marker([35.6895, 139.6917]).addTo(map);
```
`L.marker()`でマーカーを設定します。Google Mapで出てくるような場所を示すピンみたいなものです。緯度と経度を指定して、`.addTo(map)`をしてあげると、地図にマーカーが表示されます。たくさん作るとたくさん表示されるので、ぜひ作ってみてください。

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


### 終わりに

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