Source: https://maps.vietmap.vn/docs/sdk-web-gl/overview/

# SDK WEB Overview
![SDK WEB Overview]

[SDK WEB Overview]: https://maps.vietmap.vn/docs/assets/sdk-web.webp  

## Overview  

VietMap GL JS is a powerful JavaScript library designed to create highly interactive maps using WebGL technology. It renders fast vector maps with smooth transitions and supports extensive customization. As a core part of the VietMap GL ecosystem, it seamlessly integrates with other VietMap tools.  

### Key Features:  
- **Custom Map Styles**: Tailor the appearance of maps to suit your application needs.  
- **Fast Vector Maps**: Experience seamless map rendering and performance with vector tiles.  
- **Compatibility**: Easily integrate with other tools and services in the VIETMAP suite.  

---

## Quick Start  

To set up and use VietMap GL JS in your project, follow these steps:  

### 1. Include Required Files  

- HTML Setup
Add the JavaScript and CSS files in the `<head>` section of your HTML file:  

```html
    <script src="https://unpkg.com/@vietmap/vietmap-gl-js@6.0.1/dist/vietmap-gl.js"></script>
    <link href="https://unpkg.com/@vietmap/vietmap-gl-js@6.0.1/dist/vietmap-gl.css" rel="stylesheet" />
```  
- React Setup
If you are using React, install the VietMap GL JS package via npm:  

```bash
  npm install @vietmap/vietmap-gl-js
```  

### 2. Add the Map Container  

Insert a `<div>` element in the `<body>` section to serve as the container for your map. Specify its dimensions using inline styles:  

```html
<div id="map" style="width: 400px; height: 300px;"></div>
```  

### 3. Initialize the Map  

Include the following JavaScript code to initialize and configure your map:  

```html
<script>
  var map = new vietmapgl.Map({
    container: "map", // ID of the map container
    style: "https://maps.vietmap.vn/maps/styles/tm/style.json?apikey=your-apikey", // Map style URL (replace "your-apikey" with your actual API key)
    center: [10, 106], // Initial map center coordinates [longitude, latitude]
    zoom: 9, // Initial zoom level
  });
</script>
```  


To use your own colors and icons, create a map in [Map Editor](https://tools.vietmap.vn/map-editor/) and replace the style URL above with its style link.

Once the above steps are complete, your map will render on the page, ready for interaction.  

---

## Detailed Documentation  

This documentation provides an in-depth guide to VietMap GL JS and is divided into the following sections:  

### 1. **Map**  
This section explains the core `Map` object, which represents the map instance on your page. It allows you to:  
- **Manipulate Styles**: Modify map styles and layers dynamically.  
- **Handle Events**: Respond to user interactions such as clicks, drags, or zooms.  
- **Adjust the Camera**: Change the user's perspective with animations and transitions.  

---

### 2. **Markers and Controls**  
Explains how to add interactive elements and controls to the map, including:  
- **Markers**: Highlight specific points on the map.  
- **Controls**: Add zoom, rotation, or custom UI controls outside the map's canvas.  
- **Popups**: Display information or details when users interact with markers or features.
- **Polylines and Polygons**: Draw lines and shapes on the map for visual representation.

---

### 3. **Geography and Geometry**  
Covers utilities for working with geographic data, such as:  
- Converting coordinates.  
- Creating or editing shapes like polygons and lines.  

 ---

### 4. **Events**  
Explains the event system in VietMap GL JS, enabling interaction with the map, such as:  
- **Map Load**: Detect when the map has fully loaded.  
- **Click Events**: Respond to user clicks on features or markers.  
- **Zoom and Drag**: Trigger custom logic when users interact with the map.  

---

## Additional Notes  

1. **API Key Requirement**: Ensure you replace `"your-apikey"` in the style URL with a valid API key — [register for free on VIETMAP Console](https://maps.vietmap.vn/console-v2/register) to get one.   

For additional examples, detailed configuration options, and advanced usage, refer to the official documentation.