Teknologi World Map Ultra-Kecil

Pengenalan tinyworldmap

• tinyworldmap adalah peta dunia untuk aplikasi web yang mengutamakan mode offline dan bandwidth rendah
• Dirancang untuk digunakan bersama Leaflet, dan mendukung semua tingkat zoom
• Versi paling lengkapnya hanya berukuran 300kB saat dikompresi dengan gzip
• Rendering sisi klien telah diprofilkan dan diuji secara ekstensif pada ponsel lama berperforma rendah berusia 10 tahun, tanpa lag yang terlihat
• Secara default menampilkan 10.000 kota dengan populasi tertinggi yang ditambahkan ke OpenStreetMap
• Pada saat penulisan, mencakup semua kota besar dan kecil dengan populasi di atas 48.000 jiwa

Cara menggunakan tinyworldmap

Menggunakan sebagai peta dasar

• Untuk menggunakan tinyworldmap sebagai peta dasar Leaflet, tambahkan berikut ini ke tag head:

• Skrip ini mencakup semua data yang diperlukan untuk menampilkan peta
• Alih-alih menambahkan tile layer ke peta Leaflet, gunakan berikut ini:

new L.GridLayer.TinyWorld().addTo(map)

• Konstruktor TinyWorld menerima berbagai opsi: backgroundColor, textFillColor, borderStrokeColor, borderFillColor, borderWidth, textStrokeColor (membedakan teks dari elemen lainnya), textStrokeWidth, cityFont (misalnya "12px Arial"), countryFont, dotColor
• Jika dotColor ditentukan, setiap kota akan ditampilkan sebagai titik. Ini meningkatkan kegunaan saat menggunakan versi tinyworldmap yang diperkecil tanpa batas negara

Menggunakan sebagai peta fallback

• Dalam aplikasi web yang mengutamakan mode offline, tidak mungkin menyimpan cache peta berbasis gambar di semua tingkat zoom (jumlah tile sangat besar dan ukurannya mencapai terabyte)
• Repositori ini menyediakan service worker yang memungkinkan fungsi offline pada aplikasi web
• Setelah service worker dipasang, peta fallback akan dimuat terlebih dahulu. Semua halaman yang dikunjungi akan di-cache, kecuali peta dasar
• Selama masih dapat terhubung ke server, data cache tidak akan digunakan
• Jika pengguna sedang offline, situs web akan disajikan dari cache, dan service worker akan mencegat permintaan ke server tile OSM lalu membuat tile pengganti secara lokal menggunakan tinyworldmap
• Sebelum mendaftarkan service worker, Anda harus terlebih dahulu mengubah semua bagian yang ditandai 'IMPORTANT' di dalam service worker
• Setelah didaftarkan, Anda wajib menampilkan atribusi untuk OpenStreetMap dan tinyworldmap pada tile layer seperti berikut:

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)'
}).addTo(map);

• Untuk melihat contoh aplikasi produksi yang menggunakan tinyworldmap sebagai fallback, kunjungi Hitchmap. Muat situs web di browser yang mendukung service worker, tunggu sebentar, lalu matikan internet dan muat ulang; web app seharusnya tetap berfungsi normal dengan peta fallback. Pemasangan service worker mungkin memerlukan waktu

Peta dunia yang lebih kecil

• Peta lengkap berukuran 300K dalam gzip / 694K setelah diekstrak. Untuk kasus penggunaan tertentu, ukuran ini mungkin masih terlalu besar

Tanpa garis batas

• tiny-world-noborders-10000.js(on) berisi semua data yang ada di versi lengkap kecuali batas negara dan garis pantai
• Versi gzip berkurang 100k, dan versi tanpa kompresi berkurang 200k
• Selain lebih kecil, versi tanpa batas memiliki keunggulan bahwa semua data yang disertakan akurat
• Batas negara pada versi lengkap tidak akurat pada tingkat zoom tinggi, sehingga bisa terlihat aneh saat melapisi bentuk yang sesuai dengan batas negara dan garis pantai. Dalam kasus seperti itu, versi tanpa batas lebih cocok
• Gaya default adalah sebagai berikut

Tanpa kota

• Tersedia dua versi tanpa label kota: tiny-world-nocities.js(on) (label negara tetap dipertahankan) dan tiny-world-borders.js(on) (label negara dihilangkan)
• Label kota memakan 410K dalam keadaan tidak terkompresi, dan 172K dalam keadaan terkompresi

Lebih sedikit kota

