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.

    const map = new vietmapGl.Map({
      container: "map",
      style:
        `https://maps.vietmap.vn/mt/tm/style.json?apikey=${YOUR_API_KEY_HERE}`,
      center: [vietmap.lng, vietmap.lat],
      zoom: 3,
      minZoom: 5,
      maxZoom: 15,
      pitch: 20,
      bearing: 30,
    });

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

    map.setZoom(2);

Initial zoom

    zoom: 14

Set min zoom

    map.setMinZoom(5);

Initial min zoom

    minZoom: 5

Set max zoom

    map.setMaxZoom(15);

Initial max zoom

    maxZoom: 15

Bearing¶

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

Set bearing

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

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

    const map = new vietmapgl.Map({
        container: "map",
        style:
          "https://maps.vietmap.vn/mt/tm/style.json?apikey=YOUR_API_KEY_HERE",
        center: [106.66817068179284, 10.803866192772915],
        zoom: 14,
        interactive: false,
    });