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

package-lock.json

@@ -22,11 +22,14 @@
         "@types/node": "^12.19.15",
         "@types/react": "^18.0.18",
         "@types/react-dom": "^18.0.6",
+        "@types/react-leaflet": "^2.8.2",
         "@types/react-router": "^5.1.11",
         "@types/react-router-dom": "^5.1.7",
         "ionicons": "^6.0.3",
+        "leaflet": "^1.8.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-leaflet": "^4.0.2",
         "react-router": "^6.3.0",
         "react-router-dom": "^6.3.0",
         "react-scripts": "^5.0.0",
@@ -3088,6 +3091,16 @@
         }
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.0.1.tgz",
+      "integrity": "sha512-XGmx01DovDt0IWsW4tqeuSYifpY19aUn9NYCqTBI3KNtjbCjj0pfiWa7krNsnJ6l2oQbv4Nt0/BabLbIvT4ocA==",
+      "peerDependencies": {
+        "leaflet": "^1.8.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3713,6 +3726,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.10",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA=="
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -3816,6 +3834,14 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.11.tgz",
+      "integrity": "sha512-VwAYom2pfIAf/pLj1VR5aLltd4tOtHyvfaJlNYCoejzP2nu52PrMi1ehsLRMUS+bgafmIIKBV1cMfKeS+uJ0Vg==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -3874,6 +3900,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-leaflet": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@types/react-leaflet/-/react-leaflet-2.8.2.tgz",
+      "integrity": "sha512-Iel8Vd1bSCD38Yhiqcmm/+9hjPEdd39LFE3tBMbOytq3QAQsC3LDrbo6ifoh8JbpqPbCsQPo9Wx5OELHixEShg==",
+      "dependencies": {
+        "@types/leaflet": "*",
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-router": {
       "version": "5.1.18",
       "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.18.tgz",
@@ -10249,6 +10284,11 @@
         "language-subtag-registry": "~0.3.2"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
+      "integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -12837,6 +12877,19 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-leaflet": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.0.2.tgz",
+      "integrity": "sha512-pDyIf50Ek/LZ0p4Qxw2D9LMOx+LytQs2R+MY3mhTUPGzubrpP4QAgbCv2qc0L9y0qVRgx7dHavWuPFkc/WCJCw==",
+      "dependencies": {
+        "@react-leaflet/core": "^2.0.1"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.8.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -17994,6 +18047,12 @@
         "source-map": "^0.7.3"
       }
     },
+    "@react-leaflet/core": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.0.1.tgz",
+      "integrity": "sha512-XGmx01DovDt0IWsW4tqeuSYifpY19aUn9NYCqTBI3KNtjbCjj0pfiWa7krNsnJ6l2oQbv4Nt0/BabLbIvT4ocA==",
+      "requires": {}
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -18449,6 +18508,11 @@
         "@types/node": "*"
       }
     },
+    "@types/geojson": {
+      "version": "7946.0.10",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA=="
+    },
     "@types/graceful-fs": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -18548,6 +18612,14 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "@types/leaflet": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.11.tgz",
+      "integrity": "sha512-VwAYom2pfIAf/pLj1VR5aLltd4tOtHyvfaJlNYCoejzP2nu52PrMi1ehsLRMUS+bgafmIIKBV1cMfKeS+uJ0Vg==",
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -18606,6 +18678,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-leaflet": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@types/react-leaflet/-/react-leaflet-2.8.2.tgz",
+      "integrity": "sha512-Iel8Vd1bSCD38Yhiqcmm/+9hjPEdd39LFE3tBMbOytq3QAQsC3LDrbo6ifoh8JbpqPbCsQPo9Wx5OELHixEShg==",
+      "requires": {
+        "@types/leaflet": "*",
+        "@types/react": "*"
+      }
+    },
     "@types/react-router": {
       "version": "5.1.18",
       "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.18.tgz",
@@ -23279,6 +23360,11 @@
         "language-subtag-registry": "~0.3.2"
       }
     },
+    "leaflet": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
+      "integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
+    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -24980,6 +25066,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-leaflet": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.0.2.tgz",
+      "integrity": "sha512-pDyIf50Ek/LZ0p4Qxw2D9LMOx+LytQs2R+MY3mhTUPGzubrpP4QAgbCv2qc0L9y0qVRgx7dHavWuPFkc/WCJCw==",
+      "requires": {
+        "@react-leaflet/core": "^2.0.1"
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",

package.json

@@ -18,11 +18,14 @@
     "@types/node": "^12.19.15",
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
+    "@types/react-leaflet": "^2.8.2",
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
     "ionicons": "^6.0.3",
+    "leaflet": "^1.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-leaflet": "^4.0.2",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.0",

public/index.html

@@ -22,6 +22,13 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content="Ionic App" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+    <!-- Leaflet -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+    <link
+            rel="stylesheet"
+            href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css"
+    />
   </head>
 
   <body>

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;
+}