Map Visualizer

Interactive web visualizer for Google Location History Timeline.json files. Built with React + Vite + Leaflet. MapLibre GlobeView masih dalam pengembangan — bisa diakses opt-in di /globe walaupun overlay belum konsisten muncul di production, tetap balik ke Leaflet di /. Auto-deploys to Hostinger via GitHub Actions.

Live: https://rebornian48.my.id/map-visualizer/

Features

• Map-first flow — the map loads immediately; drop a Timeline.json in from the header when you're ready.
• Textbook symbology untuk semua marker penting: gunung api = segitiga (warna aktif/historis/holocene · ukuran = elevasi atau level status), bandara = glyph pesawat, halte bus = glyph bus, stasiun rel = glyph kereta. Rendering pakai L.divIcon dengan SVG inline dari src/mapIcons.js. Legend swatch juga ikut simbol yang bersangkutan supaya konsisten.
• Layer panel = 7 tombol kategori di top-right — Basemap, Wilayah, Transportasi, Infrastruktur · BIG, SDA & Lingkungan · BIG, Cuaca, Bencana Alam. Klik salah satu → panel konten yang relevan muncul; hanya satu terbuka pada satu waktu. Aeronautika (OpenAIP) dan Maritim (SeaRates) hidup di dalam Transportasi sebagai group tersendiri, sarana-prasarana BIG di panel Infrastruktur, dan SDA BIG di panel SDA & Lingkungan (kecuali sublayer bertema bencana yang ditumpangkan ke Bencana Alam untuk konsistensi). Group baru dengan nama yang cocok (di SECTIONS di src/components/LayersControl.jsx) otomatis mendarat di kategori yang benar.
• Multiple basemaps — OpenStreetMap, Esri Satellite, and OpenTopoMap (Basemap tab).
• Indonesia boundary overlays — empat radio level mutually exclusive di panel Wilayah: Provinsi (38) / Kab/Kota (541) / Kecamatan (7.432) / Kelurahan/Desa (84.503). Plus grup terpisah Batas Laut dengan 4 zona UNCLOS (Laut Teritorial · Zona Tambahan · Landas Kontinen · ZEE) sebagai checkbox independen. Sumber: BIG (Badan Informasi Geospasial) edisi Juni 2026.
• Transportasi umum (Opentransum) — overlay opsional yang bisa di-toggle satu per satu dari layer control: enam jaringan bus JSON (Trans Semarang, Metro Trans Jabar, Bus Listrik Medan, Trans Koetaradja, Transpakuan, Mitra Darat), GTFS Transjakarta, garis rel KRL & LRT/MRT (GeoJSON), dan stasiun KRL/LRT/MRT (KML). Data diambil dari cdn.opentransum.randspace0.com dan di-cache per sesi. Lihat bagian Data attribution di bawah untuk lisensi.
• BMKG · Gempa / Peringatan Dini / Cuaca — overlay real-time dari tiga endpoint publik BMKG (grup BMKG · Gempa, BMKG · Peringatan Dini, BMKG · Cuaca di layer control):
  • Gempa Terbaru / Terkini M 5+ / Dirasakan (data.bmkg.go.id) — marker lingkaran berukuran magnitude, warna sesuai kedalaman (dangkal merah / menengah oranye / dalam biru). Popup menampilkan detail lengkap plus gambar shakemap dari static.bmkg.go.id bila tersedia.
  • Peringatan Dini Cuaca (www.bmkg.go.id/alerts/nowcast) — RSS feed berisi daftar alert aktif; tiap alert diambil sebagai CAP 1.2 XML lalu direnderer sebagai polygon berwarna severity (Minor→ Extreme). Popup menampilkan headline, deskripsi, dan tautan infografis BMKG.
  • Cuaca Kota Besar (hari ini) (api.bmkg.go.id/publik/ prakiraan-cuaca) — 11 ibukota provinsi ter-hardcode dengan kode adm4. Marker menampilkan emoji cuaca + suhu; popup menampilkan kelembapan, angin, jarak pandang, dan jam prakiraan lokal.
