9 điểm bởi GN⁺ 2024-04-22 | 1 bình luận | Chia sẻ qua WhatsApp
  • tinyworldmap là bản đồ thế giới dành cho các ứng dụng web ưu tiên offline và băng thông thấp, được thiết kế để dùng cùng Leaflet
  • Hỗ trợ đầy đủ mọi mức zoom và phiên bản đầy đủ nhất có kích thước gzip 450KB; phần dựng hình phía client đã được profiling và kiểm thử để không có độ trễ cảm nhận được ngay cả trên điện thoại cấu hình thấp từ 10 năm trước
  • Bản đồ mặc định hiển thị 10.000 thành phố đông dân nhất đã được thêm vào OpenStreetMap, bao gồm các thành phố và thị trấn có dân số từ 48.000 người trở lên tại thời điểm viết
  • Có hai cách sử dụng: làm basemap thay thế các tile OpenStreetMap hoặc làm bản đồ fallback để khi offline chuyển các yêu cầu tile OSM sang tile được tạo cục bộ
  • Dữ liệu bản đồ tuân theo giấy phép ODBL như OpenStreetMap, và cần ghi công OpenStreetMap cùng tinyworldmap trong footer Leaflet hoặc vị trí tương tự

Mục đích và phạm vi của tinyworldmap

  • tinyworldmap là bản đồ thế giới dành cho các ứng dụng web ưu tiên offline và băng thông thấp
  • Được thiết kế để dùng cùng Leaflet và hỗ trợ mọi mức zoom
  • Phiên bản đầy đủ nhất có kích thước gzip 450KB, và 1.1MB sau khi giải nén
  • Khả năng dựng hình phía client đã được profiling và kiểm thử rộng rãi trên điện thoại cấu hình thấp từ 10 năm trước, và không có độ trễ có thể cảm nhận được
  • Demo có tại Nightly demo, Stable demo, v3 announcement

Dữ liệu bản đồ mặc định

  • Theo cấu hình mặc định, bản đồ hiển thị 10.000 thành phố đông dân nhất đã được thêm vào OpenStreetMap
  • Tại thời điểm viết, phạm vi này bao gồm mọi thành phố và thị trấn có dân số từ 48.000 người trở lên

Hai cách dùng với Leaflet

  • Dùng làm basemap

    • Để dùng tinyworldmap làm basemap trong Leaflet, thêm script phân phối vào thẻ head
    • Script bản ổn định là https://tinyworldmap.com/dist/v3/tiny-world-all-10000.js, chứa toàn bộ dữ liệu cần thiết để hiển thị bản đồ
    • Thay vì tile layer của Leaflet, thêm L.GridLayer.TinyWorld theo dạng sau
    new L.GridLayer.TinyWorld({maxZoom: 19}).addTo(map)
    
  • Dùng làm bản đồ fallback khi offline

    • Trong các ứng dụng web ưu tiên offline, việc cache bản đồ dạng ảnh cho mọi mức zoom là bất khả thi do số lượng tile quá lớn, và tổng dung lượng thường lên tới hàng terabyte
    • Kho lưu trữ này cung cấp service worker cho chức năng offline của ứng dụng web có nhúng bản đồ
    • Khi service worker được cài đặt, bản đồ fallback sẽ được tải trước
    • Các trang đã truy cập sẽ được cache
    • Basemap sẽ không được cache
    • Khi còn truy cập được máy chủ, dữ liệu cache sẽ không được dùng đến
    • Khi người dùng offline, website sẽ được phục vụ từ cache, và service worker sẽ chặn các yêu cầu tới máy chủ tile OSM để thay bằng tile do tinyworldmap tạo cục bộ
    • Trước khi đăng ký service worker, cần sửa tất cả các phần được đánh dấu IMPORTANT trong service worker
    • Sau khi đăng ký, phần ghi công của tile layer trong Leaflet phải bao gồm cả OpenStreetMap và tinyworldmap
    • Hitchmap là ví dụ về một ứng dụng production dùng tinyworldmap làm fallback
    • Trong trình duyệt hỗ trợ service worker, mở website, chờ một lúc, sau đó tắt Internet và tải lại thì ứng dụng sẽ vẫn hoạt động bình thường với bản đồ fallback
    • Việc cài đặt service worker có thể mất thời gian

