Search code examples
leafletreact-leaflet

react-leaflet V4 ImageOverlay not displaying the overlay

I am using react-leaflet with geoJson to draw the borders of a specific country.

I have to put an overlay/background image around this country based on the borders coordinates (in order to draw the sea around it, north and east side) and I am trying to use the ImageOverlay but it does not show up.

here the example: https://codesandbox.io/s/dazzling-browser-0uj0pb?file=/src/App.js

I can see the image in the dom but the css properties are hiding it

Solution

  • Your bounds object is not actually a bounds:

    const bounds = [[40.712216, -74.22655]];

    You need 2 points to define bounds:

    const bounds = [
  [34, 9],
  [32, 11]
];

    Working Codesandbox