Basic leaflet example shamelessly stolen from various places on the web.

src/App.tsx

@@ -19,11 +19,30 @@ import '@ionic/react/css/display.css';
 /* Theme variables */
 import './theme/variables.css';
 
+/* Leaflet */
+import './theme/leaflet.css';
+
+/* Other imports */
+
+import {MapContainer, TileLayer, Marker, Popup} from 'react-leaflet' ;
+
 setupIonicReact();
 
+const position: [number, number]  = [51.505, -0.09];
+
 const App: React.FC = () => (
   <IonApp>
-    <h2>Hello ! </h2>
+    <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
+        <TileLayer
+          attribution='{"&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors"}'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <Marker position={position}>
+          <Popup>
+            A pretty CSS3 popup. <br /> Easily customizable.
+          </Popup>
+        </Marker>
+      </MapContainer>
   </IonApp>
 );
 

src/theme/leaflet.css

@@ -0,0 +1,4 @@
+.leaflet-container {
+  width: 100%;
+  height: 100vh;
+}