tinyworldmap tanıtımı
- tinyworldmap, offline-first ve düşük bant genişlikli web uygulamaları için bir dünya haritasıdır
- Leaflet ile kullanılmak üzere tasarlanmıştır ve tüm yakınlaştırma/uzaklaştırma seviyelerini destekler
- En kapsamlı sürüm gzip ile sıkıştırıldığında yalnızca 300kB boyutundadır
- İstemci tarafı render işlemi, 10 yıllık düşük performanslı telefonlarda kapsamlı biçimde profillenmiş ve test edilmiştir; fark edilir bir gecikme yoktur
- Varsayılan olarak OpenStreetMap'e eklenmiş nüfusu en yüksek 10.000 şehri gösterir
- Yazı yazıldığı sırada, nüfusu 48.000'in üzerindeki tüm şehir ve kasabaları içerir
tinyworldmap nasıl kullanılır
Temel harita olarak kullanma
- tinyworldmap'i Leaflet temel haritası olarak kullanmak için
head etiketine şunu ekleyin:
- Bu script, haritayı göstermek için gereken tüm verileri içerir
- Leaflet haritasına tile layer eklemek yerine şunu kullanın:
new L.GridLayer.TinyWorld().addTo(map)
TinyWorld yapıcısı birden çok seçenek alır: backgroundColor, textFillColor, borderStrokeColor, borderFillColor, borderWidth, textStrokeColor (metni diğerlerinden ayırmak için), textStrokeWidth, cityFont (ör. "12px Arial"), countryFont, dotColordotColor belirtilirse her şehir bir nokta olarak gösterilir. Bu, sınırların çıkarıldığı tinyworldmap'in küçültülmüş sürümü kullanıldığında kullanılabilirliği artırır
Yedek harita olarak kullanma
- Offline-first web uygulamalarında tüm yakınlaştırma seviyeleri için görüntü tabanlı haritaları önbelleğe almak mümkün değildir (tile sayısı çok büyüktür ve boyutları terabayt seviyesindedir)
- Bu depo, web uygulamanıza offline işlevsellik kazandırmak için kullanılabilecek bir service worker sağlar
- Service worker kurulduğunda yedek harita önceden yüklenir. Ziyaret edilen tüm sayfalar önbelleğe alınır, ancak temel harita hariç tutulur
- Sunucuya bağlanılabildiği sürece önbellekteki veriler kullanılmaz
- Kullanıcı offline durumdaysa web sitesi önbellekten sunulur ve service worker, OSM tile sunucusuna giden istekleri yakalayarak tinyworldmap kullanıp yerelde yedek tile'lar üretir
- Service worker'ı kaydetmeden önce, service worker içinde 'IMPORTANT' olarak işaretlenmiş tüm bölümleri önce düzenlemelisiniz
- Kayıt yapıldıktan sonra tile layer içinde hem OpenStreetMap hem de tinyworldmap için attribution mutlaka şu şekilde belirtilmelidir:
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);
- tinyworldmap'i yedek olarak kullanan bir production uygulaması örneği görmek için Hitchmap'i ziyaret edin. Service worker destekleyen bir tarayıcıda web sitesini yükleyin, kısa süre bekleyin, ardından interneti kapatıp yeniden yükleyin; web uygulaması yedek haritayı kullanarak düzgün çalışmalıdır. Service worker'ın kurulması biraz zaman alabilir
Daha küçük dünya haritaları
- Tam harita gzip ile sıkıştırıldığında 300K / sıkıştırılmamış halde 694K boyutundadır. Belirli kullanım senaryolarında bu boyut bile hâlâ fazla büyük olabilir
Sınır çizgileri yok
tiny-world-noborders-10000.js(on), sınırlar ve kıyı çizgileri dışında tam sürümde bulunan tüm verileri içerir- gzip sıkıştırılmış sürümde 100k, sıkıştırılmamış sürümde 200k daha küçüktür
- Sınır içermeyen sürüm yalnızca daha küçük olmakla kalmaz, aynı zamanda içerdiği tüm verilerin doğru olması avantajına da sahiptir
- Tam sürümdeki sınırlar yüksek yakınlaştırma seviyelerinde doğru değildir; bu yüzden sınır ve kıyı çizgilerine uyan şekiller overlay edildiğinde garip görünebilir. Bu tür durumlarda sınır içermeyen sürüm daha uygun olur
- Varsayılan stil aşağıdaki gibidir
Şehir yok
- Şehir etiketleri olmayan sürüm için iki seçenek vardır:
tiny-world-nocities.js(on) (ülke etiketleri korunur) ve tiny-world-borders.js(on) (ülke etiketleri de çıkarılır)
- Şehir etiketleri sıkıştırılmamış halde 410K, sıkıştırılmış halde 172K yer kaplar
Daha az şehir
- Son olarak, şehir etiketleri içeren her dosyanın 2.000 ve 4.000 şehir içeren sürümleri de vardır
- Dosya adındaki
10000 ifadesini 2000 veya 4000 ile değiştirmeniz yeterlidir
| Dahil edilen şehir sayısı |
Nüfus |
| 10,000 |
> 48,000 |
| 4,000 |
> 137,000 |
| 2,000 |
> 287,000 |
tinyworldmap ile çalışma
- Özel bir haritaya (ör. daha ayrıntılı ya da farklı bir dilde) ihtiyacınız varsa veya web sitenizde offline işlevsellik uygulama konusunda yardıma ihtiyacınız olursa business@tinyworldmap.com adresiyle iletişime geçin
Atıf
- OpenStreetMap verilerinde olduğu gibi, tinyworldmap verileri de ODBL kapsamında lisanslandığından attribution gerektirir
- Yukarıda açıklanan adımları izlediyseniz, Leaflet altbilgisinde hem OpenStreetMap hem de tinyworldmap için attribution bulunmalıdır. Aksi halde şunu ekleyin:
© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)
GN⁺ görüşü
- tinyworldmap, offline haritalar veya düşük özellikli cihazlarda kullanılabilecek hafif bir dünya haritası sunuyor. Mevcut OpenStreetMap vb. çözümlerine alternatif olabilecek bir seçenek gibi görünüyor
- Sınırlar, şehirler vb. öğeleri isteğe bağlı olarak çıkararak daha hafif sürümler sunması önemli bir avantaj. İhtiyaca göre özel haritalar da kullanılabildiği için kullanım alanı geniş görünüyor
- Ancak offline çalışması için service worker üzerinde değişiklik yapılması gibi teknik uygulamalar gerekiyor; bu nedenle geliştiricinin belli bir deneyime sahip olması beklenir. Bu konuda daha ayrıntılı bir kılavuz sunulması faydalı olabilir
- Türkiye'de Naver, Kakao gibi portalların harita API'leri yaygın kullanılmasa da, benzer servislerle entegre edilip offline çalışabilirse kullanım örnekleri daha da artabilir
- Dünya genelindeki başlıca şehir bilgilerini içerdiği için seyahat, lojistik gibi alanlarda faydalı olabilir. Çok dilli destek sunup sunmadığı da önemli olacaktır
1 yorum
Hacker News görüşleri