• SIGMET Aktif (NOAA AWC) — peringatan cuaca berbahaya untuk penerbangan (Significant Meteorological Information) dari NOAA Aviation Weather Center. Polygon area terdampak warna sesuai hazard: VA (volcanic ash — merah tua), TC (tropical cyclone — ungu), TS (thunderstorm — oranye), TURB, ICE, MTW, DS/SS. Popup menampilkan FIR, hazard + qualifier, valid time, ketinggian base/top (FL), dan seri. Endpoint tidak berCORS jadi lewat proxy PHP kita (?h=awc&p=api/data/isigmet&q=format=json).
• Status Gunung Api Indonesia (MAGMA · live) — 69 gunung api Indonesia dengan status aktivitas real-time (Normal / Waspada / Siaga / Awas) dari MAGMA Indonesia (PVMBG · Badan Geologi · ESDM). MAGMA menyisipkan roster + level sebagai variabel JS inline (markersGunungApi) di halaman utama; overlay fetch halaman via proxy PHP lalu ekstrak array-nya di klien. Marker warna sesuai level (hijau/kuning/oranye/merah), ukuran mengikuti level agar yang berstatus tinggi lebih menonjol. Popup menampilkan nama, provinsi, kabupaten/kota, elevasi, kode MAGMA, dan nomor VONA jika ada.
• Gunung Api (Smithsonian GVP · Holocene) — 1.214 gunung api Holocene dari Smithsonian Global Volcanism Program, snapshot langsung dari WFS resmi mereka (webservices.volcano.si.edu/geoserver/GVP-VOTW, feature type Smithsonian_VOTW_Holocene_Volcanoes). Marker warna sesuai aktivitas terakhir (aktif ≥ 1900 merah, historis 1500–1899 oranye, holocene pra-1500 coklat), ukuran skala elevasi. Popup menampilkan nama, negara, wilayah/subwilayah, tipe, landform, elevasi, batuan utama, setting tektonik, tahun erupsi terakhir, bukti, foto GVP, ringkasan geologis, dan deep-link ke halaman volcano.si.edu.
• Aeronautika (OpenAIP) — grup Aeronautika · OpenAIP di bawah Transportasi dengan dua toggle:
  • Bandara Indonesia — 286 aerodrome dari OpenAIP (civil, militer, internasional, heliport, seaplane base) lengkap dengan runway (designator, panjang, permukaan) dan frekuensi ATS (TWR/APP/ATIS). Marker warna sesuai tipe.
  • FIR & Airspace — 8 polygon airspace: 2 FIR nasional (Jakarta, Ujung Pandang) + 3 CTR + 3 TMA di Papua. Warna sesuai kelas airspace (FIR biru tipis, CTR merah bata, TMA oranye). Snapshot di-vendor ke public/openaip/{airports,airspaces}.json (~125 KB total), refresh manual dengan OPENAIP_KEY=… node scripts/refresh-openaip.mjs tiap AIRAC cycle. OpenAIP di-populate komunitas — coverage Indonesia terbatas (CTR/TMA di luar Papua, PRD areas, navaid, dan waypoint belum terisi).
• Gereja Katolik · Keuskupan (Wikipedia) — toggle Keuskupan Katolik di grup Gereja Katolik di bawah Wilayah (di bawah radio boundary Provinsi/Kab/Kota). Choropleth 514 kabupaten/kota Indonesia diwarnai per provinsi gerejawi (10 hue: Medan, Palembang, Jakarta, Semarang, Ende, Kupang, Pontianak, Samarinda, Makassar, Merauke) — supaya struktur metropolit + sufragan terbaca sekali pandang. Cakupan 38 keuskupan teritorial (Ordinariat Militer tidak masuk peta karena tidak punya batas geografis). Popup menampilkan kab/kota + provinsi sipil, nama keuskupan, status (Metropolit/Sufragan), tahun berdiri, uskup diosesan aktif + tanggal penunjukan (atau Lowong), dan katedral. Sumber: Daftar keuskupan di Indonesia
  • halaman masing-masing keuskupan. Polygon RDP ~1,1 km → ~1 MB. Refresh manual: python scripts/refresh-keuskupan.py (roster di-embed di script, bukan hasil scrape, karena Wikipedia menuliskan cakupan wilayah dalam prosa).
