How do vector tiles differ from raster tiles?

Vector tiles carry geometry that the map library draws on the device, so they stay sharp when zoomed and can be rotated, tilted and restyled. Raster tiles are pre-rendered PNG images, one per tile. The Tilemap API serves style.json for the vector maps (tm, lm, dm, hm) and a raster satellite source, st, at /maps/tiles/st/{z}/{x}/{y}.png.

Which platforms can use the Tilemap API?

Vietmap GL JS on the web, and SDKs for Flutter, Android, iOS and React Native on mobile. This page generates the setup code for each platform with the style you are looking at; only the API key needs replacing.

How do I show live traffic on the map?

Real-time traffic is a separate style (/maps/styles/tf/style.json) drawn on top of the base map. Switch it on here to preview it, then copy the code into your app.

Does it cost anything to try the Tilemap API?

The playground comes with a demo API key, so you can call the Tilemap API straight from the browser without signing up. To build it into a product, register a VIETMAP account for your own key. Usage is billed per transaction, each API converting requests to transactions at its own rate; the pricing page has the details and the free trial.

Tilemap API

Pick a style and a view, see the map running on your API key, then copy the setup code for your platform.

https://maps.vietmap.vn/maps/styles/tm/style.jsonThe map is shown with the playground's base-map key (the key field is empty, or holds the demo key — which may not load tiles). Enter your own key to test what it can do.

Map setup code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://unpkg.com/@vietmap/vietmap-gl-js@6.0.1/dist/vietmap-gl.css" rel="stylesheet" />
  <script src="https://unpkg.com/@vietmap/vietmap-gl-js@6.0.1/dist/vietmap-gl.js"></script>
  <style>html, body, #map { margin: 0; height: 100%; }</style>
</head>
<body>
  <div id="map"></div>
  <script>
    // Client-side key: restrict it by domain / bundle id in the Console.
    const API_KEY = "YOUR_API_KEY";

    const map = new vietmapgl.Map({
      container: "map",
      style: `https://maps.vietmap.vn/maps/styles/tm/style.json?apikey=${API_KEY}`,
      center: [106.695921, 10.796668], // [lng, lat] — longitude first
      zoom: 13,
    });
    map.addControl(new vietmapgl.NavigationControl());
  </script>
</body>
</html>

Replace YOUR_API_KEY with your API key before running.

// npm install @vietmap/vietmap-gl-js
import vietmapgl from "@vietmap/vietmap-gl-js/dist/vietmap-gl";
import "@vietmap/vietmap-gl-js/dist/vietmap-gl.css";

// Client-side key: restrict it by domain / bundle id in the Console.
const API_KEY = "YOUR_API_KEY";

const map = new vietmapgl.Map({
  container: "map", // id of a <div> with a height
  style: `https://maps.vietmap.vn/maps/styles/tm/style.json?apikey=${API_KEY}`,
  center: [106.695921, 10.796668], // [lng, lat] — longitude first
  zoom: 13,
});
map.addControl(new vietmapgl.NavigationControl());

Replace YOUR_API_KEY with your API key before running.

// pubspec.yaml → dependencies: vietmap_flutter_gl: ^4.1.1
import 'package:vietmap_flutter_gl/vietmap_flutter_gl.dart';

const apiKey = 'YOUR_API_KEY';

VietmapGL(
  styleString: 'https://maps.vietmap.vn/maps/styles/tm/style.json?apikey=$apiKey',
  // LatLng(lat, lng) — latitude first here, unlike the web SDK
  initialCameraPosition: CameraPosition(
    target: LatLng(10.796668, 106.695921),
    zoom: 13,
  ),
)

Replace YOUR_API_KEY with your API key before running.

// settings.gradle → repositories { maven { url 'https://jitpack.io' } }
// build.gradle    → implementation 'com.github.vietmap-company:maps-sdk-android:2.0.4'
// layout          → <vn.vietmap.vietmapsdk.maps.MapView android:id="@+id/mapView" … />

private const val API_KEY = "YOUR_API_KEY"

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        Vietmap.getInstance(this) // before super.onCreate
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val mapView = findViewById<MapView>(R.id.mapView)
        mapView.onCreate(savedInstanceState)
        mapView.getMapAsync { vietMapGL: VietMapGL ->
            vietMapGL.setStyle(
                Style.Builder().fromUri("https://maps.vietmap.vn/maps/styles/tm/style.json?apikey=$API_KEY")
            )
            vietMapGL.cameraPosition = CameraPosition.Builder()
                .target(LatLng(10.796668, 106.695921))
                .zoom(13.0)
                .build()
        }
    }
}

Assembled from the official SDK docs; the camera line / module name follow the MapLibre API these SDKs build on — check the SDK docs before shipping. Replace YOUR_API_KEY with your API key before running.

