So I went leaflet documentation and copy pasted example I found there to see If can reproduce the map, however, not only the map is broken but it is also overlapping the container it is in. I tried to give .leaflet-container fixed values of width and height but they are not even being recognized.

So My question is is there anything I am missing.

leaflet ponent example

import 'leaflet/dist/leaflet.css';
export default class LeafletMap extends 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
          attribution='&copy; <a href="">OpenStreetMap</a> contributors'
          url='https://{s}.tile.osm/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br/> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    );
  }
}

It is being imported like

<div className="hotel_description_card_right">
   <div className="hotel_description_card_right_container">

       <LeafletMap /> // here

   </div>
</div>

how it is looking now

So I went leaflet documentation and copy pasted example I found there to see If can reproduce the map, however, not only the map is broken but it is also overlapping the container it is in. I tried to give .leaflet-container fixed values of width and height but they are not even being recognized.

So My question is is there anything I am missing.

leaflet ponent example

import 'leaflet/dist/leaflet.css';
export default class LeafletMap extends 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
          attribution='&copy; <a href="http://osm/copyright">OpenStreetMap</a> contributors'
          url='https://{s}.tile.osm/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br/> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    );
  }
}

It is being imported like

<div className="hotel_description_card_right">
   <div className="hotel_description_card_right_container">

       <LeafletMap /> // here

   </div>
</div>

how it is looking now

• javascript
• html
• css
• reactjs
• leaflet

• 2 First you have to do is importing leaflet.css – kboul Commented Apr 26, 2020 at 19:32
• 1 Does this answer your question? Leaflet drawing tiles disjointly – IvanSanchez Commented Apr 26, 2020 at 20:45
• 1 did this import 'leaflet/dist/leaflet.css', I had to I style-loader after that but no success It still looks the same. is there anything else I should do @kboul – bihire boris Commented Apr 26, 2020 at 23:05
• no it doesn't check the ment above and tell me if I am missing something @IvanSanchez – bihire boris Commented Apr 26, 2020 at 23:06
• 1 found the answer here stackoverflow./questions/53872322/… – bihire boris Commented Apr 27, 2020 at 1:13

4 Answers 4

Try using

import "leaflet/dist/leaflet.css";

in your app.js file.

That worked for me.

Set zIndex: 0 in MapContainer or the element where you set centre with latitude and longitude of leaflet.

This worked for me in react with inline styling of that element.

If the map is not displayed properly, it is most likely because you haven't followed all the prerequisites.

1- Make sure all dependencies are installed and using supported versions

2- Make sure Leaflet's CSS is loaded in your Map ponent import "leaflet/dist/leaflet.css";

3- Make sure your map container has a defined height

The overflowing of the map from its specified container happens due to the missing css file of the leaflet package if you are using it through the npm install method to fix this problem you just need to add the css file located in your node_modules/leaflet/dist directory manually before your own css file in your "index.html" file.

    <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css">
    <link rel="stylesheet" href="style.css" />