feat(leaflet): https://stackoverflow.com/questions/40365440/react-leaflet-map-not-correctly-displayed

leaflet/app/components/map/map.jsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import { MapContainer, TileLayer, useMap, Marker, Popup } from 'react-leaflet'
+import { MapContainer, TileLayer } from 'react-leaflet'
+/*JS module import (vs cdn or style link)*/
+import 'leaflet/dist/leaflet.css'
+/*set up the height of .leaflet-container
+*/import '../../style.css';
 const Map = () => {
     return (
 	<>
@@ -9,11 +13,6 @@ const Map = () => {
 		    attribution='&copy; <a href="https://www.openstreetmap.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/app/style.css

@@ -1,3 +1,7 @@
 h1 { color: red; }
 h2 { color: green; }
 h3 { color: blue; }
+/*set up the height of*/
+.leaflet-container {
+  height: 50vh;
+}