React-leaflet: map not rendering properly in react bootstrap modal

[clmz]

Hello,

I intially wanted to show the map in a react-bootstrap modal like this:

<Modal show={showMap} onHide={() => {setShowMap(false)}}>
                <Modal.Header closeButton>
                    <Modal.Title>{django.gettext('Karte')}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Map center={position} zoom={13} style={{width: '100%',height: '400px'}}>
                        <TileLayer
                            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        />
                        <Marker position={position}>
                            <Popup>
                                A pretty CSS3 popup. <br /> Easily customizable.
                            </Popup>
                        </Marker>
                    </Map>
                </Modal.Body>
            </Modal>

But when opening the modal, the whole map is grey - when moving it around or zooming in/out, some tiles appear, but most are furthermore grey.
I've checked everything that can cause these problems, especially css import etc- it's all there.

Then I checked the map without the modal - voila, works fine. But this is not the solution for me because I have to show the map within a modal- there's no space on the my site to show it somewehere else.

Any ideas?

[DavidBajon]

I have the exact same issue, just with the difference, that I am using an Ionic Modal and not Bootstrap, but the behaviour is 100% the same.

In addition to that, I also get this problem sometimes outside of the modal. If I refresh the page like 20% of the time it happens. I asume it has something to do with the DOM not beeing ready or some kind of race condition.

[karyofyllis]

Same problem for me. I fixed that by setting the map element on useEffect.
..
const [el, setEl] = useState("")
..
const getEl = React.useCallback(() => {
return
}, [])
...
useEffect(() => {
setEl(getEl())
}, [show, getEl])

...

...
{el}

[devNica]

I have exactly the same problem, I have created a Modal component, to wrap the Map component, I have tried several suggestions but none of these has improved the behavior. I am interested to know if someone already has a solution.

`render() {

    const { position, url, url2, zoom } = this.state

    return (
        <div className="modal fade" id="searchTownModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div className="modal-dialog modal-xl" role="document">
                <div className="modal-content">
                <div className="modal-header">
                    <h5 className="modal-title" id="exampleModalLabel">Marcar Ubicacion del Cliente</h5>
                    <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div className="modal-body">

                        <Map className='map' center={position} zoom={zoom} id="map">

                            <TileLayer
                                url={url2}
                                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

                            />
                            <GeoJSON data={municipios}
                                onEachFeature={(feauture, layer) => {

                                    layer.on('mouseover', function () {
                                        layer.bindTooltip(feauture.properties['Name']).openTooltip()
                                    })

                                    layer.on('click', function () {
                                        let zona = feauture.properties['Name'];
                                    })

                                }}

                            />
                        </Map>



                </div>
                <div className="modal-footer">
                    <button 
                        type="button"
                        className="btn btn-secondary" 
                        data-dismiss="modal"
                        onClick={this.handleOnSave}
                    >
                    Close
                    </button>

                </div>
                </div>
            </div>
        </div>
    );
}`

[devNica]

Hi guys, I have found a solution to the problem with the correct rendering of the Map component.
I have installed jquery as a dependency, and I have created the following function:

`import $ from 'jquery'

export const delay_to_render = (map) => {
$('#searchTownModal').on('show.bs.modal', function (e) {
setTimeout(function () {
map.invalidateSize();
}, 200);
})
}`

I invoke this function from the componentDidMount () in the class that shows the modal window, and I pass it as an argument the reference of the Map component.

componentDidMount(){ delay_to_render(this.refs.map.leafletElement) }

[Anoirwork]

I had the same problem man you just nee to link the cdn of leaflet.js and leaflet.css to index.html in the Public folder of your react project that uses leaflet map like so
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
Hope this helps. Good luck.
If your problem like in the picture then this is the solution.

[PaulLeCam]

Duplicate of #40, cf for more context.