Apa Itu Map Viewport? Center, Zoom, dan Jendela Tile yang Terlihat

Jika kamu pernah menulis kode yang berbicara dengan map library, kamu pasti pernah menulis kode yang menyentuh viewport. Viewport adalah state runtime peta: di mana ia dicentertkan, seberapa jauh ia di-zoom, ke arah mana ia menunjuk, dan opsional seberapa banyak ia dimiringkan. Setiap panning, zooming, rotasi, dan klik bergantung padanya.

Panduan ini menjelaskan apa sebenarnya viewport itu, empat nilai inti yang mendeskripsikannya, cara ia berinteraksi dengan tile dan bounding box, dan pola production untuk menyimpan, memulihkan, dan berbagi state viewport.

Empat Nilai Inti

Viewport peta web modern dideskripsikan oleh hingga empat nilai:

• Center ({ lat, lng }): koordinat geografis di tengah layar.
• Zoom (sebuah angka, sering kali float): seberapa jauh peta di-zoom. Angka yang lebih tinggi menampilkan area yang lebih kecil dengan lebih detail.
• Bearing (angka dalam derajat, default 0): rotasi peta dari "utara di atas". 90 berarti timur di atas.
• Pitch (angka dalam derajat, 0 hingga ~85): kemiringan 3D. 0 adalah datar top-down, 60 adalah tampilan perspektif yang kuat.

Setiap map library modern (MapLibre GL, Mapbox GL, OpenLayers, Leaflet, MapAtlas Dynamic Maps) mengekspos ini sebagai state yang dapat dibaca dan ditulis. Library 2D-only seperti Leaflet mungkin tidak mengekspos bearing atau pitch.

Zoom Level secara Detail

Zoom level adalah yang paling sering ditanyakan dari keempat nilai tersebut. Ini adalah angka integer (atau pecahan) yang memetakan dunia ke dalam piramida tile:

• Zoom 0: seluruh dunia dalam satu tile 256x256
• Zoom 1: dunia dibagi menjadi 4 tile
• Zoom 2: 16 tile
• ...
• Zoom 14: ~268 juta tile, skala lingkungan
• Zoom 18: skala bangunan
• Zoom 22+: biasanya dirender dengan upscaling gaya vektor daripada data tile baru

Aturan praktis yang berguna di ekuator: setiap peningkatan zoom level membelah lebar yang terlihat di layar. Pada zoom 14, satu layar biasanya menampilkan beberapa blok kota. Pada zoom 10, area metropolitan. Pada zoom 6, sebuah negara. Resolusi efektif bergantung pada ukuran layar dan proyeksi (Web Mercator mendistorsi utara-selatan saat mendekati kutub).

Sebagian besar kode production menyimpan zoom sebagai float (misalnya 14.5) karena animasi zooming yang mulus melakukan interpolasi antara zoom integer. Pengambilan tile terjadi pada tingkat integer yang dibulatkan ke bawah atau ke atas, tergantung pada konvensi library.

Viewport vs Bounding Box

Viewport adalah state kamera. Bounding box adalah persegi panjang geografis yang saat ini terlihat. Kamu menghitung bbox dari viewport setiap kali perlu bertanya kepada server "apa yang harus saya tampilkan di dalam tampilan ini?".

Dalam kode:

const bbox = map.getBounds(); // returns { _sw: {lat, lng}, _ne: {lat, lng} }
const params = new URLSearchParams({
  bbox: `${bbox._sw.lng},${bbox._sw.lat},${bbox._ne.lng},${bbox._ne.lat}`,
});
const features = await fetch(`/api/places?${params}`).then(r => r.json());

Pola ini (hitung bbox dari viewport, kirim ke server, render fitur yang dikembalikan) adalah detak jantung dari setiap pengalaman pencarian berbasis viewport: properti, listing, store locator, pelacakan armada, ride-share.

Cara Viewport Menggerakkan Pemuatan Tile

Saat viewport berubah, map library mencari tahu tile mana yang mencakup area baru yang terlihat pada zoom level saat ini, mengambil tile yang hilang dari server (atau cache in-memory-nya), dan merendernya. Tile yang sudah di-cache digunakan kembali; tile di luar viewport disimpan sebentar kalau-kalau pengguna kembali.

Panning dan zooming yang mulus terasa seamless karena library melakukan pekerjaan ini secara asinkron: ia menggambar apa yang dimilikinya, mengambil apa yang dibutuhkannya, dan memperbarui canvas saat tile baru tiba. Pipeline vector tile melakukan pekerjaan ekstra untuk merender geometri ke piksel di GPU, itulah mengapa peta web modern tetap tajam pada zoom dan rotasi apa pun.

Menyimpan dan Berbagi State Viewport

Menyimpan viewport dalam URL adalah pola standar untuk tautan peta yang dapat dibagikan. Sebagian besar produk menggunakan URL hash seperti #map=14.5/52.5200/13.4050 (zoom, lat, lng). Saat halaman dimuat, parse hash tersebut dan terapkan viewport. Saat viewport berubah, debounce beberapa ratus milidetik dan perbarui hash agar tombol back browser tetap berguna.

Untuk state internal browser lintas tab atau sesi, key localStorage dengan bentuk yang sama sudah cukup. Untuk halaman yang dirender server, viewport sering muncul sebagai query param untuk URL yang ramah SEO (?zoom=14&lat=52.52&lng=13.405).

Viewport Bias untuk Pencarian dan Autocomplete

Geocoding API menerima viewport (atau bbox-nya) sebagai parameter bias. MapAtlas mengekspos boundary.rect.* untuk filter keras dan focus.point.* untuk bias lunak. Tanpa bias, autocomplete untuk "Springfield" mengembalikan Springfield yang paling populer secara global. Dengan viewport bias, pengguna yang mengetik di dalam peta Massachusetts mendapatkan hasil Massachusetts lebih dulu.

Terapkan bias ini pada setiap ketukan tombol. Biayanya adalah satu parameter dan saran yang jauh lebih relevan.

Viewport Awal: Mulai dari Mana

Hal pertama yang harus diputuskan setiap aplikasi peta adalah dari mana memulai. Pola umum:

• Default ke locale pengguna: pengguna di Jerman mendarat di viewport di atas Berlin, pengguna di Prancis di atas Paris.
• Default ke viewport terakhir pengguna: pertahankan viewport lintas sesi.
• Default ke data: jika petamu menampilkan hasil pencarian, sesuaikan bbox dari hasil tersebut pada render awal.
• Default ke geolokasi IP pengguna: presisi rendah, tidak memerlukan izin, fallback yang baik.
• Minta geolokasi browser hanya saat pengguna secara eksplisit memilih: jangan pernah saat pemuatan pertama tanpa persetujuan UI.

Memilih viewport awal yang masuk akal adalah detail kecil dengan efek besar pada kualitas yang dirasakan.

Cara MapAtlas Mengekspos State Viewport

Komponen Dynamic Maps MapAtlas mengekspos API getCenter, getZoom, getBearing, getPitch, dan setView yang sama dengan yang disediakan setiap peta web tingkat developer, dengan tambahan hosting khusus EU dan parameter viewport bias yang konsisten di seluruh endpoint Geocoding dan Search. Untuk pemahaman lebih dalam tentang cara viewport berinteraksi dengan tile dan proyeksi, lihat Apa Itu Vector Tile dan Apa Itu Web Mercator.