I got a problem with my map. A react-leaflet
map.
It's displayed when I load my website on it. But other way, like on click on a link, it doesn't.
I just load the tiles at the top left, one by one when I scroll.
Did someone have this problem before? Or did someone have an idea?
An Example : http://www.noelshack.com/2019-02-1-1546872914-capture.png
import React, { Component } from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import './local_leaflet.css';
const mapState = {
lat: 49.4431,
lng: 1.0993,
zoom: 10,
visible: true,
url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
};
export default () => (
<div>
<Map center={[mapState.lat, mapState.lng]} zoom={mapState.zoom}>
<TileLayer url={mapState.url} />
</Map>
</div>
);
I already try componentDidMount
, componentDidUpdate
, componentWillUnmount
... and nothing worked.
I resolve my prob. I put a key in my MAP render, like this :
render ()
{
return (
<div>
<Map key={this.state.keyMAP} center={[this.mapState.lat, this.mapState.lng]} zoom={this.mapState.zoom}>
<TileLayer url={this.mapState.url} />
</Map>
</div>
);
}
It's a random key which is in my state. Random, like this.
state = {
keyMAP: Math.random(),
};
Hope it'll help someone else ! :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With