The react-leaflet
map does not get rendered properly.
The problem occurs when using the map with standard react
components.
My site also uses react-bootstrap
. As I have read this may cause some potential problems to how react-leaflet
gets rendered.
import React from 'react';
import ReactDOM from 'react-dom';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
const position = [37.335556, -122.009167];
class MapView extends React.Component {
render() {
return (
<div
style={{
height:"100%"
}}>
<Map center={position} zoom={13}>
<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>
</div>
);
}
}
module.exports = MapView;
first at all, install via console:
> npm install leaflet
> npm install react-leaflet
in the index.js import a css wich is living in node_modules
//src/index.js
import 'leaflet/dist/leaflet.css'
so, now just put a margin and height:
////src/App.js
return (
<MapContainer center={position} zoom={3} scrollWheelZoom={false}
style={{ height:"`enter code here`400px",backgroundColor:"red",marginTop:"80px", marginBottom:'90px'
}} >
</MapContainer>
)
or
return (
<>
<Map style={{ width: "100%", height: "100vh" }} center={center} zoom={13}>
</Map>
</> )
Also add these Leaflet's CSS and JS files into your project
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
Also add height to the map. it is mandatory.
Simple JsFiddle P.S. look into external resources.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With