// Podfile → pod 'Vietmap', '~> 1.2.2'
import UIKit
import Vietmap

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let apiKey = "YOUR_API_KEY"
        let styleURL = URL(string: "https://maps.vietmap.vn/maps/styles/tm/style.json?apikey=\(apiKey)")

        let mapView = MGLMapView(frame: view.bounds, styleURL: styleURL)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.setCenter(
            CLLocationCoordinate2D(latitude: 10.796668, longitude: 106.695921),
            zoomLevel: 13,
            animated: false
        )
        view.addSubview(mapView)
    }
}

// npm install @vietmap/vietmap-gl-react-native   (Expo: development build, not Expo Go)
import { MapView, Camera } from "@vietmap/vietmap-gl-react-native";

const API_KEY = "YOUR_API_KEY";

export default function Map() {
  return (
    <MapView
      mapStyle={`https://maps.vietmap.vn/maps/styles/tm/style.json?apikey=${API_KEY}`}
      style={{ flex: 1 }}
    >
      {/* [lng, lat] — longitude first */}
      <Camera zoomLevel={13} centerCoordinate={[106.695921, 10.796668]} />
    </MapView>
  );
}

Replace YOUR_API_KEY with your API key before running.

https://maps.vietmap.vn/maps/styles/tm/style.json?apikey=YOUR_API_KEY

Works with any library that reads MapLibre / Mapbox GL styles.

I need to display a Vietmap map in my application.
Official documentation: https://maps.vietmap.vn/docs/map-api/tilemap/?referer=https%3A%2F%2Ftools.vietmap.vn%2Fplayground%2F
Requirements:
1. Map style: Street (tm) — https://maps.vietmap.vn/maps/styles/tm/style.json?apikey=YOUR_API_KEY
2. Initial view: latitude 10.796668, longitude 106.695921, zoom 13. Note the web and React Native SDKs take [lng, lat]; Flutter/Android/iOS take (lat, lng).
3. No traffic overlay.
4. Read the API key from configuration, never hard-code it. It is a client-side key, so restrict it by domain / bundle id in the Vietmap Console.
5. Keep the map attribution control visible.

Write the code for [my platform / framework], using the official Vietmap SDK for it. If unsure about a class or package name, check the documentation above instead of guessing.

Paste into ChatGPT, Claude… to generate integration code. The prompt never contains your API key.

Open in ChatGPT Open in Claude

https://tools.vietmap.vn/playground/en/tilemap?style=tm&center=10.796668,106.695921&zoom=13

Opens the playground with exactly these parameters — for the docs or a colleague. The link never contains an API key.

Map Editor

Open Map Editor

Design your own map style — colours, visible layers, your data — then publish it to use right here and in your app.

Map Editor can only be embedded when the playground runs on tools.vietmap.vn — here it opens in a new tab.

What is the Tilemap API?

The Tilemap API serves Vietmap's vector base map to web and mobile apps: a style.json that describes the sources, layers and fonts, so a map library (Vietmap GL JS, the Flutter, Android, iOS or React Native SDK) draws the map itself. Four styles are ready to use — Street, Light, Dark and Hybrid satellite — plus a real-time traffic layer on top. Styles designed in Map Editor work through the same mechanism.

What it is for

Base map for order and fleet tracking screens.
Maps in ride-hailing, food delivery and real-estate apps.
Dark dashboards for control and monitoring rooms.
Branded maps with a custom style.

Sample request

GET https://maps.vietmap.vn/maps/styles/tm/style.json?apikey=YOUR_API_KEY

Swap tm for lm, dm or hm for the Light, Dark or Hybrid style.

Learn more

Tilemap API FAQ

How do vector tiles differ from raster tiles?: Vector tiles carry geometry that the map library draws on the device, so they stay sharp when zoomed and can be rotated, tilted and restyled. Raster tiles are pre-rendered PNG images, one per tile. The Tilemap API serves style.json for the vector maps (tm, lm, dm, hm) and a raster satellite source, st, at /maps/tiles/st/{z}/{x}/{y}.png.
Which platforms can use the Tilemap API?: Vietmap GL JS on the web, and SDKs for Flutter, Android, iOS and React Native on mobile. This page generates the setup code for each platform with the style you are looking at; only the API key needs replacing.
How do I show live traffic on the map?: Real-time traffic is a separate style (/maps/styles/tf/style.json) drawn on top of the base map. Switch it on here to preview it, then copy the code into your app.
Does it cost anything to try the Tilemap API?: The playground comes with a demo API key, so you can call the Tilemap API straight from the browser without signing up. To build it into a product, register a VIETMAP account for your own key. Usage is billed per transaction, each API converting requests to transactions at its own rate; the pricing page has the details and the free trial.