Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TileLayer displays in different order (Using React-Leaflet library)

I'm trying to do a simple Web App using the library react-leaflet.

I have the following code:

import React from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

class LeafletMap extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
  }
}
export default LeafletMap;

However, The TileLayer is displaying in random order all the time. I've read a lot of code where It must work with ComponentDidMount() by Reactjs, but The renders that I've seen are totally different compared to the library.

Do you have any idea what can I do?

like image 558
Javier Muñoz Avatar asked Oct 17 '25 12:10

Javier Muñoz


1 Answers

The only reason It was not working is because we need to add the following code in index.html:

<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css" />
<style type="text/css">
    .leaflet-container {
        height: 400px;
    }
</style>

That's all.

like image 137
Javier Muñoz Avatar answered Oct 19 '25 01:10

Javier Muñoz



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!