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:40] – Daniel Nugrahalinux:instalasi_map [2025/01/23 13:48] (sekarang) – Daniel Nugraha
Baris 1: Baris 1:
-======   Docs Instalasi Maps Offline   ======+====== 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:
  
-**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 ** +**{{:linux:screenshot2025-01-23113808.png?nolink&615x362}}** 
-  -+  - **Setelah itu, maka scroll kebawah maka muncul component berikut:** 
 +{{:linux:screenshot2025-01-23114008.png?nolink&801x207}}
  
-**Install secara global package tileserver-gl via npm -> npm install -g tileserver-gl (node js 18.x - 20.x)** +  - **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 ======
  
-**Buka Folder lokasi file .mbtiles, buka terminal dan jalankan perintah:** +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.
-      -+
  
-**Jika Menjalankan biasa: “tileserver-gl --file osm-2020-02-10-v3.11_asia_indonesia.mbtiles” pada terminal** +Proxy URL pada config react (disini menggunakan vite config)
-      -+
  
-**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** +**{{:linux:screenshot2025-01-23133251.png?nolink&645x412}}**
-  - **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:** +Buat Constant untuk memudahkan pemanggilan url di masing-masing komponen
-**{{:linux:screenshot2025-01-23113808.png?nolink&615x362}}** +
-  -+
  
-**Setelah itu, maka scroll kebawah maka muncul component berikut:** +**{{:linux:screenshot2025-01-23133513.png?nolink&647x127}}** 
-{{:linux:screenshot2025-01-23114008.png?nolink&801x207}}+ 
 +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}}**