#Draw a Polygon on Map

// use maplibre addSource and addLayer function
const sourceId = 'myArea';
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: 'Polygon',
        coordinates: coordinates
      }
    }
  });
}
function addLayer() {
  maplibreMap.addLayer({
    id: layerId,
    type: 'fill',
    source: sourceId,
    layout: {},
    paint: {
      'fill-color': '#007cbf',
      'fill-outline-color': '#ffffcc'
    }
  });
}