React leaflet not rendering properly

Also add these Leaflet's CSS and JS files into your project

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" /><script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>

Also add height to the map. it is mandatory.

Simple JsFiddleP.S. look into external resources.

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></> )

The main problem was that the CSS was not being imported and height for the Map component was not set.

I then fixed a problem with the missing Marker image by using react-leaflet-marker-layer

import React from 'react';import ReactDOM from 'react-dom';import { Map, Marker, Popup, TileLayer } from 'react-leaflet';import MarkerLayer from 'react-leaflet-marker-layer';const position = { lng: -122.673447, lat: 45.522558 };const markers = [  {    position: { lng: -122.67344700000, lat: 45.522558100000 },    text: 'Voodoo Doughnut',  },  {    position: { lng: -122.67814460000, lat: 45.5225512000000 },    text: 'Bailey\'s Taproom',  },  {    position: { lng: -122.67535700000002, lat: 45.5192743000000 },    text: 'Barista'  },  {    position: { lng: -122.65596570000001, lat: 45.5199148000001 },    text: 'Base Camp Brewing'  }];class ExampleMarkerComponent extends React.Component {  render() {    const style = {      border: 'solid 1px lightblue',      backgroundColor: '#333333',      borderRadius: '50%',      marginTop: '-5px',      marginLeft: '-5px',      width: '10px',      height: '10px'    };    return (      <div style={Object.assign({}, this.props.style, style)}></div>    );  }}class MapView extends React.Component {    render() {        return (                  <div                    style={{                        height:"700px"                    }}>                    <Map center={position} zoom={13}                        style={{                            height:"700px"                        }}>                        <TileLayer                          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'                          attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'                        />                        <MarkerLayer                            markers={markers}                            longitudeExtractor={m => m.position.lng}                            latitudeExtractor={m => m.position.lat}                            markerComponent={ExampleMarkerComponent} />                      </Map>                  </div>        );    }}module.exports = MapView;