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

# VietMap Branch Locator & Management

**VietMap Branch Locator & Management** is a no-code platform that lets businesses manage your physical locations on an interactive map — with built-in tools for branch management, custom data layers, and seamless iframe embedding into any website or application. Each layer can also be consumed as an **MVT (Vector Tile)** endpoint, so you can overlay your location data directly onto an existing VietMap GL map without exposing the raw dataset to the client and without the performance cost of loading a large JSON file.

**Platform**: [https://local.map.zone](https://local.map.zone)

**Integration support:** [Zalo OA](https://zalo.me/3189066936017422854)

---

## Live Demo

<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>

---

## Key Features

### 1. Branch Management
Create and manage multiple branches or store locations on a single map. Each branch can be configured with:

- Name, address, and contact information
- Operating hours
- Custom category and icon
- Coordinates (auto-geocoded or manually pinned)

All branches are displayed on an interactive map, making it easy for end-users to find the nearest location.

---

### 2. Data Layers
Organize your location data into **custom layers** — group branches by region, type, service, or any business logic. Each layer can be:

- Toggled on/off by the viewer
- Styled with different colors and icons
- Filtered independently

This is ideal for businesses with diverse location types (e.g., showrooms vs. service centers vs. warehouses).

---

### 3. Iframe Embedding
Embed your store map directly into any website, landing page, or web application using a simple `<iframe>` tag. The embed supports:

| Parameter  | Description |
|------------|-------------|
| `embed=true` | Activates embed mode (hides navigation chrome) |
| `sidebar=true` | Shows the location list panel alongside the map |
| `height` | Sets the iframe height in pixels |

**Example embed code:**

```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>
```

Replace `{your-map-id}` with your map's unique identifier from the Local Store dashboard.

---

### 4. MVT Layer Integration with VietMap GL

Each data layer in Store Management can be exposed as a **MVT** endpoint. This lets you pull a single layer directly into your existing VietMap GL map — without the iframe — giving you full control over styling and interaction.

!!! tip "Why MVT instead of loading a JSON file?"
    The traditional approach of fetching a GeoJSON/JSON file and adding it to the map has two major drawbacks:

    - **Data exposure** — the entire dataset is downloaded to the client browser, making it trivial for anyone to extract all your location data via DevTools.
    - **Poor performance at scale** — loading thousands of features as a single JSON payload blocks rendering and degrades map responsiveness. With very large files, parsing and rendering everything at once can freeze or even **crash the browser tab**.

    MVT solves both problems: only the tiles covering the **current viewport and zoom level** are fetched, so the client never sees the full dataset and the browser only processes what it actually needs to render.

**Security & performance comparison:**

| | GeoJSON / JSON file | MVT Layer |
|---|---|---|
| Data exposed to client | **Full dataset** | Only visible tiles |
| Risk of data scraping | High | Minimal |
| Initial load time (large dataset) | Slow — entire file downloaded | Fast — tiles loaded on demand |
| Performance with 10k+ features | Degrades significantly — can freeze / crash the tab | Stays smooth at any scale |
| Tile caching | No | Yes — browser & CDN cacheable |
| Custom styling in VietMap GL | Yes | Yes |

**MVT tile URL format:**

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

**Example — adding a Store Management layer to VietMap GL:**

```js
map.on('load', () => {
  // Only tiles for the current viewport are fetched — raw data is never exposed
  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'
    }
  });
});
```

Replace `{layer-id}` with the layer ID from the Store Management dashboard (found in the layer's **Share / Embed** settings).

---

## Use Cases

| Use Case | Description |
|----------|-------------|
| Retail chain | Display all store locations with opening hours and directions |
| F&B brand | Let customers find the nearest restaurant or café |
| Healthcare | Show clinic and pharmacy branch locations by district |
| Logistics | Visualize depot and service point coverage on a map |
| Real estate | Showcase project locations grouped by city or region |
| Large datasets | Render 10k+ points (ATM networks, agents, lockers) via MVT — smooth where a hand-rolled GeoJSON map would crash |

---


## Contact & Support

- Zalo OA: [Vietmap Solutions](https://zalo.me/3189066936017422854)
- Email: [maps.info@vietmap.vn](mailto:maps.info@vietmap.vn)
- More information: [https://maps.vietmap.vn](https://maps.vietmap.vn)