Ultra küçük World Map teknolojisi

 (github.com/tinyworldmap)
9 puan yazan GN⁺ 2024-04-22 | 1 yorum | WhatsApp'ta paylaş
  • 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
  • Tüm zoom seviyelerini destekler; en eksiksiz sürüm gzip ile 450KB boyutundadır. İstemci tarafı render işlemi, 10 yıllık düşük donanımlı telefonlarda hissedilir gecikme olmayacak şekilde profillenmiş ve test edilmiştir
  • Varsayılan haritada, OpenStreetMap’e eklenmiş nüfusa göre en büyük 10.000 şehir gösterilir; yazım anı itibarıyla nüfusu 48.000 ve üzeri olan şehir ve kasabaları kapsar
  • İki kullanım biçimi vardır: OpenStreetMap tile’larının yerini alan bir basemap olarak ya da offline durumdayken OSM tile isteklerini yerelde üretilen tile’larla değiştiren bir fallback harita olarak
  • Harita verileri OpenStreetMap gibi ODBL lisansına tabidir; Leaflet footer’ı vb. yerlerde OpenStreetMap ve tinyworldmap atıf bilgisi gerekir

tinyworldmap’in amacı ve kapsamı

  • 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 zoom seviyelerini destekler
  • En eksiksiz sürüm gzip ile 450KB, açılmış halde 1.1MB boyutundadır
  • İstemci tarafı render işlemi, 10 yıllık düşük donanımlı telefonlarda kapsamlı şekilde profillenmiş ve test edilmiştir; hissedilir bir gecikme görülmemiştir
  • Demolar Nightly demo, Stable demo ve v3 announcement olarak sunulur

Varsayılan harita verileri

  • Varsayılan ayarlarda OpenStreetMap’e eklenmiş nüfusa göre en büyük 10.000 şehir gösterilir
  • Yazım anı itibarıyla bu kapsam, nüfusu 48.000 ve üzeri olan tüm şehir ve kasabaları içerir

Leaflet’te iki kullanım biçimi

  • Basemap olarak kullanım

    • tinyworldmap’i Leaflet basemap’i olarak kullanmak için head etiketine dağıtım script’i eklenir
    • Kararlı sürüm script’i https://tinyworldmap.com/dist/v3/tiny-world-all-10000.js adresindedir ve haritayı göstermek için gereken tüm verileri içerir
    • Leaflet tile layer yerine aşağıdaki biçimde L.GridLayer.TinyWorld eklenir
    new L.GridLayer.TinyWorld({maxZoom: 19}).addTo(map)

  • Offline fallback harita olarak kullanım

    • Offline-first web uygulamalarında görsel tabanlı haritayı tüm zoom seviyelerinde cache’lemek, tile sayısı çok fazla olduğu için mümkün değildir; toplam boyut çoğu zaman terabaytlar düzeyine çıkar
    • Bu depo, harita içeren web uygulamalarının offline işlevselliği için bir service worker sağlar
    • Service worker kurulduğunda fallback harita önceden yüklenir
    • Ziyaret edilen sayfalar cache’lenir
    • Basemap cache dışında bırakılır
    • Sunucuya erişilebildiğinde cache verisi kullanılmaz
    • Kullanıcı offline olduğunda web sitesi cache’ten sunulur ve service worker, OSM tile sunucusu isteklerini yakalayarak tinyworldmap ile yerelde alternatif tile’lar üretir
    • Service worker’ı kaydetmeden önce service worker içindeki IMPORTANT ile işaretlenmiş tüm bölümler düzenlenmelidir
    • Kayıttan sonra Leaflet tile layer’ın atıf bilgisinde OpenStreetMap ve tinyworldmap birlikte yer almalıdır
    • Hitchmap, tinyworldmap’i fallback olarak kullanan bir production uygulama örneğidir
    • Service worker destekleyen bir tarayıcıda web sitesini açıp kısa bir süre bekledikten sonra interneti kapatıp sayfayı yenilerseniz uygulamanın fallback haritayla düzgün çalışması gerekir
    • Service worker kurulumu zaman alabilir

