Bug report in v4

Before opening an issue, make sure to read the contributing guide and understand this is a bug tracker, not a support platform.

Please make sure to check the following boxes before submitting an issue.
Issues opened without using this template will be closed unless they have a good reason not to follow this template.

• [X] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [X] Using the latest version of React and ReactDOM v18.
• [X] Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
• [X] Using the latest v4 version of React-Leaflet.
• [X] The issue has not already been reported.
• [X] Make sure you have followed the quick start guide for Leaflet.
• [X] Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

Looking at MapContainer properties' types we check center to be optional, so, if we don't put a center to the map, it should a show a random location.

Actual behavior

The map is totally gray, not showing anything.

Steps to reproduce

Please provide the simplest example possible to reproduce the issue, based on this CodePen.

Just remove the center from the map.

What's the problem?

Thank you

Bug report in v4

Before opening an issue, make sure to read the contributing guide and understand this is a bug tracker, not a support platform.

Please make sure to check the following boxes before submitting an issue.
Issues opened without using this template will be closed unless they have a good reason not to follow this template.

• [X] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [X] Using the latest version of React and ReactDOM v18.
• [X] Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
• [X] Using the latest v4 version of React-Leaflet.
• [X] The issue has not already been reported.
• [X] Make sure you have followed the quick start guide for Leaflet.
• [X] Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

The map displays correctly

Actual behavior

The map does not display correctly

Steps to reproduce

Trying to test the example and it does not work correctly. The link is here : https://codepen.io/PaulLeCam/pen/OJxEbBW

I got that

I am not sure that it is the best place to tell that but I wanted to use that new version of library and it does not work ....

Thank you a lot for your help !

I ran into this issue on MacOS and solved it with the following: seems the docs are off a bit

-Adding INLINE styling to the MapContainer component Directly -Adding an ACTUAL height to this Component [in pixels or otherwise] -Importing the StyleSheet -- import "leaflet/dist/leaflet.css";

Others were having issues trying to add styling to the div, as per the documentation. This did not work for me until I tried:

< MapContainer style={{ width: '100%', height: '600px' }} center={position} zoom={13} >

Hope this helps!

Originally posted by @ashley-christensen in https://github.com/PaulLeCam/react-leaflet/issues/990#issuecomment-1146855009

I solved this bug by doing the following and it worked great!

-Adding INLINE styling to the MapContainer component Directly -Adding an ACTUAL height to this Component [in pixels or otherwise] -Importing the StyleSheet -- import "leaflet/dist/leaflet.css";

Others were having issues trying to add styling to the div, as per the documentation. This did not work for me until I tried:

< MapContainer style={{ width: '100%', height: '600px' }} center={position} zoom={13} >

Hope this helps!

Hello, just want to ask, currently i have an

<ImageOverlay className="object-fit-cover" url={props.image} bounds={props.availableBounds} />

as you can see, the bounds is based on the props.availableBounds now this value will be updated in realtime, what happens is, the map will instantiate, then the image will be placed on the map, but everytime i update the value of availableBounds, the ImageOverlay is not moving. The hack that i did was, to reinstantiate the MapContainer for me to be able to see the updated ImageOverlay bounds.

Is there a way to update the ImageOverlay bounds freely? without reinstantiating the MapContainer? Thanks!

Hi I'm trying to import withLeaflet from react-leaflet but not exists. I'm using the version: "react-leaflet": "^3.2.5". any sugestion/help to solve this?