#Draw a Line on Map

// use maplibre addSource and addLayer function
const sourceId = 'myLine';
const layerId = sourceId + 'Layer';
const coordinates = [
  [114.16139, 22.30704],
  [114.15964, 22.30312],
  [114.16059, 22.30289],
  [114.1634, 22.303],
  [114.16352, 22.30652]
];
// init maplibre-gl map
const maplibreMap = new maplibregl.Map({
    container: 'map'
});

function addSource() {
  maplibreMap.addSource(sourceId, {
    type: 'geojson',
    data: {
      type: 'Feature',
      geometry: {
        type: 'LineString',
        coordinates: coordinates
      }
    }
  });
}
function addLayer() {
  maplibreMap.addLayer({
    id: layerId,
    type: 'line',
    source: sourceId,
    layout: {
      'line-join': 'round',
      'line-cap': 'round'
    },
    paint: {
      'line-color': '#007cbf',
      'line-width': 8
    }
  });
}