chiitiler 0.0.1

package/.dockerignore

@@ -0,0 +1,3 @@
+node_modules/
+.cache/
+dist/

package/Dockerfile

@@ -0,0 +1,14 @@
+FROM maptiler/tileserver-gl
+
+USER root
+WORKDIR /app/
+COPY package*.json /app/
+RUN npm install
+COPY . .
+
+# Lambda WebAdapter
+COPY --from=public.ecr.aws/awsguru/aws-lambda-adapter:0.7.1 /lambda-adapter /opt/extensions/lambda-adapter
+ENV PORT=3000
+ENV READINESS_CHECK_PATH=/health
+
+CMD ["npm", "start"]

package/README.md

@@ -0,0 +1,27 @@
+# chiitiler - Tiny VectorTile rendering server
+
+chii-tiler
+
+"tiny" in Japanese is "chiisai", shorten this into "chii"
+
+## motivation
+
+- In this type of server, there is a de-facto - [maptiler/tileserver-gl](https://github.com/maptiler/tileserver-gl), but this is too big for me.
+- I want a server accept style.json-url and respond raster tile, inspired by [developmentseed/titiler](https://github.com/developmentseed/titiler)
+
+## status
+
+- this project is under development and experiment
+
+## usage
+
+```sh
+npm install
+npm start
+
+# then server will start
+# http://localhost:3000/debug
+```
+
+- You can pass style.json url:
+    - http://localhost:3000/debug?url=https://tile.openstreetmap.jp/styles/osm-bright/style.json

package/dist/cache/file.js

@@ -0,0 +1,54 @@
+import * as fs from 'fs';
+import * as path from 'path';
+function escapeFileName(url) {
+    return url
+        .replace(/https?:\/\//, '') // remove protocol
+        .replace(/\//g, '_') // replace slashes with underscores
+        .replace(/\?/g, '-') // replace question marks with dashes
+        .replace(/&/g, '-') // replace ampersands with dashes
+        .replace(/=/g, '-') // replace equals signs with dashes
+        .replace(/%/g, '-') // replace percent signs with dashes
+        .replace(/#/g, '-') // replace hash signs with dashes
+        .replace(/:/g, '-') // replace colons with dashes
+        .replace(/\+/g, '-') // replace plus signs with dashes
+        .replace(/ /g, '-') // replace spaces with dashes
+        .replace(/</g, '-') // replace less than signs with dashes
+        .replace(/>/g, '-') // replace greater than signs with dashes
+        .replace(/\*/g, '-') // replace asterisks with dashes
+        .replace(/\|/g, '-') // replace vertical bars with dashes
+        .replace(/"/g, '-') // replace double quotes with dashes
+        .replace(/'/g, '-') // replace single quotes with dashes
+        .replace(/\?/g, '-') // replace question marks with dashes
+        .replace(/\./g, '-') // replace dots with dashes
+        .replace(/,/g, '-') // replace commas with dashes
+        .replace(/;/g, '-') // replace semicolons with dashes
+        .replace(/\\/g, '-'); // replace backslashes with dashes
+}
+const fileCache = function (options) {
+    return {
+        set: async function (key, value) {
+            // write file
+            return new Promise((resolve, reject) => {
+                fs.writeFile(path.join(options.dir, escapeFileName(`${key}`)), value, (err) => {
+                    if (err)
+                        reject(err);
+                    resolve();
+                });
+            });
+        },
+        get: async function (key) {
+            // read file
+            return new Promise((resolve, reject) => {
+                // check exist
+                if (!fs.existsSync(path.join(options.dir, escapeFileName(`${key}`))))
+                    return resolve(undefined);
+                fs.readFile(path.join(options.dir, escapeFileName(`${key}`)), (err, data) => {
+                    if (err)
+                        reject(err);
+                    resolve(data);
+                });
+            });
+        },
+    };
+};
+export { fileCache };

package/dist/cache/index.js

@@ -0,0 +1,24 @@
+import { memoryCache } from './memory.js';
+import { s3Cache } from './s3.js';
+import { fileCache } from './file.js';
+const getCache = function (strategy, options = {}) {
+    if (strategy === 'none') {
+        return {
+            get: async () => undefined,
+            set: async () => undefined,
+        };
+    }
+    else if (strategy === 'memory') {
+        return memoryCache();
+    }
+    else if (strategy === 'file') {
+        return fileCache({ dir: options['file:dir'] ?? './.cache' });
+    }
+    else if (strategy === 's3') {
+        return s3Cache({ bucket: options['s3:bucket'] ?? '' });
+    }
+    else {
+        throw new Error(`Invalid cache strategy: ${strategy}`);
+    }
+};
+export { getCache, };

package/dist/cache/memory.js

@@ -0,0 +1,12 @@
+const MEMORY_CACHE_KVS = {};
+const memoryCache = function () {
+    return {
+        set: async function (key, value) {
+            MEMORY_CACHE_KVS[key] = value;
+        },
+        get: async function (key) {
+            return MEMORY_CACHE_KVS[key] ?? undefined;
+        },
+    };
+};
+export { memoryCache };

package/dist/cache/s3.js

@@ -0,0 +1,10 @@
+// TODO: implement
+const s3Cache = function () {
+    return {
+        set: async function (key, value) { },
+        get: async function (key) {
+            return undefined;
+        },
+    };
+};
+export { s3Cache };

package/dist/cache.js

@@ -0,0 +1,80 @@
+// TODO: other cache implementation
+const getCache = function (strategy) {
+    if (strategy === 'none') {
+        return {
+            get: async () => undefined,
+            set: async () => undefined,
+        };
+    }
+    else if (strategy === 'memory') {
+        return memoryCache;
+    }
+    else if (strategy === 'file') {
+        return fileCache;
+    }
+    else {
+        throw new Error(`Invalid cache strategy: ${strategy}`);
+    }
+};
+const MEMORY_CACHE_KVS = {};
+const memoryCache = {
+    set: async function (key, value) {
+        MEMORY_CACHE_KVS[key] = value;
+    },
+    get: async function (key) {
+        return MEMORY_CACHE_KVS[key] ?? undefined;
+    },
+};
+import * as fs from 'fs';
+import * as path from 'path';
+function escapeFileName(url) {
+    return url
+        .replace(/https?:\/\//, '') // remove protocol
+        .replace(/\//g, '_') // replace slashes with underscores
+        .replace(/\?/g, '-') // replace question marks with dashes
+        .replace(/&/g, '-') // replace ampersands with dashes
+        .replace(/=/g, '-') // replace equals signs with dashes
+        .replace(/%/g, '-') // replace percent signs with dashes
+        .replace(/#/g, '-') // replace hash signs with dashes
+        .replace(/:/g, '-') // replace colons with dashes
+        .replace(/\+/g, '-') // replace plus signs with dashes
+        .replace(/ /g, '-') // replace spaces with dashes
+        .replace(/</g, '-') // replace less than signs with dashes
+        .replace(/>/g, '-') // replace greater than signs with dashes
+        .replace(/\*/g, '-') // replace asterisks with dashes
+        .replace(/\|/g, '-') // replace vertical bars with dashes
+        .replace(/"/g, '-') // replace double quotes with dashes
+        .replace(/'/g, '-') // replace single quotes with dashes
+        .replace(/\?/g, '-') // replace question marks with dashes
+        .replace(/\./g, '-') // replace dots with dashes
+        .replace(/,/g, '-') // replace commas with dashes
+        .replace(/;/g, '-') // replace semicolons with dashes
+        .replace(/\\/g, '-'); // replace backslashes with dashes
+}
+const FILE_CACHE_DIR = './.cache';
+const fileCache = {
+    set: async function (key, value) {
+        // write file
+        return new Promise((resolve, reject) => {
+            fs.writeFile(path.join(FILE_CACHE_DIR, escapeFileName(`${key}`)), value, (err) => {
+                if (err)
+                    reject(err);
+                resolve();
+            });
+        });
+    },
+    get: async function (key) {
+        // read file
+        return new Promise((resolve, reject) => {
+            // check exist
+            if (!fs.existsSync(path.join(FILE_CACHE_DIR, escapeFileName(`${key}`))))
+                return resolve(undefined);
+            fs.readFile(path.join(FILE_CACHE_DIR, escapeFileName(`${key}`)), (err, data) => {
+                if (err)
+                    reject(err);
+                resolve(data);
+            });
+        });
+    },
+};
+export { getCache, fileCache };

package/dist/server.js

@@ -0,0 +1,139 @@
+/// <reference lib="dom" />
+// for using native fetch in TypeScript
+import { Hono } from 'hono';
+import { serve } from '@hono/node-server';
+import sharp from 'sharp';
+import { getRenderer } from './tiling.js';
+import { getCache } from './cache/index.js';
+const cache = getCache('file');
+const hono = new Hono();
+hono.get('/health', (c) => {
+    return c.body('OK', 200);
+});
+hono.get('/tiles/:z/:x/:y_ext', async (c) => {
+    // path params
+    const z = Number(c.req.param('z'));
+    const x = Number(c.req.param('x'));
+    let [_y, ext] = c.req.param('y_ext').split('.');
+    const y = Number(_y);
+    if (['png', 'jpg', 'webp'].indexOf(ext) === -1) {
+        return c.body('Invalid extension', 400);
+    }
+    // query params
+    const tileSize = Number(c.req.query('tileSize') ?? 512);
+    const noSymbol = c.req.query('noSymbol') ?? false; // rendering symbol is very slow so provide option to disable it
+    const onlySymbol = c.req.query('onlySymbol') ?? false;
+    const url = c.req.query('url') ?? null;
+    if (url === null) {
+        return c.body('url is required', 400);
+    }
+    // load style.json
+    let style;
+    const cachedStyle = await cache.get(url);
+    if (cachedStyle === undefined) {
+        const res = await fetch(url);
+        style = await res.json();
+        cache.set(url, Buffer.from(JSON.stringify(style)));
+    }
+    else {
+        style = (await JSON.parse(cachedStyle.toString()));
+    }
+    if (noSymbol) {
+        style = {
+            ...style,
+            layers: style.layers.filter((layer) => layer.type !== 'symbol'),
+        };
+    }
+    else if (onlySymbol) {
+        style = {
+            ...style,
+            layers: style.layers.filter((layer) => layer.type === 'symbol'),
+        };
+    }
+    const { render } = getRenderer(style, { tileSize });
+    const pixels = await render(z, x, y);
+    const image = sharp(pixels, {
+        raw: {
+            width: tileSize,
+            height: tileSize,
+            channels: 4,
+        },
+    });
+    let imgBuf;
+    if (ext === 'jpg') {
+        imgBuf = await image.jpeg({ quality: 20 }).toBuffer();
+    }
+    else if (ext === 'webp') {
+        imgBuf = await image.webp({ quality: 100 }).toBuffer();
+    }
+    else {
+        imgBuf = await image.png().toBuffer();
+    }
+    return c.body(imgBuf, 200, {
+        'Content-Type': `image/${ext}`,
+    });
+});
+hono.get('/debug', (c) => {
+    //demo tile
+    const url = c.req.query('url') ?? 'https://demotiles.maplibre.org/style.json';
+    return c.html(`<!-- show tile in MapLibre GL JS-->
+
+  <!DOCTYPE html>
+  <html>
+      <head>
+          <meta charset="utf-8" />
+          <title>MapLibre GL JS</title>
+          <!-- maplibre gl js-->
+          <script src="https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.js"></script>
+          <link
+              rel="stylesheet"
+              href="https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.css"
+          />
+          <style>
+              body {
+                  margin: 0;
+                  padding: 0;
+              }
+              #map {
+                  position: absolute;
+                  top: 0;
+                  bottom: 0;
+                  width: 100%;
+              }
+          </style>
+      </head>
+      <body>
+          <div id="map" style="height: 100vh"></div>
+          <script>
+              const map = new maplibregl.Map({
+                  hash: true,
+                  container: 'map', // container id
+                  style: {
+                      version: 8,
+                      sources: {
+                          chiitiler: {
+                              type: 'raster',
+                              tiles: [
+                                  'http://localhost:3000/tiles/{z}/{x}/{y}.png?url=${url}',
+                              ],
+                          }
+                      },
+                      layers: [
+                          {
+                              id: 'chiitiler',
+                              type: 'raster',
+                              source: 'chiitiler',
+                              minzoom: 0,
+                              maxzoom: 22,
+                          }
+                      ],
+                  },
+                  center: [0, 0], // starting position [lng, lat]
+                  zoom: 1, // starting zoom
+              });
+          </script>
+      </body>
+  </html>
+  `);
+});
+serve({ port: 3000, fetch: hono.fetch });

package/dist/tiling.js

@@ -0,0 +1,92 @@
+/// <reference lib="dom" />
+// for using native fetch in TypeScript
+import mbgl from '@maplibre/maplibre-gl-native';
+// @ts-ignore
+import SphericalMercator from '@mapbox/sphericalmercator';
+import { getCache } from './cache/index.js';
+const cache = getCache('file');
+function getTileCenter(z, x, y, tileSize = 256) {
+    const mercator = new SphericalMercator({
+        size: tileSize,
+    });
+    const px = tileSize / 2 + x * tileSize;
+    const py = tileSize / 2 + y * tileSize;
+    const tileCenter = mercator.ll([px, py], z);
+    return tileCenter;
+}
+function getRenderer(style, options = { tileSize: 256 }) {
+    const render = function (z, x, y) {
+        /**
+         * zoom(renderingOptions): tileSize=256 -> z-1, 512 -> z, 1024 -> z+1...
+         * width, height(renderingOptions): equal to tileSize but:
+         * when zoom=0, entire globe is rendered in 512x512
+         * even when tilesize=256, entire globe is rendered in "512x512 at zoom=0"
+         * so we have to set 512 when tilesize=256 and zoom=0, and adjust ratio
+         */
+        const renderingParams = options.tileSize === 256 && z === 0
+            ? {
+                zoom: 0,
+                height: 512,
+                width: 512,
+                ratio: 0.5,
+            }
+            : {
+                zoom: z - 1 + Math.floor(options.tileSize / 512),
+                height: options.tileSize,
+                width: options.tileSize,
+                ratio: 1,
+            };
+        const map = new mbgl.Map({
+            request: function (req, callback) {
+                // TODO: better Caching
+                cache.get(req.url).then((val) => {
+                    if (val !== undefined) {
+                        // hit
+                        callback(undefined, { data: val });
+                    }
+                    else {
+                        fetch(req.url)
+                            .then((res) => {
+                            if (res.status === 200) {
+                                res.arrayBuffer().then((data) => {
+                                    cache.set(req.url, Buffer.from(data));
+                                    callback(undefined, {
+                                        data: Buffer.from(data),
+                                    });
+                                });
+                            }
+                            else {
+                                // empty
+                                callback();
+                            }
+                        })
+                            .catch((err) => {
+                            callback(err);
+                        });
+                    }
+                });
+            },
+            ratio: renderingParams.ratio,
+            mode: "tile" /* MapMode.Tile */,
+        });
+        map.load(style);
+        const renderOptions = {
+            zoom: renderingParams.zoom,
+            width: renderingParams.width,
+            height: renderingParams.height,
+            center: getTileCenter(z, x, y, options.tileSize),
+        };
+        return new Promise((resolve, reject) => {
+            map.render(renderOptions, function (err, buffer) {
+                if (err)
+                    reject(err);
+                resolve(buffer);
+                map.release();
+            });
+        });
+    };
+    return {
+        render,
+    };
+}
+export { getRenderer };

package/package.json

@@ -0,0 +1,35 @@
+{
+  "type": "module",
+  "name": "chiitiler",
+  "version": "0.0.1",
+  "description": "",
+  "main": "dist/server.js",
+  "scripts": {
+    "build": "tsc",
+    "start": "tsc && node ./dist/server.js",
+    "prepare": "npm run build"
+  },
+  "bin": {
+    "chiitiler": "./dist/server.js"
+  },
+  "keywords": [],
+  "author": "Kanahiro Iguchi",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^20.6.0",
+    "maplibre-gl": "^3.3.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.1.1",
+    "@mapbox/sphericalmercator": "^1.2.0",
+    "@mapbox/tilebelt": "^1.0.2",
+    "@maplibre/maplibre-gl-native": "^5.2.0",
+    "@napi-rs/canvas": "^0.1.44",
+    "@tsconfig/node18": "^18.2.1",
+    "fast-png": "^6.2.0",
+    "hono": "^3.6.0",
+    "sharp": "^0.32.5"
+  }
+}

package/src/cache/file.ts

@@ -0,0 +1,71 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { type Cache, type Value } from './index.js';
+
+function escapeFileName(url: string) {
+    return url
+        .replace(/https?:\/\//, '') // remove protocol
+        .replace(/\//g, '_') // replace slashes with underscores
+        .replace(/\?/g, '-') // replace question marks with dashes
+        .replace(/&/g, '-') // replace ampersands with dashes
+        .replace(/=/g, '-') // replace equals signs with dashes
+        .replace(/%/g, '-') // replace percent signs with dashes
+        .replace(/#/g, '-') // replace hash signs with dashes
+        .replace(/:/g, '-') // replace colons with dashes
+        .replace(/\+/g, '-') // replace plus signs with dashes
+        .replace(/ /g, '-') // replace spaces with dashes
+        .replace(/</g, '-') // replace less than signs with dashes
+        .replace(/>/g, '-') // replace greater than signs with dashes
+        .replace(/\*/g, '-') // replace asterisks with dashes
+        .replace(/\|/g, '-') // replace vertical bars with dashes
+        .replace(/"/g, '-') // replace double quotes with dashes
+        .replace(/'/g, '-') // replace single quotes with dashes
+        .replace(/\?/g, '-') // replace question marks with dashes
+        .replace(/\./g, '-') // replace dots with dashes
+        .replace(/,/g, '-') // replace commas with dashes
+        .replace(/;/g, '-') // replace semicolons with dashes
+        .replace(/\\/g, '-'); // replace backslashes with dashes
+}
+
+type fileCacheOptions = {
+    dir: string;
+};
+const fileCache: (options: fileCacheOptions) => Cache = function (options) {
+    return {
+        set: async function (key: string, value: Value) {
+            // write file
+            return new Promise((resolve, reject) => {
+                fs.writeFile(
+                    path.join(options.dir, escapeFileName(`${key}`)),
+                    value,
+                    (err: any) => {
+                        if (err) reject(err);
+                        resolve();
+                    },
+                );
+            });
+        },
+        get: async function (key: string): Promise<Value | undefined> {
+            // read file
+            return new Promise((resolve, reject) => {
+                // check exist
+                if (
+                    !fs.existsSync(
+                        path.join(options.dir, escapeFileName(`${key}`)),
+                    )
+                )
+                    return resolve(undefined);
+
+                fs.readFile(
+                    path.join(options.dir, escapeFileName(`${key}`)),
+                    (err: any, data: Buffer) => {
+                        if (err) reject(err);
+                        resolve(data);
+                    },
+                );
+            });
+        },
+    };
+};
+
+export { fileCache };

package/src/cache/index.ts

@@ -0,0 +1,42 @@
+import { memoryCache } from './memory.js';
+import { s3Cache } from './s3.js';
+import { fileCache } from './file.js';
+
+type Value = Buffer;
+type Strategy = 'none' | 'memory' | 'file' | 's3';
+type GetCacheOptions = {
+    's3:bucket'?: string;
+    'file:dir'?: string;
+};
+type Cache = {
+    get: (key: string) => Promise<Value | undefined>;
+    set: (key: string, value: Value) => Promise<void>;
+};
+
+const getCache = function (
+    strategy: Strategy,
+    options: GetCacheOptions = {},
+): Cache {
+    if (strategy === 'none') {
+        return {
+            get: async () => undefined,
+            set: async () => undefined,
+        };
+    } else if (strategy === 'memory') {
+        return memoryCache();
+    } else if (strategy === 'file') {
+        return fileCache({ dir: options['file:dir'] ?? './.cache' });
+    } else if (strategy === 's3') {
+        return s3Cache({ bucket: options['s3:bucket'] ?? '' });
+    } else {
+        throw new Error(`Invalid cache strategy: ${strategy}`);
+    }
+};
+
+export {
+    getCache,
+    type Value,
+    type Cache,
+    type Strategy,
+    type GetCacheOptions,
+};

package/src/cache/memory.ts

@@ -0,0 +1,15 @@
+import { type Cache, type Value } from './index.js';
+
+const MEMORY_CACHE_KVS: Record<string, Value> = {};
+const memoryCache: () => Cache = function () {
+    return {
+        set: async function (key: string, value: Value) {
+            MEMORY_CACHE_KVS[key] = value;
+        },
+        get: async function (key: string): Promise<Value | undefined> {
+            return (MEMORY_CACHE_KVS[key] as Value) ?? undefined;
+        },
+    };
+};
+
+export { memoryCache };

package/src/cache/s3.ts

@@ -0,0 +1,17 @@
+// TODO: implement
+
+import { type Cache, type Value } from './index.js';
+
+type S3CacheOptions = {
+    bucket: string;
+};
+const s3Cache: (options: S3CacheOptions) => Cache = function () {
+    return {
+        set: async function (key: string, value: Value) {},
+        get: async function (key: string): Promise<Value | undefined> {
+            return undefined;
+        },
+    };
+};
+
+export { s3Cache };

package/src/server.ts

@@ -0,0 +1,156 @@
+/// <reference lib="dom" />
+// for using native fetch in TypeScript
+
+import { Hono } from 'hono';
+import { serve } from '@hono/node-server';
+import sharp from 'sharp';
+import type { StyleSpecification } from 'maplibre-gl';
+
+import { getRenderer } from './tiling.js';
+import { getCache } from './cache/index.js';
+const cache = getCache('file');
+
+const hono = new Hono();
+hono.get('/health', (c) => {
+    return c.body('OK', 200);
+});
+
+hono.get('/tiles/:z/:x/:y_ext', async (c) => {
+    // path params
+    const z = Number(c.req.param('z'));
+    const x = Number(c.req.param('x'));
+    let [_y, ext] = c.req.param('y_ext').split('.');
+    const y = Number(_y);
+
+    if (['png', 'jpg', 'webp'].indexOf(ext) === -1) {
+        return c.body('Invalid extension', 400);
+    }
+
+    // query params
+    const tileSize = Number(c.req.query('tileSize') ?? 512);
+    const noSymbol = c.req.query('noSymbol') ?? false; // rendering symbol is very slow so provide option to disable it
+    const onlySymbol = c.req.query('onlySymbol') ?? false;
+    const url = c.req.query('url') ?? null;
+
+    if (url === null) {
+        return c.body('url is required', 400);
+    }
+
+    // load style.json
+    let style: StyleSpecification;
+
+    const cachedStyle = await cache.get(url);
+    if (cachedStyle === undefined) {
+        const res = await fetch(url);
+        style = await res.json();
+        cache.set(url, Buffer.from(JSON.stringify(style)));
+    } else {
+        style = (await JSON.parse(
+            cachedStyle.toString(),
+        )) as StyleSpecification;
+    }
+
+    if (noSymbol) {
+        style = {
+            ...style,
+            layers: style.layers.filter((layer) => layer.type !== 'symbol'),
+        };
+    } else if (onlySymbol) {
+        style = {
+            ...style,
+            layers: style.layers.filter((layer) => layer.type === 'symbol'),
+        };
+    }
+
+    const { render } = getRenderer(style, { tileSize });
+    const pixels = await render(z, x, y);
+
+    const image = sharp(pixels, {
+        raw: {
+            width: tileSize,
+            height: tileSize,
+            channels: 4,
+        },
+    });
+
+    let imgBuf: Buffer;
+    if (ext === 'jpg') {
+        imgBuf = await image.jpeg({ quality: 20 }).toBuffer();
+    } else if (ext === 'webp') {
+        imgBuf = await image.webp({ quality: 100 }).toBuffer();
+    } else {
+        imgBuf = await image.png().toBuffer();
+    }
+
+    return c.body(imgBuf, 200, {
+        'Content-Type': `image/${ext}`,
+    });
+});
+
+hono.get('/debug', (c) => {
+    //demo tile
+    const url =
+        c.req.query('url') ?? 'https://demotiles.maplibre.org/style.json';
+
+    return c.html(`<!-- show tile in MapLibre GL JS-->
+
+  <!DOCTYPE html>
+  <html>
+      <head>
+          <meta charset="utf-8" />
+          <title>MapLibre GL JS</title>
+          <!-- maplibre gl js-->
+          <script src="https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.js"></script>
+          <link
+              rel="stylesheet"
+              href="https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.css"
+          />
+          <style>
+              body {
+                  margin: 0;
+                  padding: 0;
+              }
+              #map {
+                  position: absolute;
+                  top: 0;
+                  bottom: 0;
+                  width: 100%;
+              }
+          </style>
+      </head>
+      <body>
+          <div id="map" style="height: 100vh"></div>
+          <script>
+              const map = new maplibregl.Map({
+                  hash: true,
+                  container: 'map', // container id
+                  style: {
+                      version: 8,
+                      sources: {
+                          chiitiler: {
+                              type: 'raster',
+                              tiles: [
+                                  'http://localhost:3000/tiles/{z}/{x}/{y}.png?url=${url}',
+                              ],
+                          }
+                      },
+                      layers: [
+                          {
+                              id: 'chiitiler',
+                              type: 'raster',
+                              source: 'chiitiler',
+                              minzoom: 0,
+                              maxzoom: 22,
+                          }
+                      ],
+                  },
+                  center: [0, 0], // starting position [lng, lat]
+                  zoom: 1, // starting zoom
+              });
+          </script>
+      </body>
+  </html>
+  `);
+});
+
+serve({ port: 3000, fetch: hono.fetch });

package/src/tiling.ts

@@ -0,0 +1,123 @@
+/// <reference lib="dom" />
+// for using native fetch in TypeScript
+
+import mbgl, { MapMode } from '@maplibre/maplibre-gl-native';
+// @ts-ignore
+import SphericalMercator from '@mapbox/sphericalmercator';
+import type { StyleSpecification } from 'maplibre-gl';
+
+import { getCache } from './cache/index.js';
+const cache = getCache('file');
+
+function getTileCenter(z: number, x: number, y: number, tileSize = 256) {
+    const mercator = new SphericalMercator({
+        size: tileSize,
+    });
+    const px = tileSize / 2 + x * tileSize;
+    const py = tileSize / 2 + y * tileSize;
+    const tileCenter = mercator.ll([px, py], z);
+    return tileCenter;
+}
+
+type GetRendererOptions = {
+    tileSize: number;
+};
+
+function getRenderer(
+    style: StyleSpecification,
+    options: GetRendererOptions = { tileSize: 256 },
+): {
+    render: (
+        z: number,
+        x: number,
+        y: number,
+    ) => Promise<Uint8Array | undefined>;
+} {
+    const render = function (
+        z: number,
+        x: number,
+        y: number,
+    ): Promise<Uint8Array | undefined> {
+        /**
+         * zoom(renderingOptions): tileSize=256 -> z-1, 512 -> z, 1024 -> z+1...
+         * width, height(renderingOptions): equal to tileSize but:
+         * when zoom=0, entire globe is rendered in 512x512
+         * even when tilesize=256, entire globe is rendered in "512x512 at zoom=0"
+         * so we have to set 512 when tilesize=256 and zoom=0, and adjust ratio
+         */
+        const renderingParams =
+            options.tileSize === 256 && z === 0
+                ? {
+                      zoom: 0,
+                      height: 512,
+                      width: 512,
+                      ratio: 0.5,
+                  }
+                : {
+                      zoom: z - 1 + Math.floor(options.tileSize / 512),
+                      height: options.tileSize,
+                      width: options.tileSize,
+                      ratio: 1,
+                  };
+
+        const map = new mbgl.Map({
+            request: function (req, callback) {
+                // TODO: better Caching
+                cache.get(req.url).then((val) => {
+                    if (val !== undefined) {
+                        // hit
+                        callback(undefined, { data: val as Buffer });
+                    } else {
+                        fetch(req.url)
+                            .then((res) => {
+                                if (res.status === 200) {
+                                    res.arrayBuffer().then(
+                                        (data: ArrayBuffer) => {
+                                            cache.set(
+                                                req.url,
+                                                Buffer.from(data),
+                                            );
+                                            callback(undefined, {
+                                                data: Buffer.from(data),
+                                            });
+                                        },
+                                    );
+                                } else {
+                                    // empty
+                                    callback();
+                                }
+                            })
+                            .catch((err: any) => {
+                                callback(err);
+                            });
+                    }
+                });
+            },
+            ratio: renderingParams.ratio,
+            mode: MapMode.Tile,
+        });
+
+        map.load(style);
+
+        const renderOptions = {
+            zoom: renderingParams.zoom,
+            width: renderingParams.width,
+            height: renderingParams.height,
+            center: getTileCenter(z, x, y, options.tileSize),
+        };
+
+        return new Promise((resolve, reject) => {
+            map.render(renderOptions, function (err, buffer) {
+                if (err) reject(err);
+                resolve(buffer);
+                map.release();
+            });
+        });
+    };
+
+    return {
+        render,
+    };
+}
+
+export { getRenderer };

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "extends": ["@tsconfig/node18/tsconfig.json"],
+    "compilerOptions": {
+        "moduleResolution": "NodeNext",
+        "outDir": "./dist",
+        "resolveJsonModule": true,
+        "esModuleInterop": true
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "build", "dist"]
+}