Jika kamu pernah menggunakan Google Maps, OpenStreetMap, atau peta web modern dalam satu dekade terakhir, setiap jalan dan bangunan yang kamu lihat kemungkinan besar dimuat sebagai vector tile. Format ini adalah pahlawan yang tidak dikenal dari kartografi web modern. Inilah yang membuat peta web memuat dengan cepat, terlihat tajam di layar apa pun, dan memungkinkan desainer menghadirkan peta bergaya indah tanpa merender ulang seluruh dunia untuk setiap brand.
Panduan ini menjelaskan apa itu vector tile, cara kerjanya, mengapa ia menggantikan raster tile untuk sebagian besar kasus penggunaan, dan bagaimana MapAtlas menyajikannya di production.
Definisi Satu Kalimat
Vector tile adalah file biner kecil yang berisi fitur geografis untuk satu tile peta pada zoom level tertentu, dikodekan sebagai data bukan sebagai gambar yang telah dirender sebelumnya.
Bagian "data bukan gambar" adalah inti persoalannya. Dengan raster tile, server sudah memutuskan tampilan setiap piksel. Dengan vector tile, klien menerima geometri yang mendasarinya (garis, poligon, titik) dan label, lalu merendernya saat itu juga ke gaya apa pun yang dipilih pengguna.
Cara Peta Web Menggunakan Tile
Setiap peta web yang pernah kamu gunakan membagi dunia menjadi grid tile. Pada zoom 0, seluruh dunia muat dalam satu tile. Pada zoom 1 ada 4 tile, pada zoom 2 ada 16, dan seterusnya. Setiap tile diidentifikasi dengan tiga angka: zoom (z), kolom (x), dan baris (y). Saat kamu panning atau zooming, map library hanya mengambil tile yang terlihat, menyimpannya di cache, dan membuang yang sudah meninggalkan viewport.
Untuk raster tile, server merender PNG untuk setiap (z, x, y) terlebih dahulu. Ini berfungsi tetapi memiliki keterbatasan: gayanya tetap saat render, setiap perubahan gaya berarti merender ulang seluruh dunia, dan gambar harus dikirim dalam resolusi 1x dan 2x agar terlihat tajam di layar retina.
Vector tile membalikkan modelnya. Server mengirim geometri. Klien merender. Satu tileset mendukung gaya apa pun, terlihat tajam di DPI apa pun, dan tetap kecil saat dikirim.
Format MVT
Format standar de facto adalah MVT, spesifikasi Mapbox Vector Tile. MVT adalah encoding Protocol Buffers yang mengorganisir fitur ke dalam layer bernama, biasanya:
transportation(jalan, kereta api)buildings(jejak bangunan)places(kota, kota kecil, lingkungan yang bernama)landuse(taman, perumahan, komersial)water(samudra, danau, sungai)boundaries(area admin)
Setiap fitur dalam layer memiliki geometri (titik, garis, poligon) dan sekumpulan atribut (nama, tipe, kepentingan, varian bahasa). Koordinat geometri adalah bilangan bulat dalam ruang koordinat lokal tile, berkisar dari 0 hingga 4096, yang memberikan MVT ukurannya yang kompak.
MVT sepenuhnya terbuka, vendor-neutral, dan didukung oleh setiap rendering engine utama: Mapbox GL JS, MapLibre GL JS, OpenLayers, deck.gl, dan Mapbox SDK untuk iOS dan Android.
Mengapa Vector Tile Menggantikan Raster Tile
Ada lima alasan mengapa peta web modern hampir secara universal menggunakan vector tile untuk base layer:
Fleksibilitas gaya. Dengan satu tileset kamu bisa merender tema terang, tema gelap, gaya yang dioptimalkan untuk cetak, gaya overlay satelit, dan gaya berwarna brand untuk pemasaran. Tanpa re-rendering di server.
Sempurna di piksel pada DPI apa pun. Raster tile pada 1x terlihat buram di layar Retina. Vector tile dirender segar di klien pada resolusi asli perangkat.
Payload lebih kecil. Tile perkotaan yang kompleks sering kali lebih kecil sebagai MVT daripada sebagai PNG berkualitas tinggi, terutama saat di-gzip.
Interaktivitas runtime. Kamu bisa menyorot jalan tertentu saat hover, memudarkan layer yang tidak digunakan, menganimasikan transisi, dan merespons klik fitur karena klien tahu apa yang diwakili setiap piksel.
Zooming dan rotasi yang mulus. Geometri vektor berputar dan diskalakan tanpa aliasing. Raster tile terlihat pixelated saat di-zoom di antara zoom level integer atau diputar di luar sumbu.
Biayanya adalah pekerjaan CPU dan GPU klien, yang bukan masalah di perangkat apa pun yang dibuat dalam satu dekade terakhir.
Apa yang Kamu Style saat Runtime
Dokumen gaya (biasanya JSON dalam Mapbox Style Spec, yang juga diadopsi oleh MapLibre) menjelaskan bagaimana setiap layer harus digambar. Contoh apa yang bisa kamu ubah tanpa menyentuh data tile:
- Warna setiap kelas jalan
- Lebar garis jalan, bervariasi berdasarkan zoom
- Label tempat mana yang ditampilkan pada zoom berapa
- Font, ukuran, dan halo setiap label teks
- Visibilitas seluruh layer (matikan semua batas admin dengan satu toggle)
- Pengisian pola, garis putus-putus, gradien, efek blur
Inilah yang membuat peta bermerek menjadi mungkin. Tim desain bisa menghadirkan Mapbox style JSON, MapLibre style JSON, atau preset gaya MapAtlas dan tileset yang sama dirender dalam identitas brand mereka.
Caching dan Performa
Vector tile di-cache dengan sangat baik karena geometri dunia tidak berubah setiap menit. Cache edge CDN biasanya menyimpan tile MVT selama berjam-jam atau berhari-hari. Map library melakukan prefetch tile sesuai arah pan yang mungkin dilakukan pengguna dan menyimpan tile yang baru-baru ini dilihat di memori. Hasilnya adalah pengguna yang panning melintasi kota melihat pengalaman yang mulus karena tile untuk viewport berikutnya biasanya sudah dimuat.
Layanan tile production biasanya mengekspos tile di path seperti /{z}/{x}/{y}.pbf (PBF adalah ekstensi biner protobuf). Koneksi HTTP/2 atau HTTP/3 modern memultipleks puluhan permintaan tile secara paralel.
Di Mana MapAtlas Berperan
MapAtlas menyajikan vector tile yang kompatibel dengan MVT untuk produk Dynamic Maps, dengan hosting khusus EU, harga yang dapat diprediksi, dan skema tile yang dirancang untuk styling downstream dan anotasi AI. Layer data yang sama yang mendorong peta yang terlihat (places, transportation, buildings, points of interest) juga diekspos sebagai data terstruktur melalui Geocoding dan Search API, sehingga fitur yang kamu lihat di peta dapat diambil sebagai catatan JSON bertipe untuk logikamu sendiri.
Untuk pemahaman lebih dalam tentang layer rendering, panduan Kustom Gaya Peta mencakup cara menghadirkan gaya vector tile yang selaras dengan brand dari awal hingga akhir.
Pertanyaan yang Sering Diajukan
Apa itu vector tile?
Vector tile adalah file biner kecil yang berisi fitur geografis (jalan, bangunan, titik-titik minat, label) untuk satu tile peta web pada zoom level tertentu. Tidak seperti raster tile yang merupakan gambar PNG atau JPG yang telah dirender sebelumnya, vector tile menyimpan geometri dan atribut yang mendasarinya sebagai data. Browser atau klien mobile merender data tersebut menjadi piksel saat runtime, yang berarti tile yang sama dapat diberi gaya berbeda, diputar, dan dirender pada kepadatan piksel apa pun tanpa kehilangan ketajaman.
Apa perbedaan antara vector tile dan raster tile?
Raster tile adalah gambar PNG atau JPG tetap, biasanya 256x256 atau 512x512 piksel, yang telah dirender sebelumnya di server dengan gaya tetap. Vector tile adalah file biner yang berisi geometri dan atribut, dirender menjadi piksel oleh klien. Vector tile lebih kecil saat dikirim, mendukung restyling saat runtime, terlihat tajam pada zoom dan DPI apa pun, dan memungkinkan kamu mengaktifkan atau menonaktifkan layer tanpa mengambil ulang. Tradeoffnya adalah klien perlu melakukan pekerjaan rendering, yang tidak masalah di browser atau ponsel modern mana pun.
Apa itu format MVT?
MVT adalah spesifikasi Mapbox Vector Tile, format standar de facto untuk vector tile. Ini adalah encoding Protocol Buffers (protobuf) dari fitur geografis untuk satu tile, yang diorganisir ke dalam layer bernama (misalnya roads, buildings, places). Format ini terbuka, vendor-neutral, dan didukung oleh setiap renderer peta modern (Mapbox GL, MapLibre, OpenLayers, deck.gl). MapAtlas menyajikan tile yang kompatibel dengan MVT melalui endpoint dynamic maps-nya.
Seberapa kecil vector tile?
Vector tile perkotaan khas pada zoom 14 berukuran antara 50 KB dan 200 KB saat dikirim, sering kali terkompresi menjadi 30-100 KB setelah gzip. Ukurannya bergantung pada kepadatan data area tersebut: tile yang mencakup pusat Paris lebih berat dari tile yang mencakup Samudra Atlantik. Sebagian besar peta production mencapai panning dan zooming yang mulus karena tile di-cache secara agresif, di-prefetch sebelum tampilan pengguna, dan dirender di GPU.
