Cara Mengubah Tampilan Peta di Leaflet.js Menggunakan Tile Layer

Pendahuluan

Pada artikel sebelumnya, kita telah berhasil menampilkan peta menggunakan Leaflet.js serta menambahkan marker dan popup untuk menampilkan informasi lokasi tertentu. Namun, tampilan peta yang digunakan masih menggunakan gaya bawaan dari OpenStreetMap.

Leaflet.js memungkinkan kita untuk mengubah tampilan peta dengan mudah menggunakan Tile Layer. Dengan mengganti sumber tile yang digunakan, kita dapat mengubah peta menjadi tema terang, tema gelap, hingga tampilan satelit tanpa perlu mengubah marker maupun popup yang telah dibuat sebelumnya.

Pada artikel ini, kita akan mempelajari cara mengubah tampilan peta di Leaflet.js menggunakan berbagai jenis Tile Layer yang populer dan sering digunakan pada aplikasi berbasis peta.

Apa Itu Tile Layer?

Tile Layer adalah kumpulan gambar peta berukuran kecil yang disusun secara otomatis oleh Leaflet.js sehingga membentuk sebuah peta utuh.

Ketika pengguna melakukan zoom atau menggeser peta, Leaflet.js akan mengambil tile yang dibutuhkan dari server penyedia peta dan menampilkannya pada layar secara otomatis.

Pada artikel sebelumnya, kita menggunakan Tile Layer bawaan OpenStreetMap seperti berikut:

L.tileLayer(
    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

Untuk mengubah tampilan peta, kita hanya perlu mengganti URL pada L.tileLayer() tanpa perlu mengubah kode marker maupun popup yang telah dibuat sebelumnya.

1. OpenStreetMap (Default)

OpenStreetMap merupakan tampilan standar yang paling sering digunakan pada proyek berbasis Leaflet.js.

L.tileLayer(
    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    {
        attribution: '&copy; OpenStreetMap contributors'
    }
).addTo(map);

OpenStreetMap (Default)
Tampilan ini cocok digunakan untuk aplikasi umum karena memiliki keseimbangan antara detail dan keterbacaan.

2. CartoDB Positron

CartoDB Positron menawarkan tampilan yang lebih bersih dan minimalis dibandingkan OpenStreetMap.

L.tileLayer(
    'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
    {
        attribution: '&copy; OpenStreetMap contributors &copy; CARTO'
    }
).addTo(map);

CartoDB Positron

Karena tampilannya cukup sederhana, style ini sangat cocok digunakan pada dashboard atau aplikasi yang memiliki banyak marker.

3. CartoDB Dark Matter

Jika aplikasi Anda menggunakan tema gelap, CartoDB Dark Matter dapat menjadi pilihan yang menarik.

L.tileLayer(
    'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
    {
        attribution: '&copy; OpenStreetMap contributors &copy; CARTO'
    }
).addTo(map);

CartoDB Dark Matter

Tampilan ini sering digunakan pada dashboard monitoring, sistem informasi geografis, dan aplikasi dengan mode gelap.

4. CartoDB Voyager

CartoDB Voyager memiliki tampilan yang lebih berwarna dan modern.

L.tileLayer(
    'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
    {
        attribution: '&copy; OpenStreetMap contributors &copy; CARTO'
    }
).addTo(map);

Style ini cukup populer karena tampilannya mirip dengan layanan peta komersial yang sering digunakan sehari-hari.

5. Esri World Imagery

Jika Anda membutuhkan tampilan satelit, Anda dapat menggunakan tile layer dari Esri.

L.tileLayer(
    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    {
        attribution: '&copy; Esri'
    }
).addTo(map);

Esri World Imagery

Peta satelit sangat cocok digunakan untuk aplikasi pemantauan wilayah, pertanian, perkebunan, maupun analisis lokasi.

6. OpenTopoMap

OpenTopoMap menyediakan informasi topografi seperti kontur dan elevasi wilayah.

L.tileLayer(
    'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
    {
        attribution: '&copy; OpenStreetMap contributors, SRTM | OpenTopoMap'
    }
).addTo(map);

Jenis peta ini sering digunakan untuk kegiatan pendakian, penelitian geografis, dan analisis medan.

Hasil Akhir

Setelah mengganti Tile Layer, marker dan popup yang telah dibuat sebelumnya akan tetap berfungsi seperti biasa karena perubahan ini hanya memengaruhi tampilan dasar peta.

Sebagai contoh, kode berikut akan tetap berjalan tanpa perlu dimodifikasi:

L.marker([-0.9471, 100.4172])
    .addTo(map)
    .bindPopup('Halo, ini lokasi saya!')
    .openPopup();

Penutup

Pada artikel ini, kita telah mempelajari cara mengubah tampilan peta di Leaflet.js menggunakan Tile Layer. Dengan hanya mengganti URL pada L.tileLayer(), kita dapat menggunakan berbagai jenis peta sesuai kebutuhan aplikasi yang sedang dikembangkan.

Setiap Tile Layer memiliki karakteristik dan kegunaannya masing-masing. OpenStreetMap cocok untuk penggunaan umum, CartoDB Positron menawarkan tampilan minimalis, Dark Matter cocok untuk tema gelap, sedangkan Esri World Imagery menyediakan tampilan satelit yang lebih detail.

Pada artikel berikutnya, kita akan mempelajari cara menampilkan lebih dari satu marker pada peta sehingga kita dapat menampilkan banyak lokasi sekaligus dalam satu tampilan peta.

Terima kasih telah menyimak artikel ini dan selamat mencoba berbagai variasi tampilan peta menggunakan Leaflet.js.