Tilemap¶
AI Agent Integration 
NEW
Download the optimized doc for AI agent integration (SDK + Tilemap): Map Display Agent Doc
The VIETMAP Tilemap serves raster, vector tiles generated from VIETMAP styles. Raster tiles can be used in traditional web mapping libraries like Mapbox.js, Leaflet, OpenLayers, and others to create interactive slippy maps. The VIETMAP Tilemap is well-suited for maps with limited interactivity or use on devices that do not support WebGL. Using a tilemap approach to rendering maps provides several benefits, including:
- Improved performance (since only the visible tiles need to be loaded)
- Reduced data usage (since tiles can be cached for offline use)
- Better scalability (since the number of tiles can be adjusted based on the level of zoom)
VIETMAP now provides 2 types of custom maps
| Name | Description |
|---|---|
| Raster | The map data is typically stored as raster images, which are then divided into a grid of small tiles, each containing a specific portion of the map. |
| Vector | Vector tiles are small packages of vector data that can be downloaded and rendered on a client device, such as a web browser or mobile app. The vector data can include information such as street names, building footprints, and topographic features. |
Preview on our Live Map: https://tools.vietmap.vn/live
Vector¶
Vector tilemap APIs offer more flexibility in terms of customizing the appearance of the map. Developers can use the API to control the rendering of map features such as colors, labels, and icons, making it easier to create maps that match their specific branding or design requirements.
To display vector map for mobile, we provide Web SDKs, Flutter SDK, React Native SDK, Android SDK, and iOS SDK.
For Web, please contact us for more information.
VietMap Maps SDK Integration¶
From Web SDK v6.0.0, we provide the following vector tilemap styles for use in the VIETMAP Maps SDK. If you are using the VIETMAP Maps SDK with lower version, please upgrage to the latest version to use these styles. It still compatible with previous versions of all mobile SDK, so you can use these styles without any issues.:
Vector styles — pass the style.json URL directly to any VietMap SDK's style parameter:
| Style | Description | URL |
|---|---|---|
| Vector Default (Street) | The default style for VIETMAP maps, suitable for general use. | https://maps.vietmap.vn/maps/styles/tm/style.json?apikey={your-apikey} |
| Vector Light | A lighter version of the default style, optimized for readability in bright conditions. | https://maps.vietmap.vn/maps/styles/lm/style.json?apikey={your-apikey} |
| Vector Dark | A dark-themed style for better visibility in low-light conditions. | https://maps.vietmap.vn/maps/styles/dm/style.json?apikey={your-apikey} |
| Vector Hybrid | Satellite imagery base with road and label overlay — best for location verification and field operations. | https://maps.vietmap.vn/maps/styles/hm/style.json?apikey={your-apikey} |
Traffic overlay — vector style merged on top of the active base style:
| Style | Description | URL |
|---|---|---|
| Traffic | Real-time congestion coloring — merge its sources & layers into the current map. | https://maps.vietmap.vn/maps/styles/tf/style.json?apikey={your-apikey} |
How to use the Traffic overlay
Fetch tf/style.json, then add its sources and layers into the currently active map using map.addSource() / map.addLayer(). Do not pass this URL to the SDK's style parameter — that would replace the base map. Re-add after map.on("style.load", ...) because setStyle wipes all custom sources and layers.
Raster tiles — use as an XYZ tile source in Leaflet, OpenLayers, or a GL JS raster source:
| Style | Description | URL |
|---|---|---|
| Satellite | Raw satellite imagery, no road labels. | https://maps.vietmap.vn/maps/tiles/st/{z}/{x}/{y}.png?apikey={your-apikey} |
Hybrid vs Satellite
Satellite (st) is raw raster imagery with no labels — use as an XYZ raster source. Hybrid (hm) is a full vector style with satellite imagery + road/POI labels — use the style.json URL with any GL-based SDK.
Important
Remember to set limitation (add referer and limit req by ip for APIKey). Please refer to Manage API Key for more details.
