CODEWITHSUNDEEP
javascripthtmlcssreactjsleaflet
bihire boris
bihire boris

Reputation: 1662

leaflet map overlapping the container div

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 component 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.org/copyright">OpenStreetMap</a> contributors'
          url='https://{s}.tile.osm.org/{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

enter image description here

Upvotes: 3

Views: 3836

Answers (4)

Iliyas
Iliyas

Reputation: 71

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.

Upvotes: 1

shubham malviya
shubham malviya

Reputation: 1

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" />

Upvotes: 0

abdo_me
abdo_me

Reputation: 1

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 component import "leaflet/dist/leaflet.css";

3- Make sure your map container has a defined height

Upvotes: 0

Parivesh Mehta
Parivesh Mehta

Reputation: 69

Try using

import "leaflet/dist/leaflet.css";

in your app.js file.

That worked for me.

Upvotes: 6

Related Questions