Giới thiệu tinyworldmap
- tinyworldmap là bản đồ thế giới dành cho ứng dụng web ưu tiên ngoại tuyến và băng thông thấp
- Được thiết kế để dùng cùng Leaflet và hỗ trợ mọi mức thu phóng
- Phiên bản đầy đủ nhất chỉ khoảng 300kB khi nén bằng gzip
- Kết xuất phía máy khách đã được profiling và kiểm thử rộng rãi trên các điện thoại cấu hình thấp từ 10 năm trước, không có độ trễ đáng замет
- Mặc định 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, bao gồm mọi thành phố và thị trấn có dân số trên 48.000 người
Cách dùng tinyworldmap
Dùng làm bản đồ cơ sở
- Để dùng tinyworldmap làm bản đồ cơ sở trong Leaflet, thêm nội dung sau vào thẻ
head:
- Script này chứa toàn bộ dữ liệu cần thiết để hiển thị bản đồ
- Thay vì thêm tile layer vào bản đồ Leaflet, hãy dùng:
new L.GridLayer.TinyWorld().addTo(map)
- Hàm khởi tạo
TinyWorld nhận nhiều tùy chọn: backgroundColor, textFillColor, borderStrokeColor, borderFillColor, borderWidth, textStrokeColor (để tách chữ khỏi phần còn lại), textStrokeWidth, cityFont (ví dụ: "12px Arial"), countryFont, dotColor
- Nếu chỉ định
dotColor, mỗi thành phố sẽ được hiển thị dưới dạng một chấm. Điều này cải thiện khả năng sử dụng khi dùng phiên bản tinyworldmap rút gọn không có biên giới
Dùng làm bản đồ fallback
- Trong ứng dụng web ưu tiên ngoại tuyến, việc cache bản đồ dựa trên ảnh ở mọi mức thu phóng là không khả thi (số lượng tile quá lớn và dung lượng lên tới hàng terabyte)
- Kho lưu trữ này cung cấp service worker để bật khả năng ngoại tuyến cho ứng dụng web
- Khi service worker được cài đặt, bản đồ fallback sẽ được tải trước. Mọi trang đã truy cập sẽ được cache, trừ bản đồ cơ sở
- Khi vẫn có thể kết nối tới máy chủ, dữ liệu đã cache sẽ không được sử dụng
- Nếu người dùng ở trạng thái ngoại tuyến, 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, sau đó dùng tinyworldmap để tạo tile thay thế cục bộ
- Trước khi đăng ký service worker, trước tiên cần chỉnh sửa tất cả các phần được đánh dấu là 'IMPORTANT' trong service worker
- Sau khi đăng ký, cần ghi rõ cả OpenStreetMap và tinyworldmap trong thuộc tính của tile layer như sau:
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);
- Để xem ví dụ về ứng dụng production dùng tinyworldmap làm fallback, hãy truy cập Hitchmap. Tải website bằng trình duyệt hỗ trợ service worker, chờ một lúc, sau đó tắt Internet và tải lại; ứng dụng web sẽ vẫn hoạt động bình thường bằng bản đồ fallback. Việc cài đặt service worker có thể mất một chút thời gian
Bản đồ thế giới nhỏ hơn nữa
- Bản đồ đầy đủ có dung lượng 300K khi nén gzip / 694K khi giải nén. Với một số trường hợp sử dụng, kích thước này vẫn có thể còn quá lớn
Không có đường biên giới
tiny-world-noborders-10000.js(on) chứa toàn bộ dữ liệu của phiên bản đầy đủ, ngoại trừ biên giới và đường bờ biển- Phiên bản nén gzip giảm 100k, phiên bản giải nén giảm 200k
- Phiên bản không có biên giới không chỉ nhỏ hơn mà còn có ưu điểm là toàn bộ dữ liệu đi kèm đều chính xác
- Biên giới trong phiên bản đầy đủ không chính xác ở mức thu phóng cao, nên khi chồng các shape khớp với biên giới và đường bờ biển, hiển thị có thể trông kỳ lạ. Trong những trường hợp đó, phiên bản không biên giới sẽ phù hợp hơn
- Kiểu mặc định như sau
Không có thành phố
- Có thể dùng hai phiên bản không có nhãn thành phố:
tiny-world-nocities.js(on) (giữ nhãn quốc gia) và tiny-world-borders.js(on) (bỏ nhãn quốc gia)
- Nhãn thành phố chiếm 410K khi không nén và 172K khi nén
Ít thành phố hơn
- Cuối cùng, mỗi tệp có nhãn thành phố cũng có các phiên bản gồm 2.000 và 4.000 thành phố
- Chỉ cần thay
10000 trong tên tệp bằng 2000 hoặc 4000
| Số thành phố được bao gồm |
Dân số |
| 10,000 |
> 48,000 |
| 4,000 |
> 137,000 |
| 2,000 |
> 287,000 |
Thuê tinyworldmap
- Nếu cần bản đồ tùy chỉnh (ví dụ: chi tiết hơn hoặc bằng ngôn ngữ khác) hoặc cần trợ giúp triển khai tính năng ngoại tuyến trên website, hãy liên hệ business@tinyworldmap.com
Ghi công nguồn
- Giống như dữ liệu OpenStreetMap, dữ liệu tinyworldmap được cấp phép theo ODBL nên bắt buộc phải hiển thị ghi công
- Nếu đã làm theo các bước mô tả ở trên, phần chân trang Leaflet phải bao gồm ghi công cho cả OpenStreetMap và tinyworldmap. Nếu chưa có, hãy thêm nội dung sau:
© [OpenStreetMap](https://www.openstreetmap.org/copyright), [tinyworldmap](https://www.tinyworldmap.com)
Ý kiến của GN⁺
- tinyworldmap cung cấp một bản đồ thế giới nhẹ có thể dùng cho bản đồ ngoại tuyến hoặc thiết bị cấu hình thấp. Đây có vẻ là một giải pháp có thể thay thế cho OpenStreetMap hiện có
- Ưu điểm là cung cấp các phiên bản nhẹ hơn bằng cách tùy chọn loại bỏ biên giới, thành phố, v.v. Có thể dùng bản đồ tùy chỉnh theo nhu cầu nên phạm vi ứng dụng có vẻ khá rộng
- Tuy nhiên, để hoạt động ngoại tuyến thì vẫn cần triển khai kỹ thuật như chỉnh sửa service worker, vì vậy nhà phát triển sẽ cần có một mức độ kinh nghiệm nhất định. Sẽ tốt hơn nếu có thêm hướng dẫn chi tiết cho phần này
- Tại Hàn Quốc, các API bản đồ của cổng thông tin như Naver, Kakao được sử dụng nhiều; nếu có thể tích hợp với các dịch vụ như vậy để hoạt động ngoại tuyến thì có lẽ sẽ có thêm nhiều trường hợp ứng dụng hơn
- Vì chứa thông tin về các thành phố lớn trên toàn thế giới, nó có thể hữu ích trong các lĩnh vực như du lịch, logistics, v.v. Khả năng hỗ trợ đa ngôn ngữ cũng có thể sẽ là yếu tố then chốt
1 bình luận
Ý kiến trên Hacker News