React leaflet does not render properly, not functioning

[inovramadani]

Bug report in v4

Expected behavior

Should function as leaflet JS.

Actual behavior

Broken maps, not functioning at all

Steps to reproduce

Go quickly to the sandbox and you will know quickly:
https://codesandbox.io/s/react-leaflet-bug-sw6i8o?file=/src/App.js

[blitz2200]

exactly same here

[inovramadani]

It's ok if I use:

[email protected]
[email protected]

[macrouch]

import "leaflet/dist/leaflet.css";

[almahdi404]

it should be closed now.

[Arif-un]

Solved this issue by installing leaflet
and
import "leaflet/dist/leaflet.css";

Style files should be kept with react-leaflet package or mentioned in docs.

[hanlinthedev]

I already tried every methods mention above but the map is still broken

[jcable]

with
[email protected]
[email protected]
I get [email protected] is required but both require react 17 and I'm on react 18.
with react-leaflet 4.2.0 and leaftlet 1.9.3 without the CSS import I get fragmented maps not alligned. With the CSS import I get nothing at all

[jcable]

I've got it working. The problem is that the mandatory height attribute has to be applied to the div that's rendered by the react MapContainer JSX element. It's not obvious and it would be really helpful if height were an explicit prop.

I've made it work by adding an id property to the MapContainer and giving that an explicit height style outside the react framework.

[artem-ara]

So, if you are having the problems described above, you need to:

1. Add: import 'leaflet/dist/leaflet.css'; to your react component
2. Add style={{ height: 536 }}. Noticed, that height: 'style={{ height: '536px' }}' doesn't work

[fabian-0520]

So, if you are having the problems described above, you need to:

1. Add: import 'leaflet/dist/leaflet.css'; to your react component
2. Add style={{ height: 536 }}. Noticed, that height: 'style={{ height: '536px' }}' doesn't work

Confirming that this workaround also works with the latest React and Leaflet versions. Thanks!

[fathah]

I tried these. But i am gettings a blank

 <div  className='border-2'
        style={{
            maxWidth: '50vw',
            height: 536
        }}>
              <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
    <TileLayer
      attribution=''
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <Marker position={position}>
      <Popup>
        A pretty CSS3 popup. <br /> Easily customizable.
      </Popup>
    </Marker>
  </MapContainer>
        </div>

[Gyvastis]

Import the css file and add this additionally

    .leaflet-container {
        height: 300px;
    }

[barbalex]

Seems to me this can be closed as adding height to .leaflet-container and importing leaflet/dist/leaflet.css solves the issue: https://codesandbox.io/s/react-leaflet-bug-forked-c7zf7s

[issam-seghir]

try this

import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
import "leaflet/dist/leaflet.css";

const ComponentResize = () => {
	const map = useMap();

	setTimeout(() => {
		map.invalidateSize();
	}, 0);

	return null;
};


const Map = () => {
	const position = [36.0339, 1.6596];

	return (
		<MapContainer
			style={{
				height: "100%",
				width: "100%",
			}}
			center={position}
			attributionControl={true}
			zoom={8}
			minZoom={3}
			scrollWheelZoom={true}
		>
			<ComponentResize />
			<TileLayer
				// className={'ion-hide'}
				attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
			/>
			<Marker position={position}>
				<Popup>
					A pretty CSS3 popup. <br /> Easily customizable.
				</Popup>
			</Marker>
		</MapContainer>
	);
};

export default Map;

[oldtune]

So, if you are having the problems described above, you need to:

1. Add: `import 'leaflet/dist/leaflet.css';` to your react component

2. Add `style={{ height: 536 }}`.  Noticed, that height: 'style={{ height: '536**px**' }}' **doesn't work**

This worked for me, the tile was broken but adding the fixed height fixed the problem. The height is up to you and doesn't have to be a fixed 536

[abid365]

I just made the height of the mapcontainer 100%, any height given will display the map, and don't forget to use to CSS provided by leaflet mentioned above

      className="h-[100%]"
      center={[51.505, -0.09]}
      zoom={13}
      scrollWheelZoom={true}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>```

[ImLunaHey]

Fully working example for nextjs.

'use client';
import { LatLngExpression } from 'leaflet';
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

type MapProps = {
  position: LatLngExpression;
};

export default function Map({ position }: MapProps) {
  return (
    // Height or width must be set for the map to display
    <div className="w-full">
      <MapContainer center={position} zoom={13} scrollWheelZoom={false} className="h-full">
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    </div>
  );
}

To avoid the error of window missing use dynamic import.

const Map = dynamic(() => import('@/components/map'), {
  ssr: false,
  loading: () => <p>Loading...</p>,
});

[ZeynalliZeynal]

I dont know why but it is very annoying problem. i have the same issue and i ensure you that there is nothing left that i can try to solve this problem. what i discovered and end up with is that it does work only if you set up with create-react-app, it doesnt when you set up with vite. so i dont know how to solve this for vite, maybe in the vite.config.js file.

import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

export default function ContactLocation() {

  return (
    <section>
      <div className="container max-w-full">
        <MapContainer
          center={[-3.745, -38.523]}
          zoom={13}
          scrollWheelZoom={false}
          className="h-full"
        >
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <Marker position={[-3.745, -38.523]}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </MapContainer>
      </div>
    </section>
  );
}

[ZeynalliZeynal]

I dont know why but it is very annoying problem. i have the same issue and i ensure you that there is nothing left that i can try to solve this problem.

import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

export default function ContactLocation() {

  return (
    <section>
      <div className="container max-w-full">
        <MapContainer
          center={[-3.745, -38.523]}
          zoom={13}
          scrollWheelZoom={false}
          className="h-full"
        >
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <Marker position={[-3.745, -38.523]}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </MapContainer>
      </div>
    </section>
  );
}

when i dont import css it looks like this

[atefBB]

So, if you are having the problems described above, you need to:

1. Add: import 'leaflet/dist/leaflet.css'; to your react component
2. Add style={{ height: 536 }}. Noticed, that height: 'style={{ height: '536px' }}' doesn't work

Under the hood, react add px suffix to any props that should be considered as something that can be calculated in pixels such as height, margin, width ..., hope to be clear.

[guilhermefrag]

Try to add those lines of code:

.leaflet-container {
    height: 500px;
    width: 100%;
}

To the file that contains:

@tailwind base;
@tailwind components;
@tailwind utilities;