SDK WEB Overview¶

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¶

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

<script src="https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.css" />

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:

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

3. Initialize the Map¶

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

<script>
  var map = new vietmapgl.Map({
    container: "map", // ID of the map container
    style: "https://maps.vietmap.vn/mt/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>

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¶

API Key Requirement: Ensure you replace "your-apikey" in the style URL with a valid API key obtained from VietMap's developer portal.

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