ThomasThiebaud ThomasThiebaud - 1 month ago 21
React JSX Question

react-leaflet map not correctly displayed

I'm trying to use

react-leaflet
to display a map. I use the code from this fiddle which is working, but on my computer I have this output

enter image description here

Here is my code :

DeviceMap.js

import React from 'react'
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

export class DeviceMap 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} scrollWheelZoom={false}>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
<Marker position={position}>
<Popup>
<span>A pretty CSS3 popup. <br/> Easily customizable.</span>
</Popup>
</Marker>
</Map>
);
}
}

export default DeviceMap


DeviceTabs.js

export class DeviceTabs extends React.Component {
state = {
index: 0
};

handleTabChange = (index) => {
this.setState({ index })
};

render () {
return (
<Tabs index={this.state.index} onChange={this.handleTabChange}>
<Tab label='Values'>
<DeviceTable {...this.props} />
</Tab>
<Tab label='Map'>
<div className={style.leaflet}>
<DeviceMap />
</div>
</Tab>
</Tabs>
)
}
}


style.scss

.leaflet {
height: 300px;
width: 100%;
}


There is no error in the console, and I have no more idea where to search. Since the fiddle is working it is not a bug. Did I miss something ?

Answer

Looks like you haven't loaded in the Leaflet stylesheet.

From the react-leaflet github guide:

If you are not familiar with Leaflet, make sure you read its quick start guide before using this library. You will notably need to add its CSS to your page to render the map properly, and set the height of the container.

http://leafletjs.com/examples/quick-start/

Here is what you'll need:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
Comments