SDK WEB Overview¶

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¶

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

    <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:

  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:

<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/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 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¶

API Key Requirement: Ensure you replace "your-apikey" in the style URL with a valid API key — register for free on VIETMAP Console to get one.

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