maplibre
Catatan teknis seputar web development, DevOps, dan integrasi AI.
5 artikel
- 04.34frontend
Atribusi peta ganda di MapLibre: duplikat saya, bukan pemasok
Atribusi peta muncul dua kali di pojok. Yang satu duplikat buatan sendiri; TileJSON pemasok sudah lama mengirim atribusi bawaan.
TL;DR: Atribusi dobel di pojok peta ternyata gara-gara customAttribution yang diketik manual, padahal MapLibre udah otomatis ambil dari TileJSON. Solusinya hapus string itu, ganti compact: false biar atribusi selalu kebaca tanpa perlu diklik. Ingat, atribusi itu kewajiban lisensi ODbL, bukan hiasan UI, jadi jangan sampai hilang.
#maplibre#openstreetmap#osm - 04.00frontend
Klik kartu React, peta ikut fokus: tiga jembatan ke MapLibre
Event klik kartu React belum cukup untuk menggerakkan peta imperatif. Tiga jembatan kecil: registry ref, klik sintetis untuk popup, lalu flyTo.
TL;DR: Marker di maplibre nggak punya API buka popup, jadi triknya dispatch klik sintetis yang nge-bubble ke peta biar popup muncul sendiri, plus flyTo buat zoom ke lokasinya. Pakai useRef buat nyimpen marker dan nahan request fokus sebelum peta selesai load. Tambah counter di dependency biar klik kartu yang sama tetap ke-trigger.
#maplibre#react#typescript - 03.10frontend
Peta Kantor Abu-Abu: Worker MapLibre yang Tak Pernah Minta Tile
Ganti peta statis dengan MapLibre di Next.js 16, tile-nya nggak muncul dan console diam saja. Ternyata worker-nya yang tak pernah jalan.
TL;DR: Peta MapLibre abu-abu kosong di Next.js 16 padahal console bersih, ternyata Turbopack gagal emit file worker-nya jadi tile nggak pernah diminta. Solusi cepatnya: load MapLibre 4.7.1 dari CDN karena build itu inline worker sebagai blob URL. Pelajarannya, kalau komponen hidup setengah tanpa error, cek tab Network duluan.
#maplibre#openfreemap#nextjs - 17.30frontend
Dark Peta MapLibre ala Google Maps lewat Runtime Override
Fiord bikin peta gelap tapi datar. Saya mutasi style JSON-nya langsung di runtime: brightness ladder per layer, label terang ber-halo, plus guard anti-flash.
TL;DR: Fiord dark mode bikin jalan semua abu-abu sama, susah dibaca. Akhirnya fetch JSON Fiord, ubah paint 28 layer bikin tingkatan kecerahan jalan plus label pake halo gelap biar kelihatan kaya Google Maps. Pake cache, show peta dulu baru upgrade style, plus guard biar toggle cepat nggak bikin peta acak-acakan.
#maplibre#openfreemap#dark-mode - 16.45frontend
Peta Mendadak Penuh Watermark: Pindah ke MapLibre dan OpenFreeMap
Basemap CARTO tiba-tiba wajib API key dan peta proyek saya penuh watermark. Ini cerita migrasi tiga komponen Leaflet ke MapLibre GL dengan tile OpenFreeMap.
TL;DR: Basemap CARTO tiba-tiba wajib API key, jadi semua tile peta ketutup watermark abu-abu. Daripada ngurusin kuota, saya pindah ke OpenFreeMap yang gratis tanpa key dan migrasi semua komponen Leaflet ke MapLibre GL. Style dark bawaannya kontrasnya hampir nol, akhirnya diganti fiord biar peta kebaca lagi.
#maplibre#leaflet#openstreetmap