# Map Editor

Source: https://maps.vietmap.vn/docs/vi/map-api/map-editor/

Map Editor: tùy chỉnh bản đồ VIETMAP
=======

![Giao diện Map Editor với các mẫu bản đồ Đường phố hiện đại, Vệ tinh Hybrid, Classic, Voyager, Positron và Dark Matter](https://maps.vietmap.vn/docs/assets/map-editor.webp)

* * *

[Map Editor](https://tools.vietmap.vn/map-editor/) là công cụ tùy chỉnh bản đồ VIETMAP trên trình duyệt. Bạn đổi màu đường, mặt nước, công viên, đổi bộ icon địa điểm và font chữ, chọn hiển thị tên tiếng Việt hay tiếng Anh, sau đó nhúng bản đồ vào website hoặc dùng trong app web và di động.

!!! tip "Mở Map Editor"
    **[tools.vietmap.vn/map-editor](https://tools.vietmap.vn/map-editor/)**. Đăng nhập bằng tài khoản VIETMAP; chưa có tài khoản thì [đăng ký tại đây](https://maps.vietmap.vn/console-v2/register).

## Tạo bản đồ từ mẫu

Mục **Mẫu gợi ý** ở trang đầu có 8 mẫu bản đồ. Chọn một mẫu để mở bản đồ đó trong trình chỉnh sửa.

|Mẫu|Mô tả|
|--- |--- |
|Đường phố hiện đại|Bản đồ đường phố tiêu chuẩn của VIETMAP, icon Hiện đại.|
|Classic|Tông sáng, mặt nước xanh dương, công viên xanh bạc hà.|
|Night|Nền xanh than, đường màu ấm.|
|Voyager|Tông ấm, icon Tròn phẳng, hợp với app giao hàng và du lịch.|
|Positron tối giản|Nền xám trắng, dùng làm nền cho dữ liệu riêng.|
|Dark Matter|Nền đen, hợp với dashboard và màn hình giám sát.|
|Dẫn đường|Tông tối tương phản cao, icon Ghim nổi cỡ lớn.|
|Vệ tinh Hybrid|Ảnh vệ tinh kèm tên đường và địa điểm.|

Dark Matter, Night và Dẫn đường là ba mẫu bản đồ nền tối.

## Đổi màu bản đồ

Ở chế độ **Đơn giản**, mục **Mẫu & bảng màu** có 9 bảng màu dựng sẵn; áp một bảng màu là đổi màu cả bản đồ.

Để đổi màu riêng một phần, bấm vào ô màu của phần đó trong danh sách: cao tốc, quốc lộ, đường chính, đường phụ, đường nhỏ, đường tàu, mặt nước, biển, công viên, tòa nhà, khu dân cư. Mỗi phần có nút **Khôi phục màu gốc**.

Đường ranh giới chủ quyền chỉ đổi được sang một màu đặc khác, không ẩn và không làm mờ được.

## Đổi icon địa điểm

Mục **Bộ icon & chữ địa điểm** có 4 bộ icon: Mặc định, Hiện đại, Tròn phẳng và Ghim nổi. Bộ icon được chọn áp cho toàn bộ địa điểm trên bản đồ.

Màu icon chỉnh theo từng nhóm địa điểm: ăn uống, y tế, giáo dục, tài chính, mua sắm, lưu trú, giải trí, tôn giáo, giao thông và cơ quan.

## Ẩn, hiện nhóm địa điểm

Mỗi nhóm địa điểm có nút ẩn/hiện riêng. Ẩn các nhóm không dùng tới để bản đồ đỡ rối.

**Mật độ địa điểm** chỉnh mức zoom mà địa điểm bắt đầu xuất hiện: chọn *Nhiều hơn* để địa điểm hiện sớm hơn khi phóng to, *Ít hơn* để hiện muộn hơn.

## Chữ trên bản đồ và tên tiếng Anh

Font, cỡ chữ, màu chữ và viền chữ của tên địa điểm chỉnh trong mục **Bộ icon & chữ địa điểm**. Đăng nhập để dùng thêm font từ Google Fonts.

Mục **Ngôn ngữ** có ba lựa chọn: Mặc định (tiếng Việt), English và Song ngữ. Tên tỉnh thành, đơn vị hành chính, sông và ranh giới có bản tiếng Anh; tên địa điểm và tên đường giữ tiếng Việt.

## Thêm lớp giao thông

Bật **Giao thông** để hiển thị tình trạng kẹt xe thời gian thực trên bản đồ. Lớp giao thông được lưu cùng bản đồ, nên website và app dùng bản đồ này không phải ghép thêm bằng code.

## Thêm dữ liệu riêng lên bản đồ

**Thêm lớp dữ liệu** lấy các điểm, tuyến và vùng bạn đã tải lên [Quản lý & Tra cứu chi nhánh](https://maps.vietmap.vn/docs/vi/map-api/local-store/overview/) (Local Store) và vẽ vào bản đồ. Dữ liệu từ file Excel được nhập trên MapZone; nhập xong, lớp dữ liệu sẽ có trong danh sách để thêm.

## Kiểm tra màu cho người mù màu

Nút **Giả lập mù màu** trên thanh công cụ hiển thị bản đồ theo cách người mù màu nhìn thấy, để kiểm tra các màu đã chọn còn phân biệt được với nhau.

## Chế độ Nâng cao

Chế độ **Nâng cao** dùng để chỉnh chi tiết từng lớp của bản đồ: thứ tự hiển thị, điều kiện hiển thị, kích cỡ theo mức zoom. Lớp đang chỉnh ở chế độ Đơn giản mở sang Nâng cao bằng **Sửa chi tiết (Nâng cao)**.

## Lưu và cập nhật bản đồ

Bản nháp tự lưu sau 30 giây kể từ lần sửa cuối; `Ctrl+Z` để hoàn tác.

Lần đầu, bấm **Lưu cloud** để lưu bản đồ vào tài khoản. Sau đó nút này đổi thành **Cập nhật**. Website và app đang dùng bản đồ chỉ nhận thay đổi khi bạn bấm Cập nhật, nên có thể sửa thử mà không ảnh hưởng bản đang chạy. Muốn giữ nguyên bản cũ, dùng **Lưu thành style mới**.

**So sánh style** hiển thị hai bản đồ cạnh nhau để đối chiếu trước khi cập nhật.

## Nhúng bản đồ vào website

Mở **Chia sẻ & nhúng** của bản đồ đã lưu, chọn tab **Iframe**, sao chép mã và dán vào trang web hoặc CMS. Bật **Giữ vị trí bản đồ hiện tại** nếu muốn bản đồ nhúng mở đúng khu vực và mức zoom bạn đang xem.

## Dùng bản đồ trong app web và di động

Cũng trong **Chia sẻ & nhúng**, phần code có sẵn đoạn mã đã điền link bản đồ cho Web (HTML), Web (npm), React Native, Flutter, Android (Kotlin), iOS (Swift) và cURL. **Sao chép prompt AI** tạo sẵn yêu cầu tích hợp để dán vào Claude, Cursor hoặc trợ lý AI khác.

Dự án đã dùng [SDK VIETMAP](https://maps.vietmap.vn/docs/vi/sdk-web-gl/overview/) chỉ cần thay link style:

```js
const map = new vietmapgl.Map({
  container: "map",
  style: STYLE_URL, // link style sao chép từ Chia sẻ & nhúng
  center: [106.7009, 10.7769],
  zoom: 12,
});
```

Link style chứa API key bản đồ. Giới hạn tên miền và số lượt gọi cho key trong [Quản lý API Key](https://maps.vietmap.vn/docs/vi/map-api/console/manage-api-key/).

## Thu hồi hoặc tạm dừng link bản đồ

Trang **Style của tôi** liệt kê các bản đồ đã lưu. Với từng bản đồ:

* **Đổi link công khai** tạo link mới. Link cũ, cùng mọi iframe và đoạn code đang dùng nó, ngừng hoạt động; cần thay link mới vào website và app.
* **Tắt link công khai** tạm dừng bản đồ ở mọi nơi đang dùng cho tới khi bật lại.
* Đổi tên hoặc mô tả không làm thay đổi link.

## Xem thêm

* [Bản đồ nền (Tilemap)](https://maps.vietmap.vn/docs/vi/map-api/tilemap/)
* [Lớp giao thông](https://maps.vietmap.vn/docs/vi/map-api/traffic-layer/)
* [Dùng với Leaflet](https://maps.vietmap.vn/docs/vi/map-api/tilemap-leaflet/)