Bản đồ (maps) cá nhân hóa là gì?

teeinblue cung cấp tính năng hiển thị Map có thể cá nhân hóa trong artwork. Khách hàng của bạn sẽ chỉ cần nhập địa chỉ vào ô "Enter location" và bản đồ sẽ hiển thị đúng vị trí mà họ tìm kiếm.

Kết nối tài khoản Mapbox (và Google Maps)

Để dùng tính năng Maps này, trước hết bạn sẽ cần tạo tài khoản Mapbox (và Google Places API nếu cần), sau đó kết nối tài khoản đó với teeinblue.
Đọc thêm hướng dẫn cách tạo tài khoản tại đây.

Tạo Map styles categories (không bắt buộc)

Bước này sẽ cần thiết nếu bạn muốn cho khách hàng lựa chọn các phong cách hiển thị khác nhau của bản đồ.

Một bản đồ có thể được hiển thị theo nhiều style khác nhau, ví dụ đường phố (street maps), vệ tinh (satellites), đơn sắc (monochrome),...



Bạn có thể tạo một vài map styles trên Mapbox và gộp chúng thành một nhóm "Map style category" trong teeinblue để khách hàng của bạn có thể chọn 1 loại style trong nhóm đó (tương tự Clipart category).

1. Tạo Map styles trong Mapbox

Truy cập trang Mapbox Design Studio > bấm vào nút New style > chọn một style để tùy chỉnh.
Trong design editor, bạn có thể thay đổi các thành phần, màu sắc, font chữ... của bản đồ tùy ý...
Sau khi hoàn thành, bấm nút Publish để lưu map style của bạn.
Sau khi một style mới được published, bạn sẽ tìm thấy nút Share > copy link Style URL ở phần Developer resources

2. Tạo Map styles category trong teeinblue

Vào menu Assets > Map styles > bấm nút +New category
Điền một tên bất kỳ cho category này của bạn, sau đó bấm Create
Điền tên của style đầu tiên vào ô Map style option name - đây cũng là tên của style sẽ hiển thị cho khách hàng lựa chọn - sau đó bấm Add new
Ấn vào phần Enter maps style url và dán link Style URL của map style bạn tạo trong bước 1.
(không bắt buộc) Upload hình đại diện (thumbnail) cho lựa chọn map style để demo cho khách hàng.



Mapbox cung cấp một số map styles mặc định ở đây. Nếu bạn không cần thay đổi các style mặc định này, thì chỉ cần copy style URL của các style này và dán vào optoin trong category.

Team Teeinblue có chuẩn bị sẵn một vài thumbnail cho các map styles mặc định ở đây để các bạn tiện dùng.

Tạo Maps trong Artwork

1. Chuẩn bị layer cho Maps

Bạn sẽ cần chuẩn bị một hình để làm layer gốc cho phần bản đồ. Bản đồ sẽ chỉ hiện trong phần có hình (có pixel) của hình ảnh đó, không hiện trên những phần rỗng (transparent).
Vì vậy, bạn có thể tạo hình cho map với layer gốc này.



