VietMap GL with HTML¶

This example demonstrates how to integrate VietMap GL with HTML to display a map.

Example¶

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Map</title>
    <link rel='stylesheet' href='https://unpkg.com/@vietmap/vietmap-gl-js@6.0.0/dist/vietmap-gl.css' />
    <script src='https://unpkg.com/@vietmap/vietmap-gl-js@6.0.0/dist/vietmap-gl.js'></script>

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = new vietmapgl.Map({
        container: "map",
        style:
          "https://maps.vietmap.vn/maps/styles/tm/style.json?apikey=YOUR_API_KEY_HERE",
        center: [106.66817068179284, 10.803866192772915],
        zoom: 9,
      });
      map.addControl(new vietmapgl.NavigationControl());
    </script>
  </body>
</html>

Map Options¶

Prop	Type	Default	Description	Example
container	`HTMLElement`	`null`	Reference to the DOM element where the map will be mounted.	`mapContainer.current` (used with `useRef`)
style	MapType	`null`	URL of the map style.	`https://maps.vietmap.vn/maps/styles/tm/style.json?apikey=${VIETMAP_API_KEY}`
apiKey	`string`	`null`	`VietMap` API key provided by VietMap.	`VIETMAP_API_KEY`
center	`ILatLng`	`[0,0]`	Center coordinates of the map [longitude, latitude].	`106.675477,10.758898`
zoom	`number`	`0`	Map zoom level. (0-18)	`12`
pitch	`number`	`0`	Map tilt angle. (0-60)	`0`
bearing	`number`	`0`	Map rotation angle in degrees. (0-360)	`0`
controlPosition	ControlOptions	`top-right`	Position of map control buttons.	`top-right`
minZoom	`number`	`0`	Minimum zoom level. (0-18)	`0`
maxZoom	`number`	`0`	Maximum zoom level. (0-18)	`0`
version	`string`	`1.5.3`	Map version.	`1.5.3`
interactive	Interactive	`true`	Allow user interaction with the map.	`true`