MapLibre GL JS入門

## MapLibre GL JSとは
- オープンソースのJavaScript地図ライブラリ
- Mapboxのオープンソースフォーク版
- WebGLを使用してベクトルタイルとMapLibreスタイルからインタラクティブなマップをレンダリングできる

## 導入
- HTMLのheadタグ内にMapLibre GL JSのcssとJavaScriptを指定する
    - 執筆当時の最新バージョンは2.4.0だった
```html
<script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
```

## 背景地図表示
HTML, CSS, JavaScriptファイルを作成する

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>サンプル</title>
    <meta name="description" content="サンプルです">
    <link href="style.css" rel="stylesheet">
    <!-- MapLibre -->
    <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
</head>
<body>
    <div id="map"></div>
    <script src="main.js"></script>
</body>
</html>
```
- headタグ内にMapLibre GL JSのcssとJavaScriptを指定する
- 地図を配置したい場所に、あるidのdiv要素を配置する
    - 今回は、idがmapのdiv要素に地図を埋め込む


```style.css
html, body{
    height: 100%;
 }
  
#map{
   height: 100%;
}
```
- 高さを指定しないと地図が表示されないので注意

```main.js
var map =  new maplibregl.Map({
    container: 'map',
    style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
    center: [139.8108103, 35.7100069], // 中心座標
    zoom: 16, // ズームレベル
    pitch: 0 // 傾き
})
```

- id=mapの要素に対して、mapオブジェクトを作成する
- 中心の座標とズームレベルを設定する
    - 座標は経度、緯度の順で指定する
- pitchを設定することで初期表示時の傾きを変えることができる
- スタイルにはOpenStreetMapのベクトルタイルを指定して、背景地図を表示する

![スクリーンショット 2022-10-23 230250.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667439/bedd8d9d-38b8-6bb3-9113-4fa51a32e93f.png)

- 東京スカイツリー周辺の地図を表示できました～

## アイコン表示
JavaScriptファイルをいじっていきます。

```diff_javascript
var map =  new maplibregl.Map({
    container: 'map',
    style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
    center: [139.8108103, 35.7100069], // 中心座標
    zoom: 16, // ズームレベル
    pitch: 0 // 傾き
})

+ var marker = new maplibregl.Marker()
+   .setLngLat([139.8136911, 35.709058])
+   .addTo(map);
```

- markerオブジェクトを作成する
- 座標は経度、緯度の順で指定する

![スクリーンショット 2022-10-23 231103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667439/ea6f66f2-27eb-6c07-c3dc-4525bf169b8f.png)

アイコンを表示できました！
MapLibreのデフォルトのマーカーアイコン、可愛いですね
これだけだとさみしいのでポップアップも表示してみましょう

```diff_javascript
var map =  new maplibregl.Map({
    container: 'map',
    style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
    center: [139.8108103, 35.7100069], // 中心座標
    zoom: 16, // ズームレベル
    pitch: 0 // 傾き
})

+var popup = new maplibregl.Popup({
+      offset: 25, // ポップアップの位置
+      closeButton: false, // 閉じるボタンの表示
+   })
+   .setText('テスト');

var marker = new maplibregl.Marker()
    .setLngLat([139.8136911, 35.709058])
+   .setPopup(popup)
    .addTo(map);
```

- ポップアップを定義します
    - offsetでポップアップの位置を調整できます
    - closeButtonをTrueにすると閉じるボタンが表示され、Falseにすると表示されません
- マーカーにポップアップをバインドします
![スクリーンショット 2022-10-23 232557.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667439/a3dc0d99-c9dc-c4e8-441c-07b6bdbf96c1.png)

アイコンをぽちっとクリックするとポップアップが表示されるようになりました～


## 参考文献
https://maplibre.org/about/

https://maplibre.org/maplibre-gl-js-docs/api/

https://maplibre.org/maplibre-gl-js-docs/example/add-a-marker/

https://maplibre.org/maplibre-gl-js-docs/example/set-popup/

https://wiki.openstreetmap.org/wiki/Japan/OSMFJ_Tileserver