Harita stili ve özel haritalar

  • Constructor, haritanın görünümünü değiştirmek için render seçeneğini alabilir
  • Her layer’ın style seçeneği Canvas’ın CanvasRenderingContext2D arayüzüne uygulanır
  • Örneğin state_borders layer’ına fillStyle belirterek stili değiştirebilirsiniz
let render = {
    state_borders: {
        style: {fillStyle: '#f00'}
    }
}

new L.GridLayer.TinyWorld({maxZoom: 19, render}).addTo(map)
  • Kuruluşunuzun yol haritası, şehir haritası, başka dillerde haritalar veya OSM ya da OSM dışı veriler içeren özel içerik haritalarına ihtiyacı varsa business@tinyworldmap.com adresinden fiyat teklifi isteyebilirsiniz

Daha küçük harita dosyası seçenekleri

  • Sınır çizgileri olmayan sürüm

    • tiny-world-cities-10000.js(on), tam sürümden eyalet/il sınırları, ülke sınırları ve kıyı çizgileri çıkarılmış verileri içerir
    • Bu sürüm gzip bazında 300KB, açılmış halde 825KB tasarruf sağlar
    • Sınır çizgileri olmayan sürümün avantajı, içerdiği tüm verilerin hassas olmasıdır
    • Tam sürümdeki ülke sınırları yüksek zoom seviyelerinde doğru değildir; bu yüzden ülke sınırlarına veya kıyı çizgilerine uyan şekiller overlay edildiğinde garip görünebilir
    • Bu gibi durumlarda sınır çizgileri olmayan sürüm çoğu zaman daha iyi görünür

  • Şehir etiketi olmayan sürüm

    • Şehir etiketi olmayan iki dosya vardır
    • tiny-world-borders.js(on): eyalet/il sınırlarını atlar
    • tiny-world-nocities.js(on): eyalet/il sınırlarını korur
    • Şehir etiketleri açılmış halde 410KB, sıkıştırılmış halde 172KB yer kaplar

  • Şehir sayısı azaltılmış sürüm

    • Şehir etiketi içeren dosyaların 2.000 ve 4.000 şehirlik sürümleri de sunulur
    • Dosya adında 10000 değerini 2000 veya 4000 ile değiştirmeniz yeterlidir
    • | Dahil edilen şehir sayısı | Nüfus eşiği |
    • | --- | --- |
    • | 10.000 | 48.000’den fazla |
    • | 4.000 | 137.000’den fazla |
    • | 2.000 | 287.000’den fazla |

Lisans ve atıf

  • tinyworldmap verileri, OpenStreetMap verileri gibi ODBL lisansına tabidir
  • ODBL atıf gerektirir
  • Belirtilen şekilde ayarladıysanız Leaflet footer’ında OpenStreetMap ve tinyworldmap atıf bilgileri yer almalıdır
  • Aksi halde OpenStreetMap ve tinyworldmap atıf bilgilerini ayrıca eklemeniz gerekir

İlgili okumalar

