Show line data from GeoJSON on the map¶

Show line data from GeoJSON on the map. VietMapGL supports drawing lines on the map using GeoJSON LineString data with the line layer type.

Example¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VietMap SDK</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
   <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' />  
  <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      const map = new vietmapgl.Map({
        container: "map",
        style:
          "https://maps.vietmap.vn/mt/tm/style.json?apikey=c7659ad5cb23c429c48009b8759ec6645d12d0617693aa4b",
        center: [106.715099, 10.800272],
        zoom: 15,
      });

      const geoPolyline = {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [106.71568, 10.80255],
            [106.71565000000001, 10.80244],
            [106.71538000000001, 10.80156],
            [106.71521000000001, 10.801070000000001],
            [106.71516000000001, 10.800960000000002],
            [106.71462000000001, 10.80114],
            [106.71385000000001, 10.80136],
            [106.71350000000001, 10.801430000000002],
            [106.71298, 10.80161],
            [106.71246000000001, 10.80164],
            [106.71237, 10.801590000000001],
            [106.71226000000001, 10.801580000000001],
            [106.71201, 10.801590000000001],
            [106.71195, 10.801590000000001],
            [106.71189000000001, 10.80156],
            [106.71183, 10.8015],
            [106.71181000000001, 10.80146],
            [106.71180000000001, 10.80141],
            [106.71181000000001, 10.801210000000001],
            [106.71252000000001, 10.801210000000001],
            [106.71273000000001, 10.80122],
            [106.71281, 10.801250000000001],
            [106.71324000000001, 10.801260000000001],
            [106.71335, 10.80128],
            [106.71379, 10.80122],
            [106.71455, 10.801],
            [106.71567, 10.80061],
            [106.71599, 10.800500000000001],
            [106.71643, 10.8003],
            [106.71653, 10.80014],
            [106.71660000000001, 10.800070000000002],
            [106.71682000000001, 10.79995],
            [106.71733, 10.79968],
            [106.71794000000001, 10.799380000000001],
            [106.71792, 10.79906],
            [106.71776000000001, 10.79812],
            [106.71774, 10.797930000000001],
            [106.71772000000001, 10.79781],
            [106.71774, 10.79767],
            [106.718, 10.79723],
            [106.71738, 10.79673],
          ],
        },
      };

      map.on("load", function () {
        map.addSource("route", {
          type: "geojson",
          data: geoPolyline,
        });

        map.addLayer({
          id: "route-layer",
          type: "line",
          source: "route",

          layout: {
            "line-join": "round",
            "line-cap": "round",
          },
          paint: {
            "line-color": "#FF5733",
            "line-width": 5,
          },
        },"boundary_province");
      });
    </script>
  </body>
</html>

Parameters¶

Prop	Type	Default	Description	Example
`line-color`	`string`	`#000000`	Màu của line. Có thể là giá trị mã màu, tên màu, hoặc gradient.	`#FF5733`
`line-width`	`number`	`1`	Độ dày của line được tính bằng pixel.	`5`
`line-opacity`	`number`	`1`	Độ trong suốt của line (0 là hoàn toàn trong suốt, 1 là không trong suốt).	`0.7`
`line-dasharray`	`array`	`N/A`	Định nghĩa kiểu nét đứt của đường, với mảng gồm độ dài đoạn gạch và khoảng cách giữa các đoạn.	`[2, 2]` (đường nét gạch 2 pixel, khoảng cách 2 pixel)
`line-translate`	`array`	`[0, 0]`	Dịch chuyển line theo tọa độ `[x, y]` tính bằng pixel.	`[10, 20]`
`line-translate-anchor`	`string`	map	Xác định tham chiếu cho dịch chuyển đường. Có thể là `map` (dịch chuyển theo bản đồ) hoặc `viewport` (dịch chuyển theo khung nhìn).	`viewport`
`line-blur`	`number`	`0`	Độ mờ của đường. Giá trị càng cao thì đường càng mờ.	`0.5`
`line-gradient`	`string`	`N/A`	Gradient màu dọc theo chiều dài của line.	`["interpolate", ["linear"], ["line-progress"], 0, "blue", 1, "red"]`
`line-cap`	`string`	`butt`	Kiểu đầu đường. Có thể là `butt` (không có), `round` (tròn), `square` (vuông).	`round`
`line-join`	`string`	`miter`	Kiểu nối giữa các đoạn đường. Có thể là `bevel` (vát), `round` (tròn), `miter` (mối nối thẳng).	`round`