0

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

mcpolandc
  • 217
  • 2
  • 7
  • 15

1 Answers1

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/

Anatolii Suhanov
  • 2,524
  • 1
  • 12
  • 14
  • Hi Anatoly, thanks for your suggestion. It looked really promising but I am still unable to see the image. Is there anything else I might be missing? – mcpolandc Nov 13 '20 at 12:52
  • Oh, interesting. It works if I plug in the example image and coords from that link. It seems there might be something up with my image and coords. – mcpolandc Nov 13 '20 at 12:57
  • Could you share your image? – Anatolii Suhanov Nov 13 '20 at 13:02
  • Yes, here you go https://s8.gifyu.com/images/SYL2371493_forest_change-1.gif – mcpolandc Nov 13 '20 at 13:22
  • After playing around more this magically worked for me! I think it was a combination of maybe getting coords wrong as I switched between a few images and the fact that the green in the image is very faint. I am going to mark yours as the answer. Thanks so much for your help! – mcpolandc Nov 13 '20 at 13:36