Kiểu bản đồ và bản đồ tùy chỉnh

  • Hàm khởi tạo nhận tùy chọn render để thay đổi giao diện bản đồ
  • Tùy chọn style của từng lớp được áp dụng lên CanvasRenderingContext2D của Canvas
  • Ví dụ, có thể thay đổi kiểu bằng cách đặt fillStyle cho lớp state_borders
let render = {
    state_borders: {
        style: {fillStyle: '#f00'}
    }
}

new L.GridLayer.TinyWorld({maxZoom: 19, render}).addTo(map)
  • Nếu tổ chức của bạn cần bản đồ nội dung tùy chỉnh gồm bản đồ đường, bản đồ thành phố, bản đồ bằng ngôn ngữ khác, hoặc dữ liệu OSM hay không phải OSM, có thể yêu cầu báo giá qua business@tinyworldmap.com

Các tùy chọn tệp bản đồ nhỏ hơn

  • Phiên bản không có đường biên

    • tiny-world-cities-10000.js(on) chứa dữ liệu của bản đầy đủ nhưng loại bỏ ranh giới bang/tỉnh, ranh giới quốc gia và đường bờ biển
    • Phiên bản này giảm 300KB theo gzip và 825KB sau khi giải nén
    • Ưu điểm của phiên bản không có đường biên là toàn bộ dữ liệu được bao gồm đều có độ chính xác cao
    • Ranh giới quốc gia trong bản đầy đủ không chính xác ở mức zoom cao, nên khi overlay các hình bám theo ranh giới quốc gia hoặc đường bờ biển, hình ảnh có thể trông không tự nhiên
    • Trong những trường hợp đó, phiên bản không có đường biên thường trông đẹp hơn
  • Phiên bản không có nhãn thành phố

    • Có hai tệp không có nhãn thành phố
    • tiny-world-borders.js(on): bỏ ranh giới bang/tỉnh
    • tiny-world-nocities.js(on): giữ ranh giới bang/tỉnh
    • Nhãn thành phố chiếm 410KB sau khi giải nén và 172KB khi nén
  • Phiên bản giảm số lượng thành phố

    • Các tệp có nhãn thành phố cũng có các phiên bản cho 2.0004.000 thành phố
    • Chỉ cần thay 10000 trong tên tệp bằng 2000 hoặc 4000
    • | Số thành phố bao gồm | Ngưỡng dân số |
    • | --- | --- |
    • | 10.000 | trên 48.000 người |
    • | 4.000 | trên 137.000 người |
    • | 2.000 | trên 287.000 người |

Giấy phép và ghi công

  • Dữ liệu tinyworldmap tuân theo giấy phép ODBL giống như dữ liệu OpenStreetMap
  • ODBL yêu cầu ghi công
  • Nếu cấu hình theo cách được hướng dẫn, footer Leaflet phải bao gồm ghi công OpenStreetMap và tinyworldmap
  • Nếu không, bạn phải tự thêm riêng phần ghi công OpenStreetMap và tinyworldmap

