CODEWITHSUNDEEP
leafletreact-leaflet
Matteobikk90
Matteobikk90

Reputation: 185

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

Upvotes: 0

Views: 1175

Answers (1)

Seth Lutske
Seth Lutske

Reputation: 10676

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

Upvotes: 1

Related Questions