1. Download tile: https://data.maptiler.com/downloads/asia/indonesia/, disini bisa kita sesuaikan kebutuhan wilayah untuk tiles nya
2. Install secara global package tileserver-gl via npm → npm install -g tileserver-gl (node js 18.x - 20.x)
3. Buka Folder lokasi file .mbtiles, buka terminal dan jalankan perintah:

Jika Menjalankan biasa: “tileserver-gl –file osm-2020-02-10-v3.11_asia_indonesia.mbtiles” pada terminal

Jika ingin menjalankan di latar belakang, bisa menggunakan pm2 dengan perintah: pm2 start “tileserver-gl –file osm-2020-02-10-v3.11_asia_indonesia.mbtiles” –name maps-offline

1. Setelah dijalankan, secara default web tileserver-gl akan jalan di http://[::]:8080/ atau http://localhost:8080/, buka alamat tersebut pada browser

Dan akan muncul halaman berikut ini:

Setelah itu, maka scroll kebawah maka muncul component berikut:

Pilih services yang XYZ, maka url png tilelayer yang bisa digunakan oleh leaflet akan muncul, silahkan gunakan link Tile Layer tersebut pada aplikasi anda (leaflet, react leaflet dll)

Run Via Docker:
Masuk ke folder maptiler, dan jalankan ini:
sudo docker run –rm -it -v $(pwd):/data -p 8080:8080 maptiler/tileserver-gl –file file.mbtiles

Restart DNS Masq:

Cek status: sudo systemctl status dnsmasq

Restart: sudo systemctl restart dnsmasq

Pada contoh penggunaan berikut ini, menggunakan React Js, url tile layer tersebut di proxy kan bersamaan denga url dari react, agar hanya url react saja yang terexpose.

Proxy URL pada config react (disini menggunakan vite config)

Buat Constant untuk memudahkan pemanggilan url di masing-masing komponen

Panggil url constan tersebut pada props tile layer pada leaflet

Jalankan aplikasi secara offline untuk memastikan bahwa maps bisa diakses secara offline