1 bình luận

 
GN⁺ 2024-04-22
Ý kiến trên Hacker News
  • Tôi thích ý tưởng này. Nó giải quyết được vấn đề phải thu nhỏ quá xa rồi chờ máy chủ render ô lục địa vừa yêu cầu
    Tuy vậy, tôi không rõ trường hợp sử dụng nào mà người ta biết vị trí tương đối của West Bloomfield Township và Waterford Charter Township, hai vùng ngoại ô Detroit, nhưng lại không biết chúng thuộc bang nào hay thậm chí Great Lakes có tồn tại
    Sẽ tốt hơn nếu dùng nhiều dữ liệu hơn cho đường bờ biển, và ít hơn nhiều cho việc chia nhỏ khu vực đại đô thị

    • Hướng đi đúng, nhưng tôi nghĩ nhất định phải có các địa hình chính như 100 hòn đảo, 50 hồ, 200 con sông
    • Đường bộ và đường sắt cũng vậy. Nếu là bản đồ đường bộ để trong xe thì cần, còn ngoài ra thì hiếm khi cần biết vị trí đường sá
      Chúng che mất quá nhiều thông tin khác có thể hữu ích
    • Tôi thử chấm vài nơi vì tò mò, thì Alexandria ở Virginia, Mỹ nằm sang bên kia sông, còn Bahrain trông khá thảm
    • Phần này đã được cải thiện trong v2
  • Trông rất hay, nhưng chi tiết đường bờ biển quá thấp. Một số thị trấn ở Anh đang nổi trên biển, còn Greenland và Bắc Canada thì ngược lại chiếm hết các đỉnh
    Có vẻ mức độ chi tiết theo phép chiếu Mercator đã được tính đến, nhưng nên hạ ưu tiên những khu vực hầu như không có người ở

    • Dự án tốt đấy. Khi chọn địa điểm để đưa vào, có thể dùng thêm QRank của Wikidata, nhờ đó những hòn đảo nổi tiếng dù dân ít vẫn có thể xuất hiện
      Cơ sở dữ liệu SQLite của QRank trước đây cũng từng được đăng trên HN
      [1] https://qrank.wmcloud.org/
      [2] https://github.com/hikeratlas/qrank
    • Tỷ lệ giữa chi tiết đô thị và chi tiết đường bờ biển bị lệch khá kỳ về phía đô thị. Có vẻ bản đồ ưu tiên thêm thành phố hơn là biên giới hay đường bờ biển chính xác
      Một tỉnh của Netherlands bị hiển thị như một hòn đảo tách khỏi phần đất liền của cả nước, dù thực tế không phải vậy. Trong khi đó bản đồ lại biết tới tận năm tên thành phố trong tỉnh đó, và vài cái gần như chồng lên nhau
      Mặt khác, cá nhân tôi thấy việc đưa Afsluitdijk vào là chi tiết không cần thiết, nhưng tôi hiểu rằng với chương trình thì khó phân biệt giữa phần đất cần vẽ và hạ tầng hàng hải đơn giản
      Đáng ra tôi nên mở ticket trên trình theo dõi lỗi, nhưng tôi chưa đăng nhập trên di động nên hiện tại bình luận HN là cách tốt nhất. Nếu ai đó cũng thấy vậy thì có thể dựa trên bình luận này để đề xuất điều chỉnh tỷ lệ, thêm khoảng cách tối thiểu giữa các thành phố, hoặc giảm kích thước toàn bộ tệp
    • Vì thế nó gần như không dùng được cho các vùng đảo hay quần đảo. Philippines đúng là có nhiều đảo, nhưng cũng có vài đảo khá lớn, vậy mà bản đồ vẫn không đủ dùng
      French Polynesia thậm chí còn không tồn tại trên bản đồ
    • Tôi đã phát hành bản nightly loại bỏ các vịnh hẹp và thêm nhiều chi tiết hơn ở nơi khác. Nhìn chung độ phân giải cũng cao hơn
      Lý do ban đầu không làm vậy là vì trên điện thoại cũ, đặc biệt là Firefox for Android, việc vẽ quá nhiều đa giác có thể gây crash. Sau đó tôi đã tối ưu quy trình vẽ, nhưng vẫn cần cẩn trọng
      [1] https://tinyworldmap.com/beta.html
    • Việc đơn giản hóa nhìn chung còn cẩu thả. Ở Caribbean có cả quốc gia bị biến mất
      Đây là kiểu vấn đề mà kiểm soát chất lượng cơ bản phải lọc ra được
  • Tôi cũng đã làm thứ gì đó tương tự. Ưu tiên offline, rất nhỏ, dựa trên vector, nhưng tập trung vào quốc tế hóa
    Có sẵn bằng mọi ngôn ngữ của Liên Hợp Quốc. Chỉ có Spanish là bị bỏ sót vì tôi quên mất, trong khi làm trong vài giờ là xong, thật đáng xấu hổ
    Tên quốc gia và thành phố dùng tên chính thức được Liên Hợp Quốc ghi nhận. Vì vậy tên ngắn chính thức của UK là “United Kingdom of Great Britain and Northern Ireland”
    https://map.ache.one/en

    • Ổn đấy, nhưng khá nhiều lỗi. “Cape town” được hiển thị ở South Sudan trong khi tên quốc gia lại không có, và Eritrea cũng bị thiếu tên. Khối Somalia bị chia thành hai phần màu khác nhau
      Việc vẽ một bản đồ nhẹ và xử lý quốc tế hóa tương đối dễ, vì có nhiều nguồn dữ liệu công khai và thư viện hỗ trợ
      Phần thực sự khó hoàn toàn là định nghĩa hành chính. Hễ có dữ liệu gắn với đa số quốc gia thì sẽ luôn có chỗ lệch với nguồn bản đồ, và cuối cùng bạn phải tự làm bản đồ tùy chỉnh
      Không có đồng thuận về việc “quốc gia” là gì. Western Sahara trên danh nghĩa là một quốc gia, nhưng trên thực tế Morocco đã tiếp tục chiếm đóng; Somalia thì Somaliland và Puntland vận hành gần như các quốc gia độc lập nhưng không được công nhận chính thức. Greenland, Niue và những nơi khác nằm đâu đó ở giữa
    • Tôi không tìm được giải thích về cách làm, nhưng bản đồ rất đẹp. Tiny World Maps cũng có nhắc tới chuyện này, nhưng ở đó cũng chưa giải thích đủ về quy trình tạo ra nó
      Theo kinh nghiệm của tôi ở cấp quốc gia, đó là một quy trình thủ công với đủ kiểu vá víu bẩn thỉu, và phần khó nhất là kiểm thử xem đã khớp đúng chưa. Đặc biệt khó là chọn mức độ khái quát hóa phù hợp và đáp ứng hình dung mà mọi người mong đợi ở bản đồ khu vực của họ
      Tôi tò mò không biết liệu tác giả có thấy công sức để cải thiện mạnh bản đồ này là xứng đáng hay không
    • Tôi không rõ dấu sao là để chỉ thành phố lớn nhất hay thủ đô, nhưng nếu là ý thứ hai thì Tanzania đang sai
      Dấu sao nằm ở Dar Es Salaam nhưng nhãn lại là Dodoma. Dodoma mới là thủ đô thực tế, nhưng nằm về phía trung tâm đất nước hơn
    • Bản thân từ viết tắt “i18n” cũng chẳng được quốc tế hóa mấy
  • Dễ thương đấy. Trước đây tôi từng làm một thứ tương tự, dù không hoàn toàn giống hệt
    https://web.archive.org/web/20020611095429/http://www.cs.man.ac.uk/~hancockd/CityZen/index.html
    20.000 đoạn thẳng, 3.350 địa điểm, cộng cả trình xem và trò đố vui, tất cả chỉ 162KB

  • Cảm ơn vì phản hồi. Để giải thích bối cảnh của lựa chọn này, cho đến gần đây trọng tâm chính của dự án này không phải là hình dạng quốc gia
    Trong thời gian dài, phiên bản không có biên giới trong README là phiên bản duy nhất, và tôi đã không nghĩ rằng có thể thêm toàn bộ thế giới. Nhưng hóa ra là làm được
    Tôi đã phát hành phiên bản nightly loại bỏ các vịnh hẹp và bổ sung thêm chi tiết ở những nơi khác, bao gồm cả các đảo vốn được yêu cầu nhiều. Nhìn chung độ phân giải cũng cao hơn
    Lý do ban đầu không làm như vậy là vì việc vẽ quá nhiều đa giác có thể làm treo các điện thoại cũ, đặc biệt là Firefox for Android. Sau đó tôi đã tối ưu hóa quy trình vẽ, nhưng vẫn cần cẩn trọng
    [1] https://tinyworldmap.com/beta.html

  • Tôi không chắc 10.000 thành phố đông dân nhất có phải là bộ lọc tốt nhất hay không
    Cách này sẽ ưu tiên các thành phố ở những nước lớn, còn các nước nhỏ thì nhiều khả năng phần lớn thành phố sẽ bị loại
    Cần có một bộ lọc phụ kiểu lấy top X thành phố theo từng quốc gia. Như vậy có lẽ sẽ bao quát được cả các thành phố quan trọng của những nước nhỏ

    • Cũng có những thước đo khác để đánh giá tầm quan trọng của thành phố
      Các tiêu chí như thủ đô quốc gia, thủ phủ vùng, thành phố toàn cầu, hay tính trung tâm trong khu vực có thể hữu ích để bổ sung cho điều kiện cơ bản
      Trong thảo luận này, có lẽ các nhà địa lý học và nhà bản đồ học sẽ đưa ra lời khuyên hữu ích hơn
  • Thật thú vị khi chọn 10.000 khu định cư lớn nhất trên thế giới thì ngưỡng lại xuống đến dân số 48.000
    Tôi vẫn đang cân nhắc xem con số này có đáng ngạc nhiên hay không

    • Tôi từ lâu đã biết rằng nếu nhìn khoảng top 100 thành phố của Mỹ theo dân số thì ngưỡng sẽ xuống cỡ 200.000 người
      Kể cả tăng lên 200 thành phố thì vẫn còn trên 100.000 người. Theo Wikipedia, Daly City, CA ở vị trí #333 có dân số 100.007 người: <https://en.wikipedia.org/wiki/List_of_United_States_cities_b...>
      Kiểu phân bố quy mô này, giống như nhiều tình huống mở rộng khác, nhìn chung gần tuyến tính trên đồ thị log-log
      Ở China, phải xuống tới vị trí 106 mới gặp một thành phố dưới 1 triệu dân. Mỹ chỉ có 9 thành phố như vậy
      India thì tôi vừa kiểm tra lại: có 46 thành phố trên 1 triệu dân, thành phố đứng thứ 100 là Malegaon có 471.000 người, còn Aurangabad đứng thứ 300 vẫn vượt 100.000 người
      Tuy vậy, “thành phố” là một khái niệm rất tùy ý. Một số thành phố lớn hàng đầu thế giới theo tiêu chuẩn của quốc gia khác có thể được xếp là vùng đô thị lớn, thậm chí là bang hoặc tỉnh
      Thành phố lớn nhất theo diện tích lại có dân số rất thấp. Sermersooq của Greenland có dân số 24.148 người, diện tích 575.300km², tức khoảng gấp 144 lần Rhode Island, và trong các bang của Mỹ thì chỉ Texas và Alaska là lớn hơn. Alaska cũng chỉ lớn hơn khoảng 12%
      Địa lý đô thị là một lĩnh vực phức tạp, nên người ta thường so sánh đồng thời nhiều thang đo và định nghĩa như vùng thống kê đô thị, diện tích khu đô thị và dân số. Làm vậy sẽ giảm bớt tính tùy ý của ranh giới chính trị và phản ánh tốt hơn tổng dân số cùng ảnh hưởng kinh tế
  • Cũng khá ngạc nhiên khi biên giới thô như thế này mà dung lượng tệp lại chỉ ở mức đó
    Có vẻ tổng dung lượng dữ liệu vẫn còn thấp hơn khá xa điểm cân bằng tối ưu giữa tính hữu dụng và kích thước tệp. Ví dụ, dù gấp đôi dung lượng thì biên giới có lẽ cũng không đến mức lởm chởm như vậy

    • Toàn bộ tệp khoảng 700KB nếu không nén gzip
      Với mô tả rằng “bản đầy đủ chứa toàn bộ dữ liệu ngoại trừ biên giới và đường bờ biển, nhờ đó giảm 200KB”, điều này có nghĩa khoảng 29% là dữ liệu biên giới/đường bờ biển và 71% là tên cùng vị trí thành phố
      Cá nhân tôi nghĩ có thể loại bỏ khá nhiều thành phố. Đặc biệt là những thành phố chồng lấn lên nhau, vì phải phóng to đến mức nhìn thấy cả mảng đất màu xám và tên thành phố thì chúng mới hiện ra, nên thay vào đó có lẽ tốt hơn là làm đường bờ biển chính xác hơn
      Tôi cũng không rõ việc cần vị trí trên bản đồ thế giới tổng quát xảy ra thường xuyên đến mức nào. Ví dụ, với một địa điểm đang quan tâm hiện tại, có lẽ thứ thường cần hơn là một bản đồ nhẹ hiển thị các tuyến cao tốc lân cận và các tuyến giao thông công cộng để đi tới đó
      Nếu làm một phiên bản chia toàn bộ Trái Đất theo đơn vị vài km², có lẽ ngay cả ở kích thước bằng một phần mười vẫn có thể chứa mức chi tiết khá hữu ích. Bản đồ toàn cầu low-poly tất nhiên vẫn có công dụng, như theo dõi Trạm Vũ trụ Quốc tế, nhưng có vẻ ít phổ biến hơn nhiều
  • Dù dân số ít hơn 40.000 thì thủ đô vẫn phải được đưa vào, và nên được đánh dấu bằng dấu sao theo cách nào đó

  • Thật sự rất tuyệt. Tôi ấn tượng với việc nó tải nhanh như vậy trên điện thoại
    Ý tưởng nén dữ liệu không gian thành Paths rất hay
    Nếu muốn tránh giấy phép ODbL thì dùng dữ liệu Natural Earth thay vì OSM cũng sẽ tốt
    Sẽ còn tuyệt hơn nữa nếu kèm theo cả công cụ chuyển dữ liệu không gian sang Paths