Adding Ground Overlays in map

This documentation provides methods for creating a ground overlay on top of a map

Add ground overlays to map using addSource method and style it using addLayer’s paint properties.

myMap.on('load', () => {
  myMap.addSource([GROUND OVERLAY ID], {
    type: 'image',
    url: [IMAGE URL], // Replace with your image URL or base64
    coordinates: [
      [NW CORNER COORDINATES],
      [NE CORNER COORDINATES],
      [SE CORNER COORDINATES],
      [SW CORNER COORDINATES],
    ],
  })
  myMap.addLayer({
    id: 'overlay',
    type: 'raster',
    source: [GROUND OVERLAY ID],
    paint: {
      'raster-opacity': [ADD OPACITY], // from 0 to 1
    },
  })
})

Example

Taj Mahal Tourist Map Overlay

myMap.on('load', () => {
  myMap.addSource('ground-overlay', {
    type: 'image',
    url: [IMAGE URL], // Replace with your image URL or base64
    coordinates: [
      [78.039, 27.1781], // NW corner (Top-Left)
      [78.0452, 27.1781], // NE corner (Top-Right)
      [78.0452, 27.1721], // SE corner (Bottom-Right)
      [78.039, 27.1721], // SW corner (Bottom-Left)
    ],
  })
  myMap.addLayer({
    id: 'overlay',
    type: 'raster',
    source: 'ground-overlay',
    paint: {
      'raster-opacity': 0.75, // from 0 to 1
    },
  })
})