Chúng tôi khuyến khích sử dụng layer đặc màu đen (#000000) để tạo shape.

2. Tạo Personalize options

Tạo một artwork mới

Lưu ý: Kích thước tối đa mà bên Mapbox có thể render cho design là 2560px ( ví dụ maps sau khi rendered ). Vì vậy hãy lưu ý giới hạn này khi tạo artwork size.

Upload layer gốc (mà bạn đã chuẩn bị ở bước 1)

Trong phần Personalize Options, chọn Maps. Một bản đồ mặc định sẽ hiện ra trên layer gốc.



"Enter location" label & Search location placeholder: điền theo ý bạn


Default location: là vị trí mặc định đầu tiên mà khách hàng sẽ nhìn thấy trên bản đồ khi chưa nhập địa chỉ nào.
Bạn có thể thay đổi vị trí mặc định này bằng cách điền vĩ độ (latitude) & kinh độ (longitude) của địa điểm mới.

Để biết vĩ độ và kinh độ của một địa điểm: tìm kiếm địa điểm đó trên Google maps > chuột phải vào điểm đánh dấu > copy "latitude, longitude" hoặc copy trên thanh địa chỉ.



Default zoom level: mức độ phóng to (zoom) mặc định khi khách hàng chưa nhập địa chỉ nào.
Số càng to thì độ phóng to càng lớn. Khuyến khích để ở mức 12 - 17.
Sau khi khách hàng nhập địa chỉ, bản đồ sẽ tự động zoom cho khớp với khu vực mà khách hàng nhập. Nếu không tìm thấy khu vực nào, bản đồ sẽ giữ nguyên độ zoom mặc định mà bạn chọn.

Default Map styles URL: style mặc định của bản đồ khi khách hàng chưa chọn style nào, trường này luôn cần điền vào để có thể hiển thị một bản đồ mặc định. Bạn có thể thay đổi styel mặc định này với map style khác mà bạn đã tạo trong Mapbox (xem lại hướng dẫn Tạo map styles trong Mapbox) hoặc dùng default styles từ Mapbox ở đây.



Allow customers to change map styles: bật chức năng này nếu bạn muốn cho khách hàng lựa chọn các style khác nhau của bản đồ.
Chọn một Map style category mà bạn đã tạo (xem lại hướng dẫn Tạo Map styles category) và các lựa chọn trong category này sẽ hiển thị trên personalization form.



Enable overlay on Maps editor: nếu bật chức năng này, trong Maps editor (popup mà khách hàng search một địa chỉ) sẽ có một lớp layer (overlay) đè lên các mảng rỗng (transparent) hoặc mảng sáng màu của layer gốc. Lớp layer này sẽ không che phần màu đen hoặc tối của layer gốc, vì vậy sẽ làm hình dáng của map được nổi bật lên.



Mảng màu nào càng sáng thì sẽ bị lớp overlay che đi càng tối. Lớp overlay sẽ tối nhất ở vùng transparent, và sẽ hoàn toàn biến mất ở vùng màu đen (#000000).



Vì vậy, chúng tôi khuyến khích sử dụng tính năng overlay này khi bạn sử dụng layer gốc có màu đen (#000000).

Lớp overlay này sẽ chỉ hiển thị trên Maps editor với mục đích preview. Nó sẽ không xuất hiện trong order design (bản đồ vẫn sẽ được render theo phần có hình của layer).



Show Marker/Pin: hiển thị một icon ghim (pin) trên bản đồ. Pin sẽ đánh dấu vị trí chính xác của địa chỉ mà khách hàng nhập, và khách hàng cũng có thể di chuyển pin này trên bản đồ.

Ban có thể upload một hình ảnh khác thay thế cho pin. Nhưng lưu ý là cần nhập đúng kích thước cho ảnh ở phần Marker width & height, nếu không thì ảnh sẽ bị bóp méo khi không đúng tỉ lệ.

Xem video hướng dẫn tại đây:

Điền giá trị từ các tùy chọn khác - Populate values from other options

Ở ví dụ này, nếu vị trí bản đồ Map Location được đặt là Berlin, Germany, cả ô text và live preview sẽ tự động hiển thị là Berlin, Germany

Để làm được như vậy, hãy làm các bước sau:

Tạo một layer text
Bật setting Populate values from other options



Tiếp tục chọn layer mà bọn muốn lấy giá trị. Trong trường hợp này, nó là layer Street Map



Chọn kiểu giá trị mà bạn muốn lấy. Bạn có thể chọn nút Lookup values để xem thêm chi tiết. Hiện tại Teeinblue chỉ hỗ trợ các giá trị như dưới đây, chúng mình sẽ tiếp tục update nhiều giá trị hơn trong thời gian sắp tới.



Vì bạn muốn lấy giá trị tên địa điểm, bạn có thể copy và paste gái trị {{place_name}}.
| Tips: Bạn có thể điền một tùy chọn với giá trị tùy chọn


Xem kết quả trên Store của bạn:


Bạn có thể kết hợp nhiều giá trị nếu bạn muốn

CHÚ Ý:
Khách hàng có thể sửa text bất cứ khi nào họ muốn, kể cả sau khi text đã được tự động điền.
Nếu khách hàng thay đổi vị trí bản đồ, text sẽ được update với giá trị mới thay thế giá trị cũ đã điền trước đó.

Cập nhật vào: 21/11/2024