React-leaflet: Map is Broken

[cristiandley]

Packages

"leaflet": "^0.7.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-leaflet": "^0.12.3",

My map is loading broken... some sector overlay with others and not fully loading

i set up a simple example to start using this package...

  render(){

      const position = [-38.9518476,-68.0588852];
      return (
        <Map center={position} zoom={13}>
          <TileLayer
            url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          />
          <Marker position={position}>
            <Popup>
              <span>A pretty CSS3 popup.<br/>Easily customizable.</span>
            </Popup>
          </Marker>
        </Map>
      );

  }

[jgimbel]

What version of leaflet.css do you have?

[PaulLeCam]

Please follow the issue template and make sure all the boxes are checked before posting an issue.

[kylepolich]

Was there a resolution to this? We're struggling with the same problem.

[IanChen83]

You should add a stylesheet link to your html like
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css">

[Hocoh]

To continue the answer of IanChen83, if you are using a layout, try to implement the link in the layout's wrapper -on any wrapper you are using.