Is there a way to overlay a png and coordinates on a map using react-map-gl

Question

I am trying to display a png image on a react-map-gl map similarly to how it is described here but the image does not display as expected and there are no errors to work with.

Here is the code

const Map = (props: Props) => {
  const [viewport, setViewPort] = useState<InteractiveMapProps>({
    width: '100%',
    height: 300,
    latitude: 4.6500,
    longitude: 97.5900,
    zoom: 6
  })

  const onViewportChange = (viewport: InteractiveMapProps) => {
    setViewPort(viewport)
  }
   return (
    <MapGL
        {...viewport}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        onViewportChange={onViewportChange}
        mapStyle={mapStyle}
      >
        <Source
          id="map-source"
          type="image"
          url="https://image-"
          coordinates={[
            [95.23065877832998, 5.657816030165357],
            [98.90221227671044, 5.657816030165357],
            [98.90221227671044, 3.673126719208502],
            [95.23065877832998, 3.673126719208502],
          ]}
        />
      </MapGL>
     )

Any insight on this would be greatly appreciated

Answer 1

You need a layer for that.

Something like this

<Source
  id="map-source"
  type="image"
  url="https://image-"
  coordinates={[
    [95.23065877832998, 5.657816030165357],
    [98.90221227671044, 5.657816030165357],
    [98.90221227671044, 3.673126719208502],
    [95.23065877832998, 3.673126719208502]
  ]}
/>
<Layer
  id="overlay"
  source="map-source"
  type="raster"
  paint={{ "raster-opacity": 0.85 }}
/>

based on https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/