Source: https://maps.vietmap.vn/docs/sdk-web-gl/map/example-map/map-interaction/

# Map Interaction
Map interaction is an important part of the map, it allows users to interact with the map and get information from the map.
```js
    const map = new vietmapGl.Map({
      container: "map",
      style:
        `https://maps.vietmap.vn/maps/styles/tm/style.json?apikey=${YOUR_API_KEY_HERE}`,
      center: [vietmap.lng, vietmap.lat],
      zoom: 3,
      minZoom: 5,
      maxZoom: 15,
      pitch: 20,
      bearing: 30,
    });
```

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.

It includes:

### Zoom
Zoom is the ability to zoom in and out of the map, allowing users to see more details or a wider area.

**Set zoom**

```js
    map.setZoom(2);
```

**Initial zoom**

```js
    zoom: 14
```

**Set min zoom**

```js
    map.setMinZoom(5);
```

**Initial min zoom**

```js
    minZoom: 5
```

**Set max zoom**

```js
    map.setMaxZoom(15);
```

**Initial max zoom**

```js
    maxZoom: 15
```

### Bearing
Bearing is the ability to rotate the map, allowing users to see the map from different angles.

**Set bearing**
 
```js
    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],
        bearing: 30
    });
```


### Pitch
Pitch is the ability to tilt the map, allowing users to see the map from different angles.

**Set pitch**

```js
    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],
        pitch: 20
    });
```

### Interactive
Interactive is the ability to interact with the map, allowing users to move the map, zoom in and out, rotate the map, tilt the map, etc.
You can set interactive to false to disable interaction with the map.

```js
    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: 14,
        interactive: false,
    });
```