React-leaflet: map rendering issue
Hi Paul,
I'm trying to use leaflet with https://github.com/davezuko/react-redux-starter-kit but the map is not rendering correctly for me. I'm running node 5.2.0 and my leaflet component looks like this:
import React from 'react'
import { Map, Marker, Popup, TileLayer } from 'react-leaflet'
class MyMap 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'
attribution='© <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>
)
}
}
export default MyMap
dmcd
All 21 comments
Your container div needs and absolute height and width and you need to make sure you include leaflet CSS file. Can you confirm you are doing these steps?
I use this lib in my React app and had the same issue as you before I did this.
angusmack
on 15 Dec 2015
Thanks Angus,
My styling wasn't being applied. I've managed to make it work by applying the styling inside index.html like below but I'm not sure why my styling to the react component wasn't being applied (I'm fairly new to this stuff).
<!doctype html>
<html lang="en">
<head>
<title>React Redux Starter Kit</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<style>
h1, h2, p {
text-align: center;
}
.leaflet-container {
height: 400px;
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html>
Sorry for posting on this, but didn't want to open a new topic.
I'm also having this weird rendering issue (I've a bunch of different things: different tiles, setting height, removing everything but the map).
Demo is viewable here.
Code is viewable here.
I've seen the size rendering issue before, but this doesn't seem to be it because I've tried invalidating size as well as setting size directly on #map1.
It was working before too which is the weirdest thing, also the points on the map are in the correct places.
It broke after I added the playing video and won't work anymore even after removing it and it's npm package.
jordangarside
on 17 Dec 2015
Turns out my issue was due to having styling on generic img tags.
jordangarside
on 23 Dec 2015
To whom it may concern: adding the .leaflet-container css is super important. Spent several hours trying to make it work without that - I failed.
warrenronsiek
on 13 Sep 2016
Can we add this to the "Getting Started" Documentation? I almost gave up on Leaflet until I found this thread.
ekatzenstein
on 19 Jan 2017
can we pass through a style={{ height: 200 }} to the <Map> component?
zeroasterisk
on 25 Feb 2017
To those having trouble getting the styles to display correctly, try adding:
<link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css' rel='stylesheet'>
to your index.html file.
If you're using webpack and have a file-loader present, you can instead load the css into a component with import 'leaflet/dist/leaflet.css'
duhaime
on 27 Mar 2017
@duhaime
you save my day! with:
import 'leaflet/dist/leaflet.css'
iofirag
on 27 Apr 2017
@angusmack - thank you very much. this was exactly what I needed
a2f0
on 14 Oct 2017
Hi
I am having the same problem and can not be fixed while adding style to it??
does any one know another way of how i can fix that ??
zhen1991
on 19 Mar 2018
I am using GoogleMutant to load Google Map using React-Leaflet. I have set the height and width and have even added the required styles, however, the map only gets rendered when I resize the browser window. Please help!
aemdeei
on 4 Apr 2018
HI!
sorry i dont have any idea how to fix it in React but i hade fix my issue i use polymer 2 by adding style tag inside dem model :)
zhen1991
on 4 Apr 2018
Thank you for pointing to the CSS file! Was going crazy trying to figure out why the tiles were hectic.
Now have a working react Map component. Heres the code for anyone struggling.
import React from "react";
import L from "leaflet";
import Leaflet from 'leaflet/dist/leaflet.css'
const style = {
width: "100%",
height: "300px"
};
class Map extends React.Component {
componentDidMount() {
// create map
this.map = L.map("map", {
center: [40.7610, -111.8829],
zoom: 13,
layers: [
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution:
'© OpenStreetMap contributors'
})
]
});
}
render() {
return
}
}
export default Map;
Jcummings81
on 30 Sep 2018
Also, don't forget to set up style prop with the height and width of your Map component:
Full working example:
import { Map, TileLayer } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
const MyMap = () => (
<Map
style={{ width: '100%', height: '600px' }}
>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
/>
</Map>
)
semanser
on 6 Nov 2018
Yes! This is key, adding a style element for width and height directly on the
So:
- Make sure you import the style sheet: import "leaflet/dist/leaflet.css";
- Add width and height on at least the
Hope that helps!
-BWD.
bwd72
on 18 Nov 2018
To those having trouble getting the styles to display correctly, try adding:
<link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css' rel='stylesheet'>
to your index.html file.If you're using webpack and have a file-loader present, you can instead load the css into a component with
import 'leaflet/dist/leaflet.css'
This still doesn't solve my problem with the tiles. Still getting a messed up container with a messed up map even setting the style AND importing the style from leaflet.
I'm using webpack 4.30.0 and leaflet 1.4.0
brunoclima
on 24 Apr 2019
@brunoclima In what way is the map messed up? Is it not displaying at all, or tiles are misaligned, or something else?
bendman
on 6 May 2019
If you want to avoid inline style you can made it like this:
import React from "react";
import styled from "@emotion/styled";
import { Map, TileLayer } from "react-leaflet";
const MapContainer = styled(Map)`
width: 100%;
height: 400px;
`;
export default function ContactMap() {
return (
<MapContainer center={[49.50509, 8.49734]} zoom={13}>
<TileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
</MapContainer>
);
}
leonp5
on 27 Jan 2020
THANK YOU @semanser
SAVED MY DAY
DanielSoaresRocha
on 16 Jun 2020
<Map style={{ width: '100%', height: '600px' }} >
Except that Map is not exported from react-leaflet.
wedgemartin
on 21 Jan 2021
Related issues
acpower7
路
4Comments
lambdakris
路
3Comments
Shadowman4205
路
4Comments
aemdeei
路
3Comments
farahabdi
路
3Comments
Most helpful comment
To those having trouble getting the styles to display correctly, try adding:
<link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css' rel='stylesheet'>to your index.html file.
If you're using webpack and have a file-loader present, you can instead load the css into a component with
import 'leaflet/dist/leaflet.css'