【MapLibre GL JS】OpenStreetMapを表示する

## はじめに
この記事は#30DayMapChallenge2022 8日目の記事です。
テーマはOpenStreetMapです。
MapLibre GL JSを使ってOpenStreetMapのラスタータイルとベクトルタイルを表示してみます。

![image](https://raw.githubusercontent.com/tjukanovt/30DayMapChallenge/main/images/flyers/30dmc-2022.png)

https://30daymapchallenge.com/

## OpenStreetMapとは
自由に利用でき、なおかつ編集機能のある世界地図を作るプロジェクト
地球上のあらゆる地域がストリート単位の精度で描かれている
画像とベクトルデータセットはオープンデータベースライセンス (ODbL) 1.0のもと再利用可能

## ラスタータイル表示
ラスタータイルを表示してみます。

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

```style.css
body {
    margin: 0;
    padding: 0;
}
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
```

```main.js
var map = new maplibregl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {
            rtile: {
                type: 'raster',
                tiles: [
                    'https://tile.openstreetmap.jp/{z}/{x}/{y}.png',
                ],
                tileSize: 256,
                attribution:
                    '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
            },
        },
        layers: [
            {
                id: 'raster-tiles',
                type: 'raster',
                source: 'rtile',
                minzoom: 0,
                maxzoom: 22,
            },
        ],
    },
    center: [139.68786, 35.68355], // 中心座標
    zoom: 13, // ズームレベル
});
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667439/8e58793f-a5a8-0e31-1fb6-3c83c2e70a0f.png)


OpenStreetMap（ラスタータイル）を表示できました！

## ベクトルタイル表示
ベクトルタイルを表示してみます。

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

```style.css
body {
    margin: 0;
    padding: 0;
}
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667439/19aaf429-8264-a1c2-6c13-ca85d43aeef9.png)

OpenStreetMap（ベクトルタイル）を表示できました！

## 参考文献
https://openstreetmap.jp/

https://learnosm.org/ja/

https://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%88%E3%83%9E%E3%83%83%E3%83%97