diff --git a/package-lock.json b/package-lock.json index 21b24ea..9c8670c 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index bf1a31b..0d15655 100644 --- a/package.json +++ b/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", diff --git a/public/index.html b/public/index.html index 25b753b..e5d555a 100644 --- a/public/index.html +++ b/public/index.html @@ -22,6 +22,13 @@ + + + + diff --git a/src/App.tsx b/src/App.tsx index e371538..ce379c8 100644 --- a/src/App.tsx +++ b/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 = () => ( -

Hello !

+ + + + + A pretty CSS3 popup.
Easily customizable. +
+
+
); diff --git a/src/theme/leaflet.css b/src/theme/leaflet.css new file mode 100644 index 0000000..468f57e --- /dev/null +++ b/src/theme/leaflet.css @@ -0,0 +1,4 @@ +.leaflet-container { + width: 100%; + height: 100vh; +} \ No newline at end of file