Я пытаюсь использовать react-leaflet для отображения карты. Я использую код из этой скрипки, который работает, но на моем компьютере у меня есть этот вывод
Вот мой код:
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='© <a href="#" onclick="location.href='http://osm.org/copyright'; return false;">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%;
}
В консоли нет ошибок, и я не знаю, где искать. Так как скрипка работает, это не ошибка. Я что-то пропустил?