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 : .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/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 ponentDidMount, ponentDidUpdate, ponentWillUnmount ... and nothing worked.

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./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./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 ponentDidMount, ponentDidUpdate, ponentWillUnmount ... and nothing worked.

• javascript
• reactjs
• leaflet
• react-leaflet
• extreact

• It can happen with Leaflet when it cannot calculate the size of the div containing the map. First , try setting static size on your parent div just to try. – Gbacc Commented Jan 7, 2019 at 15:12
• I try it but it don't work. :( – Anastasia Commented Jan 7, 2019 at 15:35

1 Answer 1

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 ! :)