1 yorum

 
GN⁺ 2024-04-22
Hacker News yorumları

  • Fikir hoşuma gitti. Çok fazla uzaklaştırınca sunucunun az önce istediğiniz kıta karosunu render etmesini beklemek zorunda kalma sorununu çözdüğü için iyi.
    Ancak Detroit banliyöleri olan West Bloomfield Township ile Waterford Charter Township’in göreli konumunu bilebildiğim, ama hangi eyalette olduklarını ya da Great Lakes’in varlığını bile bilmediğim kullanım senaryosunun ne olduğunu pek anlayamıyorum.
    Kıyı şeritleri için çok daha fazla veri, büyük metropol alanlarının alt ayrımları içinse çok daha az veri kullanılsa iyi olurdu.

    • Yön doğru, ama en büyük 100 ada, en büyük 50 göl, en büyük 200 nehir gibi başlıca yeryüzü şekillerinin mutlaka dahil edilmesi gerektiğini düşünüyorum.
    • Yollar ve demiryolları için de aynı şey geçerli. Arabada bulundurulacak bir yol haritasıysa gerekli, ama bunun dışında yolların nerede olduğunu bilmeye pek gerek yok.
      Diğer olası bilgilerin çok fazlasını örtüyorlar.
    • Meraktan birkaç yere baktım; ABD Virginia’daki Alexandria nehrin karşı tarafında görünüyor ve Bahrain oldukça feci çıkmış.
    • Bu kısım v2’de iyileştirilmiş.

  • Harika ama kıyı şeridi detayı çok düşük. Birleşik Krallık’taki bazı kasabalar denizin üstünde yüzüyor; buna karşılık Greenland ve Northern Canada tüm köşeleri kapmış durumda.
    Mercator projeksiyonuna göre detay düzeyini zaten hesaba katmış gibi görünüyorlar, ama neredeyse kimsenin yaşamadığı bölgelerin önceliği düşürülse iyi olur.

    • Güzel proje. Dahil edilecek yerleri seçerken Wikidata’nın QRank’i de kullanılırsa, nüfusu az olsa bile ünlü adalar görünebilir gibi.
      QRank’in SQLite DB’si de daha önce HN’de paylaşılmıştı.
      [1] https://qrank.wmcloud.org/
      [2] https://github.com/hikeratlas/qrank
    • Şehir detayı ile kıyı şeridi detayı arasındaki oran tuhaf biçimde şehirler lehine kaymış. Doğru sınırlar ya da kıyı şeritleri yerine daha fazla şehir koymayı tercih etmiş gibi görünüyor.
      Netherlands’ın bir eyaleti ülkenin ana karasından kopuk, ada gibi gösteriliyor; gerçekte öyle değil. Ama o eyalet içindeki beş şehir adını biliyor ve bunlardan bazıları neredeyse üst üste biniyor.
      Öte yandan Afsluitdijk’in eklenmesi bana kişisel olarak gereksiz bir detay gibi geliyor; ama hangi kara parçasının çizileceğini basit deniz altyapısından programatik olarak ayırmanın zor olduğunu anlıyorum.
      Sorun takipçisine bir bilet açmak gerekir, ama mobilde oturum açmadığım için şimdilik HN yorumu en iyi seçenek. Benzer hisseden varsa bu yorumu dayanak göstererek oran ayarı, şehirler arası asgari mesafe getirme, toplam dosyayı küçültme gibi iyileştirmeler önerebilir.
    • Bu yüzden adalarda ya da takımada bölgelerinde neredeyse kullanılamaz hale geliyor. Philippines de ada sayısı fazla olan bir yer, ama oldukça büyük birkaç adası olmasına rağmen harita olarak işe yarar değil.
      French Polynesia haritada hiç yok.
    • Fiyortları kaldırıp başka yerlere daha fazla detay ekleyen bir nightly sürüm yayımladım. Genel olarak çözünürlüğü de daha yüksek.
      Başta bunu yapmamamın nedeni, eski telefonlarda, özellikle Firefox for Android’de çok sayıda poligon çizerken çökme yaşanabilmesiydi. Daha sonra çizim sürecini optimize ettim ama dikkatli olmak gerekiyor.
      [1] https://tinyworldmap.com/beta.html
    • Sadeleştirme genel olarak özensiz. Caribbean’da bütün ülkeler eksik.
      Bu, temel kalite kontrol aşamasında yakalanması gereken bir şey.

  • Benzer bir şey yaptım. Çevrimdışı öncelikli, çok küçük, vektör tabanlı ve uluslararasılaştırmaya odaklı.
    UN’in tüm dillerinde sunuluyor. Ama Spanish’i düpedüz unutup atlamışım; birkaç saat içinde yapılabilir, utanç verici.
    Ülke ve şehir adlarında UN’e kayıtlı resmî adları kullanıyorum. Bu yüzden UK’nin resmî kısa adı “United Kingdom of Great Britain and Northern Ireland”.
    https://map.ache.one/en

    • Fena değil ama epey hata var. “Cape town” South Sudan’da gösteriliyor, ama ülkenin kendi adı yok; Eritrea’nın adı da eksik. Somalia bloğu iki farklı renkte iki parçaya ayrılmış.
      Hafif bir harita çizmek ve uluslararasılaştırmayı halletmek görece kolaydı. Çünkü birden çok açık veri kaynağı ve kütüphane var.
      Asıl zor kısım tamamen idari tanım meselesi. Çoğu ülkeye bağlı veriniz olduğunda harita kaynağıyla mutlaka uyuşmayan noktalar çıkıyor ve sonunda elle uyarlanmış bir harita yapmak zorunda kalıyorsunuz.
      “Ülke”nin ne olduğuna dair bir uzlaşı yok. Western Sahara resmî olarak ülke ama fiilen Morocco tarafından sürekli işgal edilmiş durumda; Somalia’da Somaliland ve Puntland fiilen bağımsız ülkeler gibi hareket ediyor ama resmî tanınmaları yok. Greenland, Niue vb. ise bunun arasında bir yerlerde.
    • Nasıl yaptığınıza dair bir açıklama bulamadım ama harita güzel. Tiny World Maps’te de konuyla ilgili içerik var, ama orada da üretim yönteminin açıklaması yeterli değil.
      Ülke düzeyinde denemiş biri olarak, kirli hack’ler içeren elle yürütülen bir süreçti ve doğru eşleştirip eşleştirmediğini test etmek en zor kısmıydı. Özellikle uygun genelleştirme düzeyi ve insanların kendi bölgelerinin haritasında beklediği görünüm zordu.
      Bu haritayı ciddi biçimde iyileştirmek için harcanacak emeği değerli görüp görmediğinizi merak ediyorum.
    • Yıldızın en büyük şehri mi yoksa başkenti mi gösterdiğini bilmiyorum; ikincisiyse Tanzania yanlış.
      Yıldız Dar Es Salaam’da, ama etiket Dodoma. Gerçek başkent Dodoma, ancak ülkenin daha orta kesimlerinde.
    • “i18n” kısaltmasının kendisi pek uluslararasılaştırılmış değil.

  • Sevimli. Eskiden tamamen aynı olmasa da benzer bir şey yapmıştım.
    https://web.archive.org/web/20020611095429/http://www.cs.man.ac.uk/~hancockd/CityZen/index.html
    20 bin çizgi parçası, 3.350 yer, görüntüleyici ve test dahil hepsi toplam 162KB idi.

  • Geri bildirim için teşekkürler. Seçimin arka planını açıklamak gerekirse, yakın zamana kadar bu projenin ana odağı ülke şekilleri değildi
    Uzun süre README’de yer alan sınırsız sürüm tek sürümdü ve tüm dünyayı eklemenin mümkün olduğunu düşünmüyordum. Ama mümkünmüş
    Fiyortları kaldırıp çok istenen adaları da dahil ederek başka yerlere daha fazla ayrıntı eklenmiş nightly sürümü yayımladım. Genel olarak çözünürlük de daha yüksek
    Başta böyle yapmamamın nedeni, eski telefonlarda, özellikle Firefox for Android’de çok sayıda çokgen çizerken çökme yaşanabilmesiydi. Sonrasında çizim sürecini optimize ettim ama dikkatli olmak gerekiyor
    [1] https://tinyworldmap.com/beta.html

  • Nüfusa göre ilk 10.000 şehirin en iyi filtre olup olmadığından emin değilim
    Bu yöntem büyük ülkelerdeki şehirleri önceliklendirir; küçük ülkelerde ise şehirlerin çoğunun dışarıda kalma ihtimali yüksek
    Her ülke için ilk X şehri ekleyen yardımcı bir filtre olmalı. Böylece küçük ülkelerin önemli şehirleri de yakalanabilir gibi görünüyor

    • Şehirlerin önemini ölçmek için başka ölçütler de var
      Ulusal başkentler, bölgesel başkentler, dünya şehirleri, bölge içindeki merkezilik gibi kriterler temel koşulları tamamlamakta faydalı olabilir
      Bu tartışmada coğrafyacılar ve haritacılar daha yararlı tavsiyeler verebilir gibi görünüyor

  • Dünyadaki en büyük 10.000 yerleşim yerini seçince nüfusun 48.000’e kadar düşmesi ilginçti
    Bu sayının şaşırtıcı olup olmadığına hâlâ karar vermeye çalışıyorum

    • ABD şehirlerinde nüfusa göre ilk 100’e bakıldığında yaklaşık 200 bin seviyesine kadar inildiğini uzun zamandır biliyordum
      200’e çıkarınca bile hâlâ 100 binin üzerinde. Wikipedia’ya göre #333 olan Daly City, CA’nın nüfusu 100.007: <https://en.wikipedia.org/wiki/List_of_United_States_cities_b...>
      Bu tür ölçek dağılımı, birçok başka ölçekleme durumunda olduğu gibi log-log grafikte genellikle doğrusal olmaya yakındır
      China’da nüfusu 1 milyonun altındaki bir şehre gelmeden önce 106. sıraya kadar inmek gerekiyor. ABD’de böyle şehirlerden yalnızca 9 tane var
      India’ya az önce baktım; nüfusu 1 milyonun üzerinde 46 şehir var, 100. sıradaki Malegaon 471 bin kişi, 300. sıradaki Aurangabad da hâlâ 100 binin üzerinde
      Ancak “şehir” son derece keyfî bir tanım. Dünyanın en büyük şehirlerinden bazıları, başka ülkelerin ölçütlerine göre metropol alanı, hatta eyalet ya da il bile sayılabilir
      Yüzölçümüne göre en büyük şehirlerin nüfusu ise oldukça az. Greenland’daki Sermersooq’un nüfusu 24.148, yüzölçümü 575.300 km²; bu, Rhode Island’ın yaklaşık 144 katı ve ABD eyaletleri içinde yalnızca Texas ve Alaska daha büyük. Alaska da sadece yaklaşık %12 daha büyük
      Kentsel coğrafya karmaşık bir alan; bu yüzden genellikle metropol istatistik alanları, yerleşik alan yüzölçümü ve nüfus gibi farklı ölçekler ve tanımlar birlikte karşılaştırılır. Böylece siyasi sınırların keyfîliği azaltılır ve toplam nüfus ile ekonomik etki daha iyi yansıtılabilir

  • Sınırlar bu kadar kaba olmasına rağmen dosya boyutunun bu seviyede olması oldukça şaşırtıcı
    Toplam veri boyutu, kullanışlılık ile dosya boyutu arasındaki denge noktasının epey altında gibi görünüyor. Örneğin iki kat büyük olsaydı bile sınırlar bu kadar pürüzlü olmazdı

    • Tüm dosya gzip sıkıştırması olmadan yaklaşık 700KB
      “Sınırlar ve kıyı çizgileri hariç tam sürümdeki tüm veriler var; bu da boyutu 200KB azaltıyor” açıklamasına bakılırsa yaklaşık %29’u sınır/kıyı verisi, %71’i şehir adları ve konumları
      Kişisel olarak birçok şehrin kaldırılabileceğini düşünüyorum. Özellikle üst üste binen şehirler ancak gri kara parçası ve şehir adları görünecek kadar yakınlaştırıldığında göründüğü için, bunun yerine kıyı çizgilerini daha doğru yapmak daha iyi olurdu
      Genel bir dünya haritasındaki konumun ne kadar sık gerekli olduğundan da emin değilim. Örneğin şu anda baktığım ilgi noktasının web sitesinde, oraya gitmek için kullanılacak çevredeki otoyolları ve toplu taşıma hatlarını içeren düşük boyutlu bir haritaya daha sık ihtiyaç duyulmaz mı?
      Tüm dünyayı birkaç km²’lik birimlere bölen bir sürüm yapılırsa, onda bir boyutta bile oldukça kullanışlı ayrıntılar barındırabilir gibi görünüyor. Tüm gezegen için düşük poligonlu bir haritanın Uluslararası Uzay İstasyonu takibi gibi kullanım alanları da olabilir, ama bunlar çok daha nadir görünüyor

  • Nüfusu 40 binden az olsa bile başkentler mutlaka dahil edilmeli ve bir şekilde yıldızla işaretlenmeli

  • Gerçekten harika. Telefonda bu kadar hızlı yüklenmesi etkileyici
    Mekânsal verileri Paths olarak sıkıştırma fikri çok iyi
    ODbL lisansından kaçınmak için OSM yerine Natural Earth verilerini kullanmak da iyi olabilir
    Mekânsal verileri Paths’e dönüştüren bir araç da eklense gerçekten harika olurdu