• Insiden Keracunan MBG (Wikipedia) — grup Insiden · MBG di bawah Bencana Alam. Choropleth kabupaten/kota untuk dugaan kasus keracunan program Makan Bergizi Gratis: polygon batas administrasi di-arsir warm ramp (peach ≤50 → maroon >2.000) berdasar total korban di kabupaten itu. Sumber tabel: Wikipedia bahasa Indonesia Daftar kasus keracunan massal makan siang gratis section Makan Bergizi Gratis, di-parse dengan handling rowspan (jumlah korban tidak dobel-hitung) lewat MediaWiki API, matched ke polygon kabkota.json, disimplify RDP ~500m jadi ~650 KB. Popup menampilkan kabupaten, jumlah kejadian, total korban, dan tiga insiden terbesar. Dashboard interaktif terpisah di /map-visualizer/keracunan-mbg — timeline bulanan + breakdown provinsi + top 10, dengan cross-filter dua arah. Refresh manual dengan python scripts/refresh-mbg.py (hasilkan dua file: public/mbg/incidents.json untuk dashboard, public/mbg/incidents.geojson untuk peta).
• Sarana & Prasarana BIG (22 sublayer) — tombol Infrastruktur · BIG di layer control (icon menara), berisi tiga grup toggle independen yang dijaring dari Satupeta MapServer PUBLIK/SARANA_PRASARANA (edisi 2024-07):
  • Transportasi · BIG — pelabuhan (perikanan / umum / penyeberangan / tersus 1.978), bandara (250), rel & stasiun KA (810 + 772), jalan nasional tol/non-tol (180 + 3.197 ruas), alur pelayaran (106), dan SBNP — Sarana Bantu Navigasi Pelayaran (4.580).
  • Energi · BIG — jaringan listrik (1.189), gardu induk (1.109), pembangkit listrik titik + kawasan (2.961 + 84), terminal BBM (39), terminal LPG (24), kilang minyak (8).
  • Air & Zona · BIG — bendungan eksisting (215), ruang udara (355) — dipecah jadi 8 sub-toggle terpisah (FIR/UTA/TMA/CTR/ATZ/ AFIZ/PDRT/SECTOR) karena nested, dengan custom pane menjaga z-order supaya CTR selalu di atas TMA di atas FIR — DLKr/DLKp pelabuhan (144), KKOP — Keamanan Ops Penerbangan (70). Satu builder generik per slug (dispatch di geometry.type supaya file yang sama bisa mengangkut point + line + polygon); palet diatur per kategori supaya overlay saling tumpuk tetap terbaca di light & dark basemap. Snapshot di-vendor ke public/sarpras/*.json (~6,9 MB total). Refresh manual: python scripts/refresh-sarpras.py all — stdlib only, paginasi resultOffset, per-layer field whitelist + maxAllowableOffset untuk polyline/polygon supaya bundle tetap manageable.
• SDA & Lingkungan BIG (32 sublayer) — tombol SDA & Lingkungan · BIG di layer control (icon daun), berisi lima grup toggle dari MapServer PUBLIK/SUMBER_DAYA_ALAM_DAN_LINGKUNGAN (edisi 2024-08). Sublayer bertema bencana ditaruh di panel Bencana Alam (grup Bencana · SDA) supaya konsisten dengan keluarga BMKG/Vulkano/Tektonik yang sudah ada; sisanya di panel SDA & Lingkungan.
  • Tanah & Geologi · BIG — lahan gambut (146), geologi formasi (36k), geostruktur (68k lines), bentang alam karst (6.3k), fungsi ekosistem gambut (15k).
  • Hidrologi · BIG — neraca sumber daya air (268 WS), danau (155), embung (2.3k), situ (416).
  • Sumber Daya · BIG — mineral logam (2.5k titik), mineral non logam (4k), batubara (1.7k), panas bumi (357).
  • Ekosistem · BIG — lahan kritis (137k, cap-out server), perikanan budidaya (48k), lahan garam (6.3k), mangrove (205k, 79 MB — file terbesar di repo).
  • Cagar Budaya & Konservasi · BIG — kawasan cagar budaya (287), titik cagar budaya (1k), zonasi kawasan konservasi (409), blok kawasan konservasi (192).
  • Bencana · SDA (di panel Bencana Alam) — KRB gunung api titik + area (292 + 596), KRB gempa bumi (11k), zona kerentanan gerakan tanah (14k cap-out), KRB tsunami (6), kerentanan likuifaksi (3), patahan aktif (323 lines), kerentanan pesisir (606 lines), rawan karhutla (8k cap-out), rawan banjir (92k cap-out), seismisitas gempa (81k events). Sebagian besar sublayer di-color per-kategori (rawan/risiko pakai ramp green→red, jenis pakai palet 12-hue) dengan legenda otomatis yang muncul di kiri-bawah saat overlay aktif — lihat src/sarpras.js dan src/sda.js untuk spec categorize per slug. Snapshot di-vendor ke public/sda/*.json (~263 MB total). Layer raksasa (rawan-banjir 344k, gerakan-tanah 265k, karhutla 176k, mangrove 240k) dikompres dengan maxAllowableOffset agresif (0.005–0.01°, ~500 m–1.1 km) + resultRecordCount 200 supaya respons tidak putus. Sebagian di-cap-out oleh soft-limit server Esri saat paginasi. Tiga sublayer di-drop karena server-side broken atau tanpa batas: layer 7 (DAS) & 35 (Konservasi Perairan) return HTTP 400 untuk semua query; layer 50 (DDDTLH) paginasi tanpa akhir melewati 408k fitur (kena 100 MB per-file cap GitHub). Refresh manual: python scripts/refresh-sda.py all (~5 jam).
• Tektonik (PB2002) — grup Tektonik di layer control dengan tiga toggle: batas lempeng (garis; zona subduksi ditandai merah tebal), poligon lempeng (54 lempeng dengan warna stabil per kode), dan orogen (13 zona pegunungan). GeoJSON di-bundle di public/tectonicplates/ (~600 KB total) dari fraxen/tectonicplates — model PB2002 Bird (2003).
• Year & Month filters — dot-only render: path points as small red dots, visits as green dots; no polylines cluttering the view.
• Playback animation — a single moving dot traces the timeline; once the animation finishes, the full trajectory polyline is revealed.
• Statistics panel — distance, points, visits, unique places, trips.
• Live coordinate readout — lat/lng of the cursor in the bottom-left.
• Video export (MP4) — pick a period (year/month range), a custom title, and a duration (30s, 60s, or custom); render the timeline as an animated MP4 (H.264). Each frame carries a rounded header card (title + Month Year · N km cumulative distance), a growing magenta trail, and a glowing pin at the head, with a 10-second trajectory hold at the end. Falls back to WebM only when the browser cannot encode MP4 (Firefox).
• Halaman info di URL sendiri — tombol i navigasi ke /map-visualizer/info (bukan modal). Diawali dengan ringkasan isi peta — card per kategori tombol (Basemap / Wilayah / Transportasi / Cuaca / Bencana Alam) yang mendaftar semua overlay yang tersedia — lalu bagian detail per sumber (endpoint, atribusi, lisensi, penyangkalan). URL shareable; .htaccess SPA fallback bikin deep link works di prod, dan Vite dev server juga SPA fallback by default.
• Legend MAGMA dengan angka per level — begitu overlay Status Gunung Api (MAGMA) aktif, legend di kiri-bawah menampilkan jumlah gunung per Level IV/III/II/I plus Σ total. Kalau data live gagal dan overlay pakai snapshot vendored, legend tandain "Fallback snapshot".
• Privacy-first — all data processing happens in the browser. Nothing is uploaded.

Quick start (local dev)

git clone https://github.com/Rebornian48/map-visualizer.git
cd map-visualizer
npm install
npm run dev

Open http://localhost:5173, then click + Add Timeline JSON in the header and pick your Timeline.json.

Get your Timeline data

1. Go to Google Takeout.
2. Deselect all, then select Location History (Timeline).
3. Choose JSON format.
4. Download and extract — find Timeline.json.

Deploy: GitHub → Hostinger (auto)

The workflow at .github/workflows/deploy.yml builds the app and uploads dist/ to Hostinger via FTP on every push to main.

Repository secrets required (Settings → Secrets and variables → Actions):

Secret Name	Value
FTP_HOST	e.g. ftp.yourdomain.com
FTP_USER	e.g. u123456789
FTP_PASS	Your FTP password

The workflow currently deploys to /domains/rebornian48.my.id/public_html/map-visualizer/ — change server-dir in the workflow if you host elsewhere.

Boundary overlays

Batas administrasi (empat level darat + empat zona laut) di-vendor sebagai snapshot GeoJSON di public/boundaries/, sumber BIG (Badan Informasi Geospasial) edisi Juni 2026 via ArcGIS REST publik BIG di geoservices.big.go.id/rbi/rest/services/BATASWILAYAH/.

Darat (radio, mutually exclusive di panel Wilayah · grup Boundary):

• provinsi.json — 38 provinsi (dissolve kab/kota per WADMPR, RDP ~2,2 km, drop islet slivers < 6 km², drop interior-ring holes)
• kabkota.json — 541 kabupaten/kota (RDP ~555 m)
• kecamatan.json — 7.432 kecamatan (RDP ~333 m)
• desa.json — 84.503 kelurahan/desa (server_offset 0,005° + client RDP 0,002°; beberapa desa urban <200 m collapse ke titik)

Laut (checkbox, boleh overlay bersama · grup Batas Laut):

• laut/teritorial.json — Laut Teritorial (12 nm) · 21 segmen
• laut/zona-tambahan.json — Zona Tambahan (24 nm) · 10 segmen
• laut/landas-kontinen.json — Landas Kontinen · 31 segmen
• laut/zee.json — ZEE (200 nm) · 24 segmen

Refresh manual — jalankan tiap kali BIG rilis edisi baru atau ada pemekaran wilayah:

python scripts/refresh-boundaries.py            # kabkota + provinsi (~1 menit)
python scripts/refresh-boundaries.py kecamatan  # ~2 menit
python scripts/refresh-boundaries.py desa       # ~15 menit (85 halaman × 1.000 fitur)
python scripts/refresh-boundaries.py all        # semua level darat
python scripts/refresh-laut.py                  # 4 zona maritim (~5 detik)

Script paginasi (200-1000 fitur per request; server BIG 500 di atas itu untuk desa/kecamatan), minta simplifikasi server-side maxAllowableOffset, lalu simplify/clean di klien dengan shapely. Tidak butuh API key.

Data attribution

Boundary GeoJSON (BIG)

Data batas wilayah administrasi Provinsi & Kabupaten/Kota adalah milik Badan Informasi Geospasial (BIG), edisi Juni 2026, diambil dari service ArcGIS REST publik mereka:

https://geoservices.big.go.id/rbi/rest/services/BATASWILAYAH/BATAS_KABKOTA_AR/MapServer/0

Snapshot GeoJSON di-vendor ke public/boundaries/{provinsi,kabkota}.json supaya build self-contained. Data disajikan as-is; untuk keperluan resmi rujuk ke portal BIG.

Opentransum (transportasi umum)

Overlay bus & rel diambil dari Opentransum (https://opentransum.randspace0.com/open-data).

• Sumber: trayek, halte, stasiun, dan garis rel dikumpulkan Opentransum dari sumber publik masing-masing operator (Transjakarta, Trans Semarang, Trans Koetaradja, Transpakuan, Bus Listrik Medan, Metro Trans Jabar, KAI Commuter, MRT/LRT, dan operator Mitra Darat).
• Lisensi: Kompilasi dan penyajian data oleh Opentransum dilisensikan di bawah Attribution-NonCommercial 4.0 (CC BY-NC 4.0). Hak atas data aslinya tetap pada masing-masing operator.
• Penyangkalan: Data disajikan as-is, tanpa jaminan atas keakuratan, kelengkapan, kemutakhiran, maupun ketersediaannya. Isi dapat berubah kapan saja dan mungkin tidak sesuai kondisi lapangan. Rujuk ke operator terkait untuk informasi resmi.
• Endpoints (CDN): https://cdn.opentransum.randspace0.com/transport-data/ — transsemarang.json, metrojabartrans.json, buslistrikmedan.json, transkotaradja.json, transpakuan.json, mitradarat.json, file_gtfs.zip (Transjakarta GTFS), krl_lines.geojson, lrt_mrt_lines.geojson, rails.kml.

CDN Opentransum hanya mengirim Access-Control-Allow-Origin: https://opentransum.randspace0.com, jadi fetch langsung dari rebornian48.my.id diblok CORS. Karena kami tidak mengelola CDN tersebut, build produksi mem-proxi via satu file PHP di Hostinger.

Setup proxy (sekali saja):

1. Upload deploy/otsum/proxy.php ke public_html/otsum/proxy.php di Hostinger (File Manager atau FTP).
2. Verifikasi:

   curl -sI "https://rebornian48.my.id/otsum/proxy.php?f=transsemarang.json" | grep -i access-control
   

   Harus muncul access-control-allow-origin: *.

Proxy meng-whitelist 10 nama file yang dipakai app, forward ke CDN Opentransum, dan menempelkan header CORS. Cache HTTP 1 jam di browser.

Dev lokal tidak melewati proxy — vite.config.js memproxikan /otsum-cdn/* langsung ke CDN dari sisi Node server.

BMKG (Gempa, CAP, Cuaca)

Ketiga host BMKG (data.bmkg.go.id, www.bmkg.go.id, api.bmkg.go.id) tidak mengirim header CORS, jadi build produksi memakai satu file PHP gabungan di Hostinger untuk merutekan ketiganya.

Setup proxy BMKG (sekali saja):

1. Upload deploy/bmkg/proxy.php ke public_html/bmkg/proxy.php di Hostinger.
2. Verifikasi:

   curl -sI "https://rebornian48.my.id/bmkg/proxy.php?h=data&p=DataMKG/TEWS/autogempa.json" | grep -i access-control
   

   Harus muncul access-control-allow-origin: *.

Proxy meng-whitelist empat host (via ?h=data|www|api|magma) dan mem-validasi path dengan regex (untuk CAP alert dengan ID dinamis). Query string ?adm4=… diteruskan untuk endpoint cuaca. Host magma menunjuk ke magma.esdm.go.id — halaman utama-nya menyisipkan roster gunung api live sebagai variabel JS inline yang di-ekstrak di klien oleh overlay MAGMA.

Dev lokal tidak melewati proxy PHP — vite.config.js memproxikan /bmkg-cdn/*, /bmkg-www/*, /bmkg-api/*, dan /magma-web/* langsung ke masing-masing host.

Gunung Api (Smithsonian GVP · Holocene)

Dataset gunung api Holocene diambil langsung dari Smithsonian Global Volcanism Program, via WFS resmi mereka:

https://webservices.volcano.si.edu/geoserver/GVP-VOTW/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=GVP-VOTW:Smithsonian_VOTW_Holocene_Volcanoes&outputFormat=application/json

Snapshot GeoJSON (~2,4 MB, 1.214 fitur) di-vendor ke public/veins/volcanoes.json — refresh manual dengan curl di atas untuk pick-up erupsi baru.

Sitasi wajib pada tampilan yang menampilkannya:

Global Volcanism Program, 2026. Volcanoes of the World (v. 5.2.6). Smithsonian Institution.

Tektonik (PB2002)

Data batas lempeng, poligon lempeng, dan orogen diambil dari repo fraxen/tectonicplates, turunan langsung dari model PB2002 Peter Bird:

Bird, P. (2003), An updated digital model of plate boundaries, Geochemistry Geophysics Geosystems, 4(3), 1027, doi:10.1029/2001GC000252.

File-nya di-vendor ke public/tectonicplates/{boundaries,plates,orogens}.json supaya build self-contained (tidak fetch ke GitHub raw saat runtime).

Aeronautika (OpenAIP)

Data bandara dan airspace polygon untuk Indonesia diambil dari OpenAIP via Core REST API (api.core.openaip.net) dengan filter ?country=ID. Snapshot di-vendor ke public/openaip/{airports,airspaces}.json.

• Lisensi: Attribution-NonCommercial 4.0 (CC BY-NC 4.0).
• Coverage per snapshot (Sep 2026): 286 aerodrome + 8 airspace polygon (2 FIR + Papua CTR/TMA). OpenAIP crowdsourced — bagian Indonesia belum lengkap, banyak CTR/TMA/PRD/navaid/waypoint yang belum terisi.
• Penyangkalan: Data disajikan as-is. Jangan dipakai untuk navigasi penerbangan sungguhan; rujuk selalu ke AIP resmi Indonesia (AirNav Indonesia) dan NOTAM aktif.

Refresh snapshot (perlu API key gratis dari openaip.net → profile → API Clients):

OPENAIP_KEY=your-key-here node scripts/refresh-openaip.mjs

Data OpenAIP CORS-friendly, tapi karena API key tidak boleh ke-expose di bundle publik, snapshot approach lebih aman daripada runtime fetch.

Attribusi BMKG

Data BMKG (gempa, peringatan dini cuaca, prakiraan cuaca) adalah milik Badan Meteorologi, Klimatologi, dan Geofisika. Sesuai ketentuan infoBMKG, wajib mencantumkan BMKG sebagai sumber pada aplikasi yang menampilkannya. Data disajikan as-is; untuk peringatan resmi dan tindakan lapangan, rujuk selalu ke bmkg.go.id.

Manual deploy (alternative)

npm run build

Upload the contents of dist/ to Hostinger's target folder via:

• Hostinger File Manager (hPanel → Files → File Manager)
• Any FTP client (FileZilla, Cyberduck)

Tech stack

• React 18 — UI framework
• Vite 6 — build tool
• Leaflet — default map viewer di /
• MapLibre GL JS 5 — experimental globe viewer opt-in di /globe (init-race + line-width expression bug sudah diperbaiki; performa layer padat dioptimalkan dengan data:url off-thread parse + minzoom gate; PMTiles vector-tile support siap — lihat Vector tile pipeline di bawah)
• pmtiles 4 — client-side vector-tile reader (protocol handler untuk pmtiles://…)

Vector tile pipeline (PMTiles)

Data berat (boundary desa 31 MB, mangrove 76 MB, dst.) di-pre-tile sekali dengan tippecanoe → .pmtiles, lalu MapLibre cuma memuat tile yang terlihat di viewport. Ini memangkas parse-time dari detik ke instan.

Prasyarat (pilih salah satu):

• Linux/macOS — brew install tippecanoe atau sudo apt install tippecanoe
• Windows — jalankan via WSL (sudo apt install tippecanoe di dalam WSL) atau Docker Desktop (auto-pull ghcr.io/felt/tippecanoe:latest)

Build:

npm run tiles:list                 # lihat rencana build + status
npm run tiles:build                # build semua yang belum ada
npm run tiles:build:boundaries     # atau per-group
npm run tiles:build:sda
npm run tiles:build:sarpras
node scripts/build-pmtiles.mjs --only desa,mangrove --force  # spesifik

Runner auto-detect (native → WSL → Docker). Paksa dengan --runner docker. Output di public/tiles/<group>/<slug>.pmtiles — jangan di-commit (regenerate on demand). Setelah tile terbangun, switch entry di src/globe/layers.js dari url: … ke pmtilesUrl: \${BASE}tiles//.pmtiles``; GlobeView Path B (src/components/GlobeView.jsx:931) otomatis akan pakai vector source.

• html-to-image — DOM → PNG snapshot for the video background
• MediaRecorder + canvas.captureStream — MP4/WebM encoding
• JSZip — client-side GTFS zip extraction (Transjakarta overlay)
• GitHub Actions — CI/CD
• Hostinger — hosting

See CHANGELOG.md for release history.

Example export: a 9.5-year timeline

An example MP4 rendered from this tool — one user's Google Timeline covering March 2017 to August 2026, exported at 480×480, 24 fps, ~31.5 s (AV1 + AAC, ~1.6 MB).

Video metadata

• Duration: 31.56 s
• Resolution / fps: 480×480 @ 24 fps
• Codec: AV1 video, AAC audio
• Overlay: title, month + year, cumulative distance
• Basemap: CARTO Positron / OpenStreetMap
• Trail: accumulated pink/magenta polyline with a circular pin marker

Sampled frames

Time (s)	Date	Cumulative distance	Position / movement
1	Mar 2017	3,802 km	Yogyakarta (origin)
2	Feb 2018	10,352 km	Local loops around Yogyakarta–Bantul–Wates
4	Sep 2018	23,088 km	Dense activity across Yogyakarta
6	Apr 2019	36,458 km	Yogyakarta → Jakarta along the north-coast route
8	Aug 2019	52,422 km	Jabodetabek (Jakarta–Bogor–Bekasi)
10	Mar 2020	69,931 km	Jakarta ↔ Semarang corridor (pandemic era)
12	Jun 2021	85,293 km	Jakarta ↔ Yogyakarta via both north and south routes
14	Apr 2022	100,294 km	First Sumatra trip (toward Palembang / Jambi)
16	Nov 2022	117,564 km	Reach into Palembang; Bandung–Semarang corridor
18	Apr 2023	133,201 km	Kalimantan trip (Central Kalimantan)
20	Aug 2023	155,057 km	Full Java coverage: Jakarta ↔ Surabaya
22	Dec 2023	175,877 km	Jakarta–Semarang corridor
24	Jun 2024	197,650 km	Sulawesi trip (Makassar)
26	Oct 2024	220,772 km	Jakarta–Semarang again
28	Jul 2025	238,584 km	Jakarta–Semarang–Surabaya
30	May 2026	254,479 km	West + Central Java loop
31	Aug 2026	259,229 km	Final frame — a fan of trips across all of Indonesia, hubbed on Jakarta

Travel phases

1. 2017–2018 — Yogyakarta base. Local movement, ~10k km.
2. 2019 — Relocation. Yogyakarta → Jakarta; one long jump adds ~26k km.
3. 2019–2021 — Jabodetabek base. North-coast corridor Jakarta–Semarang–Yogyakarta dominates.
4. 2022–2024 — Outside-Java expansion. Sumatra (Palembang), Kalimantan (Central), Sulawesi (Makassar). Each trip adds ~15–20k km in a single hop.
5. 2025–2026 — Consolidation and finale. Return to Java corridors, then a final Nusantara-wide fan reaching Malaysia, Brunei, and East Timor at the edges of the frame.

Aggregate stats

• Total distance: 259,229 km over ~9.5 years (Mar 2017 – Aug 2026)
• Average: ~27,300 km/year, or ~75 km/day
• Scale: roughly 6.5× the Earth's equator (40,075 km)
• Two visible acceleration points: the 2018→2019 relocation, and the post-2022 expansion outside Java

What the export shows about the tool

• Auto-fit zoom per frame — the map re-frames from a Yogyakarta close-up to an Indonesia-wide view as the trajectory expands.
• Cumulative trail: earlier segments stay drawn as new ones arrive.
• 10-second trajectory hold at the end (see the b0bb095 commit).
• Compact file size at usable quality thanks to AV1.

Inspired by

google-timeline-visualizer by @mahlernim.

License

MIT