meta data for this page
  •  

Perbedaan

Ini menunjukkan perbedaan antara versi yang terpilih dengan versi yang sedang aktif.

Tautan ke tampilan pembanding ini

Kedua sisi revisi sebelumnyaRevisi sebelumnya
Revisi selanjutnya		Revisi sebelumnya
linux:instalasi_map [2025/01/23 11:32] – Daniel Nugrahalinux:instalasi_map [2025/01/23 13:48] (sekarang) – Daniel Nugraha
Baris 1: Baris 1:
-aa+====== Docs Instalasi Maps Offline ====== 
 + 
 +  - Download tile: [[https://data.maptiler.com/downloads/asia/indonesia/|https://data.maptiler.com/downloads/asia/indonesia/]], disini bisa kita sesuaikan kebutuhan wilayah untuk tiles nya 
 +  - Install secara global package tileserver-gl via npm → npm install -g tileserver-gl (node js 18.x - 20.x) 
 +  - 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 
 +  - Setelah dijalankan, secara default web tileserver-gl akan jalan di [[http://[::]:8080/|http://[::]:8080/]] atau [[http://localhost:8080/|http://localhost:8080/]], buka alamat tersebut pada browser Dan akan muncul halaman berikut ini: 
 + 
 +**{{:linux:screenshot2025-01-23113808.png?nolink&615x362}}** 
 +  - **Setelah itu, maka scroll kebawah maka muncul component berikut:** 
 +{{:linux:screenshot2025-01-23114008.png?nolink&801x207}} 
 + 
 +  - **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 ** 
 +======   ====== 
 + 
 +====== Contoh Penggunaan ====== 
 + 
 +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) 
 + 
 +**{{:linux:screenshot2025-01-23133251.png?nolink&645x412}}** 
 + 
 +Buat Constant untuk memudahkan pemanggilan url di masing-masing komponen 
 + 
 +**{{:linux:screenshot2025-01-23133513.png?nolink&647x127}}** 
 + 
 +Panggil url constan tersebut pada props tile layer pada leaflet 
 + 
 +**{{:linux:screenshot2025-01-23133709.png?nolink&648x122}}** 
 + 
 +Jalankan aplikasi secara offline untuk memastikan bahwa maps bisa diakses secara offline 
 + 
 +**{{:linux:screenshot2025-01-23134003.png?nolink&791x448}}** 
 +