Tiles not ordered correctly when using LeafletJS with ReactJS

Question

I am using the LeafletJS plugin to display a full page map in a ReactJS single page app. I followed the instructions here. However, the tiles are not displayed in correct order. They are ordered randomly (?). I found a similar problem here but in that case the order was fixed on page refresh. That is not true for me. My code is (excluding boilerplate):

index.html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="stylesheets/atlas.css">
  </head>
  <body>
    <div id="app">
      Loading...
    </div>
    <script src="javascripts/atlas.js"></script>
  </body>
</html>

index.js

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
)

App.jsx

import LiveMap from './LiveMap';
// App component
const App = () => (
    <LiveMap />
)
export default App;

LiveMap.jsx

class LiveMap extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div id='map'></div>
        );
    }

    componentDidMount() {
        let _map = this.map = L.map(ReactDOM.findDOMNode(this)).setView([-41.2858, 174.78682], 14);
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> Contributors',
            maxZoom: 18,
            }).addTo(_map);    
    }

    componentWillUnmount() {...}

    shouldComponentUpdate() {return false;}
};
export default LiveMap;

Try setting a timeout before you render the map. componentDidMount can be somewhat misleading in that the element has been inserted into the DOM but not fully rendered (no width and height). Leaflet needs the width and height to render properly... — Greg Venech
– Greg Venech, Commented Apr 9, 2016 at 16:03
What are your atlas.css and atlas.js files made of? The shuffled tiles is usually a symptom of not loading leaflet.css stylesheet. — ghybs
– ghybs, Commented Apr 9, 2016 at 17:10
@ghybs I tried loading leaflet.css explicitly. Still no success. — 341008
– 341008, Commented Apr 10, 2016 at 17:54
@341008 if it's not either of those things then I'm kind of at a loss.. Can you add a live example of the issue? — Greg Venech
– Greg Venech, Commented Apr 10, 2016 at 18:24

Community · Accepted Answer · 2017-05-23 12:32:39Z

1

I'm pretty sure your issue is that the element has not fully rendered by the time your code executes or, as mentioned by @ghybs, not loading the Leaflet stylesheet. See this question, especially the second answer, which addresses this problem:

One drawback of using componentDidUpdate, or componentDidMount is that they are actually executed before the dom elements are done being drawn, but after they've been passed from React to the browser's DOM.

Solution

In order to get around this you must wrap your map creation code in a setTimeout like so:

componentDidMount() {
    let element = ReactDOM.findDOMNode(this)

    setTimeout(() => {
      this.map = new L.map(element, {
          center: new L.LatLng(41.019829, 28.989864),
          zoom: 14,
          maxZoom: 18,
          layers: new L.TileLayer('...')
      }, 100)
    })
  }

I put together a pen which illustrates a working example of a leaflet map inside a React component. Also make sure you are including leaflet's stylesheet:

...
<head>
  <link rel="stylesheet" href="stylesheets/atlas.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
</head>
...

I would also recommend using ref which I updated the pen to use. You can read more refs here.

3 Comments

341008 Over a year ago

What you are saying definitely makes sense. And your pen obviously works. But when I try doing the same in my code it breaks. I just copied code from your pen to my (stripped down) files and got shuffled tiles as before. I must be missing something basic here.

341008 Over a year ago

I also tried the trick with window.requestAnimationFrame(callback) mentioned in the link you pointed to. No luck.

Greg Venech Over a year ago

@341008 You're most likely missing the stylesheet then.. If you look at the codepen style settings I'm loading it there (not directly through the html section)

Collectives™ on Stack Overflow

Tiles not ordered correctly when using LeafletJS with ReactJS

1 Answer 1

Solution

Related Questions

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution

Related Questions

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related