Về tính năng GPX Route
Với tính năng này, khách hàng có thể tải lên các tuyến đường chạy hoặc đạp xe của mình bằng tệp GPX. Sau khi tải lên, đường đi của họ sẽ tự động được hiển thị trên sản phẩm!
Tính năng này cũng hỗ trợ việc hiển thị dữ liệu từ tuyến đường — ví dụ tổng quãng đường, điểm bắt đầu và kết thúc, ngày bắt đầu/kết thúc giúp bạn có thể tự động hiển thị những thông tin này trong thiết kế.
Tạo artwork với Route Map Layer
- Trong phần chỉnh sửa Artwork > bạn chọn chỉnh sửa một layer ảnh
- Ở phần Personalization Options, chọn
Route Maps
Danh sách sau đây giải thích chức năng của từng setting này:
- Option Title: Tiêu đề của layer Route Map.
- Upload GPX default: Bạn có thể upload một file GPX mặc định hiển thị trên sản phẩm mẫu giúp khách hàng có thể nhìn file GPX trên sản phẩm trước khi họ upload tuyến đường của riêng mình.
- Default zoom level: Đặt chế độ zoom cho việc hiển thị tuyến đường. Lưu ý rằng việc thu phóng quá nhiều có thể cắt mất một số phần của tuyến đường, đặc biệt là những tuyến đường dài. Hãy nhắm đến mức cân bằng để hiển thị rõ ràng toàn bộ đường đi.
- Default line color: Chọn màu sắc mặc định của tuyến đường.
- Default line thickness: Thiết lập độ dày của tuyến đường xuất hiện trên bản đồ. Đường kẻ dày hơn sẽ nổi bật hơn, trong khi đường kẻ mỏng hơn sẽ mang lại vẻ tinh tế hơn. Chọn đường kẻ phù hợp nhất với thiết kế của bạn.
- Default Map Styles URL: Chọn kiểu hiển thị bản đồ bằng cách thêm vào Map Style URL. Style này sẽ hiển thị màu sắc, nhãn và địa hình khớp với cảm giác của sản phẩm. Bạn có thể tham khảo bài hướng dẫn sau Tạo Map style trong Mapbox
- Show Marker/Pin: Bật tùy chọn này để hiển thị đánh dấu cho điểm bắt đầu và kết thúc của tuyến đường. Bạn có thể tải lên điểm đánh dấu hoặc hình ảnh ghim tùy chỉnh của riêng mình và chỉ định cả chiều rộng và chiều cao của nó để đảm bảo nó phù hợp chính xác với thiết kế của bạn.
Tạo Layers cho Khoảng cách, Điểm bắt đầu, Điểm kết thúc, Ngày bắt đầu, Ngày kết thúc
Thêm thông tin khoảng cách tuyến đường vào design
- Đầu tiên, bạn hãy tạo một layer và đặt tên nó là
Distance:giống như trong ví dụ. Tiêu đề này sẽ không hiển thị bất kỳ dữ liệu tuyến đường thực tế nào ngay lúc này. - Sau đó, bạn cần tạo 1 layer text nơi mà khoảng cách sẽ hiển thị. Layer này sẽ tự đổng lấy khoảng cách data từ file tuyến đường mà khách hàng upload - GPX file.
👉 Khi chỉnh sửa layer text, hãy bật tính năng Populate values from other options. Sau đó, bạn sẽ có thể chọn Layer mà bạn muốn điền giá trị, đó là layer GPX Map Route.
Sau khi bạn chọn GPX Map Route layer, bạn cần điền giá trị mà bạn hiển thị -- ở đây chúng ta cần chọn Khoảng cách.
km . Như vậy, kết quả hiển thị trên sản phẩm sẽ hiển thị là “12.4 km”.Thêm điểm bắt đầu Start Point, kết thúc End Point cho thiết kế
Giống như thông tin về Khoảng cahcs, bạn có thể bắt đầu bằng việc tạo một layer và đặt tên là Start Point and End Point.
Để lấy thông tin này, hãy chắn chắn rằng bạn đã chọn nguồn layer Route Map và đặt giá trị hiển thị tương ứng:
👉 Lưu ý:
Khi làm việc với các giá trị vĩ độ và kinh độ, bạn có thể sử dụng các tùy chọn định dạng khác có sẵn trong phần Bản đồ đường phố. Chỉ cần đảm bảo bạn nhập đúng tiền tố — route_start_point (hoặc route_end_point nếu bạn đang hiển thị điểm cuối).
Ví dụ, thay vì:
route_start_point.lat, route_start_point.lng
Bạn có thể sử dụng format dưới đây:
route_start_point.lat:dd, route_start_point.lng:dd để hiển thị chúng theo độ thập phân.
Hoàn thiện Design
Để làm cho thiết kế của bạn trở nên trau chuốt và mang tính cá nhân hơn, hãy cân nhắc thêm các lớp có thể tùy chỉnh như Tên Marathon, Tên người chạy, Số hiệu bib hoặc bất kỳ chi tiết nào khác khiến sản phẩm trở nên đặc biệt.
Hướng dẫn chi tiết về bảng giá trị Value:
Bảng giá trị cho phép bạn xác định dữ liệu nào sẽ xuất hiện trong mỗi layer. Value này sẽ được kết nối Text của bạn với một nguồn dữ liệu cụ thể (như Map Route) và cho phép bạn chọn chính xác giá trị nào để hiển thị—chẳng hạn như khoảng cách, điểm bắt đầu hoặc ngày kết thúc
Giá trị | Ý nghĩa | Ví dụ |
|---|---|---|
{{route_distance}} | Hiển thị khoảng cách tuyến đường | 66.5 km |
{{route_start_point.lat}}, {{route_start_point.lng}} | Hiển thị điểm bắt đầu (có thể dùng với formats như Street Map). | 21.0285°N, 105.8544°E |
{{route_end_point.lat}}, {{route_end_point.lng}} | Hiển thị điểm kết thúc (có thể dùng với formats như Street Map). | 21.0772°N, 105.9401°E |
{{route_start_date}} | Hiển thị ngày bắt đầu của tuyến đường. Để định dạng rõ ràng và linh hoạt hơn, chúng tôi khuyên bạn nên sử dụng tính năng Date Picker thay vì nhập các giá trị này bằng tay. Chúng tôi có sẵn nhiều định dạng ngày và hiển thị thông tin chính xác, thân thiện với người dùng—hoàn hảo để làm cho thiết kế của bạn trông đẹp nhất. | 2025-05-27T00:00 |
{{route_end_date}} | Hiển thị ngày kết thúc tuyến đường. Để định dạng rõ ràng và linh hoạt hơn, chúng tôi khuyên bạn nên sử dụng tính năng Date Picker thay vì nhập các giá trị này bằng tay. Chúng tôi có sẵn nhiều định dạng ngày và hiển thị thông tin chính xác, thân thiện với người dùng—hoàn hảo để làm cho thiết kế của bạn trông đẹp nhất. | 2025-05-27T00:00 |
Tạo Campaigns
Sau khi bạn đã hoàn thiện Artwork, thêm Artwork vào campaign như các campaign khác!
Kiểm tra kỹ lại trên store để chắc chắn campaign của bạn hoạt động tốt!
Cập nhật vào: 25/06/2025
Cảm ơn!