Source: https://maps.vietmap.vn/docs/vi/map-api/local-store/overview/

# VIETMAP Quản lý & Tra cứu chi nhánh

**VIETMAP Quản lý & Tra cứu chi nhánh** là nền tảng no-code giúp doanh nghiệp quản lý các địa điểm thực tế của mình trên bản đồ số tương tác — có sẵn công cụ quản lý chi nhánh, tạo lớp dữ liệu riêng, và nhúng iframe vào bất kỳ website hay ứng dụng nào. Mỗi lớp dữ liệu còn dùng được như một endpoint **MVT (Vector Tile)**. Nhờ đó bạn phủ dữ liệu địa điểm thẳng lên bản đồ VietMap GL sẵn có trong ứng dụng — không để lộ dữ liệu gốc cho phía client, cũng không phải tải một file JSON nặng.

**Nền tảng**: [https://local.map.zone](https://local.map.zone)

**Hỗ trợ tích hợp:** [Zalo OA](https://zalo.me/3189066936017422854)

---

## Demo trực tiếp

<iframe src="https://local.map.zone/app/map/3fba3bae-efe9-430b-a27b-a41178a97684?embed=true&sidebar=true&height=629" width="100%" height="629" style="border:0;" allowfullscreen></iframe>

---

## Tính năng chính

### 1. Quản lý chi nhánh
Tạo và quản lý nhiều chi nhánh hoặc cửa hàng trên cùng một bản đồ. Mỗi chi nhánh khai báo được:

- Tên, địa chỉ và thông tin liên hệ
- Giờ mở cửa
- Nhóm và biểu tượng riêng
- Tọa độ (tự động geocode hoặc tự ghim tay)

Toàn bộ chi nhánh hiển thị trên một bản đồ tương tác, người dùng cuối tìm chi nhánh gần nhất rất dễ.

---

### 2. Lớp dữ liệu
Sắp xếp dữ liệu địa điểm thành **các lớp riêng** — nhóm chi nhánh theo vùng, theo loại hình, theo dịch vụ hay theo bất kỳ tiêu chí kinh doanh nào. Mỗi lớp có thể:

- Cho người xem bật/tắt
- Đặt màu và biểu tượng riêng
- Lọc độc lập với nhau

Rất hợp với doanh nghiệp có nhiều loại địa điểm khác nhau (ví dụ showroom, trung tâm bảo hành và kho hàng).

---

### 3. Nhúng bằng iframe
Nhúng bản đồ cửa hàng thẳng vào website, landing page hay ứng dụng web bằng một thẻ `<iframe>` đơn giản. Phần nhúng hỗ trợ:

| Tham số  | Mô tả |
|------------|-------------|
| `embed=true` | Bật chế độ nhúng (ẩn thanh điều hướng) |
| `sidebar=true` | Hiện danh sách địa điểm bên cạnh bản đồ |
| `height` | Đặt chiều cao iframe theo pixel |

**Ví dụ mã nhúng:**

```html
<iframe
  src="https://local.map.zone/app/map/{your-map-id}?embed=true&sidebar=true&height=600"
  width="100%"
  height="600"
  style="border:none;"
  allowfullscreen
></iframe>
```

Thay `{your-map-id}` bằng mã bản đồ của bạn, lấy trong dashboard Local Store.

---

### 4. Tích hợp lớp MVT với VietMap GL

Mỗi lớp dữ liệu trong Store Management đều có thể xuất ra dưới dạng endpoint **MVT**. Nhờ đó bạn kéo thẳng một lớp vào bản đồ VietMap GL sẵn có — không cần iframe — và toàn quyền kiểm soát cách hiển thị lẫn tương tác.

!!! tip "Vì sao dùng MVT thay vì tải file JSON?"
    Cách làm truyền thống là tải một file GeoJSON/JSON rồi nạp vào bản đồ, cách này có hai vấn đề lớn:

    - **Lộ dữ liệu** — toàn bộ tập dữ liệu bị tải xuống trình duyệt, ai cũng có thể mở DevTools ra lấy sạch danh sách địa điểm của bạn.
    - **Chạy ì khi dữ liệu lớn** — nạp hàng nghìn điểm trong một file JSON sẽ chặn quá trình render và làm bản đồ giật. Với file rất lớn, việc phân tích và vẽ toàn bộ cùng lúc có thể làm treo, thậm chí **sập tab trình duyệt**.

    MVT giải quyết cả hai: chỉ tải các tile thuộc **khung nhìn và mức zoom hiện tại**, nên phía client không bao giờ thấy toàn bộ dữ liệu, còn trình duyệt chỉ xử lý đúng phần cần vẽ.

**So sánh về bảo mật và hiệu năng:**

| | File GeoJSON / JSON | Lớp MVT |
|---|---|---|
| Dữ liệu lộ ra client | **Toàn bộ** | Chỉ tile đang hiển thị |
| Nguy cơ bị cào dữ liệu | Cao | Rất thấp |
| Thời gian tải ban đầu (dữ liệu lớn) | Chậm — tải cả file | Nhanh — tile tải theo nhu cầu |
| Hiệu năng với hơn 10.000 điểm | Giảm mạnh — có thể treo/sập tab | Vẫn mượt ở mọi quy mô |
| Cache tile | Không | Có — cache được ở trình duyệt và CDN |
| Tùy biến hiển thị trong VietMap GL | Có | Có |

**Định dạng URL tile MVT:**

```
https://local.map.zone/api/layers/{layer-id}/mvt/{z}/{x}/{y}
```

**Ví dụ — thêm một lớp Store Management vào VietMap GL:**

```js
map.on('load', () => {
  // Chỉ tile của khung nhìn hiện tại được tải — dữ liệu gốc không bao giờ bị lộ
  map.addSource('store-layer', {
    type: 'vector',
    tiles: [
      'https://local.map.zone/api/layers/{layer-id}/mvt/{z}/{x}/{y}'
    ],
    minzoom: 0,
    maxzoom: 22
  });

  map.addLayer({
    id: 'store-points',
    type: 'circle',
    source: 'store-layer',
    'source-layer': 'default',
    paint: {
      'circle-radius': 8,
      'circle-color': '#E53935',
      'circle-stroke-width': 2,
      'circle-stroke-color': '#ffffff'
    }
  });
});
```

Thay `{layer-id}` bằng mã lớp lấy trong dashboard Store Management (nằm ở phần **Share / Embed** của lớp đó).

---

## Dùng vào việc gì

| Bài toán | Mô tả |
|----------|-------------|
| Chuỗi bán lẻ | Hiển thị toàn bộ cửa hàng kèm giờ mở cửa và chỉ đường |
| Thương hiệu F&B | Cho khách tìm nhà hàng, quán cà phê gần nhất |
| Y tế | Hiện phòng khám, nhà thuốc theo từng khu vực |
| Logistics | Nhìn được độ phủ của kho và điểm phục vụ trên bản đồ |
| Bất động sản | Giới thiệu vị trí dự án theo tỉnh thành hoặc theo vùng |
| Dữ liệu lớn | Vẽ hơn 10.000 điểm (mạng ATM, đại lý, tủ khóa nhận hàng) bằng MVT — mượt, trong khi bản đồ GeoJSON tự làm sẽ sập |

---


## Liên hệ & Hỗ trợ

- Zalo OA: [Vietmap Solutions](https://zalo.me/3189066936017422854)
- Email: [maps.info@vietmap.vn](mailto:maps.info@vietmap.vn)
- Thông tin thêm: [https://maps.vietmap.vn](https://maps.vietmap.vn)