• Terakhir, setiap file yang menyertakan label kota juga tersedia dalam versi yang berisi 2.000 kota dan 4.000 kota
• Cukup ganti 10000 pada nama file menjadi 2000 atau 4000

Jumlah kota yang disertakan	Populasi
10,000	> 48,000
4,000	> 137,000
2,000	> 287,000

Mempekerjakan tinyworldmap

• Jika Anda membutuhkan peta kustom (misalnya lebih detail atau dalam bahasa lain), atau memerlukan bantuan untuk menerapkan fungsi offline di situs web Anda, silakan hubungi [e-mail]

Atribusi

• Seperti data OpenStreetMap, data tinyworldmap dilisensikan di bawah ODBL sehingga atribusi wajib ditampilkan
• Jika Anda mengikuti langkah-langkah yang dijelaskan di atas, footer Leaflet seharusnya sudah mencakup atribusi untuk OpenStreetMap dan tinyworldmap. Jika belum, tambahkan berikut ini:

© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)

Opini GN⁺

• tinyworldmap menyediakan peta dunia ringan yang dapat digunakan untuk peta offline atau perangkat berspesifikasi rendah. Ini tampak berpotensi menjadi solusi pengganti OpenStreetMap yang ada
• Keunggulannya adalah menyediakan versi yang lebih ringan dengan mengecualikan batas negara, kota, dan elemen lainnya secara opsional. Peta kustom juga dapat digunakan sesuai kebutuhan sehingga terlihat sangat fleksibel
• Namun, agar dapat berjalan offline, dibutuhkan implementasi teknis seperti memodifikasi service worker, sehingga pengembang perlu memiliki tingkat pengalaman tertentu. Akan lebih baik jika tersedia panduan yang lebih rinci untuk bagian ini
• Di dalam negeri, API peta dari portal seperti Naver dan Kakao banyak digunakan; jika dapat diintegrasikan dengan layanan seperti ini untuk berjalan offline, tampaknya akan ada lebih banyak kasus penggunaan
• Karena memuat informasi kota-kota utama di seluruh dunia, ini tampaknya dapat berguna di bidang seperti perjalanan dan logistik. Dukungan multibahasa juga kemungkinan akan menjadi faktor penting

[GN⁺]

Komentar Hacker News

• Penulis berpendapat akan lebih baik jika lebih banyak data dialokasikan untuk garis pantai dan pembedaan kota metropolitan utama daripada detail wilayah pinggiran Detroit.
• Ada kritik bahwa detail garis pantai masih kurang, beberapa kota kecil di Inggris tampak tenggelam di laut, sementara Greenland dan Kanada utara memakai terlalu banyak titik sudut. Tampaknya proyeksi Mercator sudah diterapkan, tetapi ada juga pendapat bahwa wilayah tak berpenghuni sebaiknya diberi prioritas lebih rendah.
• Seorang pengguna membuat peta serupa yang berfokus pada internasionalisasi (i18n) dalam bahasa resmi PBB, kecuali bahasa Spanyol, dengan pendekatan offline-first, sangat kecil, dan berbasis vektor. Nama negara dan kota memakai nama yang secara resmi dinyatakan di PBB.
• Ada komentar bahwa populasi 10.000 permukiman teratas di dunia ternyata turun hingga 48.000 jiwa, tetapi masih sulit menilai apakah angka itu benar-benar mengejutkan.
• Ide mengompresi data spasial menjadi path dinilai mengesankan, dan pemuatannya sangat cepat di perangkat mobile. Namun, ada juga usulan untuk memakai data Natural Earth alih-alih OSM agar lisensi ODbL tidak diperlukan, serta menyertakan alat untuk mengubah data spasial menjadi path.
• Ada pendapat bahwa ibu kota harus tetap disertakan dan ditandai secara khusus terlepas dari ukuran populasinya, serta bahwa peta ini tampaknya cocok untuk menjawab di halaman spesies kira-kira di mana spesies tersebut dapat ditemukan di dunia.
• Ada catatan bahwa penggunaan service worker untuk versi offline terasa janggal, dan diperlukan tutorial yang lebih ringkas agar orang bisa cepat memasang dan menggunakannya. Mungkin akan lebih baik jika cukup menyediakan file HTML dengan tile yang di-encode dalam base64 atau file ZIP.
• Menarik bahwa perubahan terbaru pada nama yang disukai seperti Czechia dan Macedonia sudah tercermin, tetapi Turki dan Timor-Leste masih belum.
• Progressive loading agak tidak stabil sehingga kadang tile tidak muncul saat melakukan zoom atau geser dengan cepat.