0

I have the basic example from React-leaflet, but for the life of me I cannot get anything to display. I am using this fix from Jeremy Monson for the common babel-loader issue. I was having the same problems of no display when I went through the manual fixes. Right now I am using styled-components, but I was having the same issue with regular CSS. My map component page looks like this.

import React from 'react'
import styled from '@emotion/styled'
import { MapContainer, TileLayer, Marker, Popup } from '@monsonjeremy/react-leaflet'

const Leaflet = styled.div`
height:500px;
width:500px;
`

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

  
 )
}

export default Map

I am loading the leaflet css in the of head my index.html page. I am importing my map component in App.js and rendering it there. Any thoughts or pointing in the right direction would be much appreciated.

Emerson
  • 21
  • 2

1 Answers1

2

Add height to your map container using style prop:

<MapContainer 
  center={[51.505, -0.09]} 
  zoom={13} 
  scrollWheelZoom={false}
  style={{height: '100%'}} // Add a height
>
...
teddybeard
  • 1,964
  • 1
  • 12
  • 14