State of chiitiler 2024

![mug-jp_logo_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/8d017f83-8e52-aee7-f6b2-8c75ccd7df34.png)

## はじめに

### MapLibreとは

MapLibre Official WebSite
https://maplibre.org

- Web地図に関するプロダクトをOSSとして開発・メンテナンスしているOrganizationです
- ブラウザ・モバイル向けの地図ライブラリおよび地図配信に関するツール群があります


### MapLibre User Group Japan (MUG-JP) とは

MUG-JP Official Web Site
https://mug-jp.org/

- MapLibreプロダクトの開発者によるユーザーコミュニティです
- ナレッジの共有やイベントの開催による普及活動を行なっています

## chiitiler

https://github.com/Kanahiro/chiitiler

- Node.jsで動作する「MapLibreラスタータイルサーバー」
- [TilerserverGL](https://github.com/maptiler/tileserver-gl)のオルタナティブ、サーバーレス環境への最適化を志向

chiitilerの紹介は過去の記事を参照してください。

https://qiita.com/Kanahiro/items/d8b7e9896b79e70ce825

本記事では最近追加された機能などの最新の動向を紹介します。

### ライブラリーモード

chiitilerは当初、公開しているコンテナイメージを利用してサーバーを起動するマイクロサービス的位置づけでした。既存システムと疎結合に使えるサーバー、とは聞こえが良いですが、コンセプトである「MapLibre Styleの入力に対しタイル画像を返す」という機能に対しては、**これは過剰です**。

`npm install chiitiler`でモジュールを追加して、**関数**としてタイルを生成出来たらうれしくないですか？（私はうれしかった）
ということで導入したのがライブラリーモードです。

#### 使い方

```sh
npm install chiitiler
```

```typescript
import {
    getRenderedBboxBuffer,
    getRenderedTileBuffer,
    ChiitilerCache
} from 'chiitiler';

// Optional: キャッシュ設定
const s3Cache = ChiitilerCache.s3Cache({
    bucket: 'chiitiler',
    region: 'ap-northeast-1',
    endpoint: null,
});
// credentials are loaded from environment variables: AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY

const tileBuf = await getRenderedTileBuffer({
    stylejson: 'https://example.com/style.json', // or StyleSpecification object
    z: 0,
    x: 0,
    y: 0,
    tileSize: 512,
    ext: 'webp', // png, webp, jpg
    cache: s3Cache,
    quality: 80,
    margin: 0,
});

const bboxBuf = await getRenderedBboxBuffer({
    stylejson: 'file://path/to/style.json', // or StyleSpecification object
    bbox: [123.4, 34.5, 124.5, 35.6],
    size: 1024,
    cache: s3Cache,
    ext: 'webp',
    quality: 80,
});

// Bufferが得られるのであとは良しなに
// TIPS: getRenderedTile()ならsharpのStreamが得られる
```

このAPIにより、既存のサーバーに統合できたり、サーバー以外のNode.jsスクリプトにも導入することが可能となります。なお、実行時の依存関係がファットなことには注意してください([Dockerfile](https://github.com/Kanahiro/chiitiler/blob/main/Dockerfile))。

### Cloud Optimized GeoTIFFのサポート（experimental）

https://github.com/geomatico/maplibre-cog-protocol

このライブラリにインスパイアされ、chiitilerで`cog://`プロトコルをサポートしました。なお実験的な機能なので突如消すかもしれません。

https://spatialty-io.github.io/chiitiler-demo/?stylename=cog#6.14/38.963/4.409

論より証拠、上記のデモページでは、chiitilerはAWSがホスティングしているSentinel-2のCOGを直接参照して、タイル画像として配信しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/6f6dcd4b-ddd7-78d8-7dc2-d0ec6f8cd96a.png)

以下のようなスタイルを定義することで利用できます。

```javascript
{
    version: 8,
    sources: {
        cog: {
            type: 'raster',
            tiles: [
                'cog://https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/54/T/WN/2024/9/S2A_54TWN_20240908_0_L2A/TCI.tif/{z}/{x}/{y}',
            ],
        },
    },
    layers: [
        {
            id: 'cog',
            type: 'raster',
            source: 'cog'
        },
    ],
}
```

注意点ですが、EPSG:3857のCOGでないと、正しい位置にレンダリングされません。なのでEPSG:4326のSentinel-2の画像が地中海に表示されています（ほんとは北海道のデータ）。

### Production Ready (!?)

https://zenn.dev/mierune/articles/d16af7ca873e14

筆者所属のMIERUNEでは無料で使える地図タイルを配信しています。
今年に裏側をリプレイスしていて、そこではchiitilerを使っています。
現状までで不都合は起きていません。AWS Lambdaで運用しているのでコストも非常に安いです。

<i>～Production Ready～</i>ともマッチポンプとも言えます

## 終わりに

当初、chiitilerの目標はサーバーレス環境で動作するTileserverGLでしたが、最近は[MapServer](https://mapserver.org/)を代替できるのではないかと考えています。MapLibre Style Specificationの表現力なら可能だと考えています。現状、使っているのは筆者だけな可能性大ですが、今後の発展にご期待ください！