Adding Shapes in map

This documentation provides methods for adding polyline and polygons in map.

Adding Polyline

Add a GeoJSON line to map using addSource map method and style it using addLayer’s paint properties.
myMap.on('load', () => {
  myMap.addSource([POLYLINE ID], {
    type: 'geojson',
    data: {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: [ADD YOUR COORDINATES HERE],
      },
    },
  })
  myMap.addLayer({
    id: [POLYLINE ID],
    type: 'line',
    source: [POLYLINE ID],
    layout: { 'line-join': 'round', 'line-cap': 'round' },
    paint: {
      'line-color': [ADD LINE COLOR],
      'line-width': [ADD LINE WIDTH],
    },
  })
})

Example

lineMap.on('load', () => {
  lineMap.addSource('route', {
    type: 'geojson',
    data: {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: [
          [77.61648476788898, 12.932323492103944],
          [77.61348476788898, 12.942223492103944],
          [77.61648476788898, 12.962223492103944],
          [77.62648476788898, 12.952223492103944],
          [77.65648476788898, 12.952223492103944],
        ],
      },
    },
  })
  lineMap.addLayer({
    id: 'route',
    type: 'line',
    source: 'route',
    layout: { 'line-join': 'round', 'line-cap': 'round' },
    paint: {
      'line-color': '#f00',
      'line-width': 4,
    },
  })
})

Adding Polygon

Add a GeoJSON polygon to map using addSource map method and style it using addLayer’s paint fill layer properties.
myMap.on('load', () => {
  myMap.addSource([POLYGON ID], {
    'type': 'geojson',
    'data': {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': [[ADD YOUR COORDINATES HERE]]
      }
    }
  });
  myMap.addLayer({
    'id': [POLYGON ID],
    'type': 'fill',
    'source': [POLYGON ID],
    'layout': {},
    'paint': {
      'fill-color': [ADD FILL COLOR],
      'fill-opacity': [ADD FILL OPACITY]
    }
  });
});

Example

myMap.on('load', () => {
  myMap.addSource('polygon', {
    'type': 'geojson',
    'data': {
      'type': 'Feature',
      properties: {},
      'geometry': {
        'type': 'Polygon',
        'coordinates': [
          [
            [79.1200, 21.1400], // Outer Point A
            [79.1062, 21.1445], // Inner Point F
            [79.1062, 21.1590], // Outer Point D
            [79.0976, 21.1473], // Inner Point G
            [79.0838, 21.1518], // Outer Point B
            [79.0924, 21.1400], // Outer Point E
            [79.0838, 21.1282], // Inner Point H
            [79.0976, 21.1327], // Inner Point I
            [79.1062, 21.1210], // Outer Point C
            [79.1062, 21.1355]  // Inner Point J
          ]
        ]
      }
    }
  });
  myMap.addLayer({
    'id': 'polygon',
    'type': 'fill',
    'source': 'polygon',
    'layout': {},
    'paint': {
      'fill-color': '#088',
      'fill-opacity': 0.6
    }
  });
});