diff --git a/package.json b/package.json
index 77b5394..8d1d440 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/bootstrap": "^5.0.12",
+ "@types/leaflet": "^1.7.0",
"@types/node": "^14.14.37",
"@types/react": "^17.0.3",
"@types/react-router-dom": "^5.1.7",
@@ -21,6 +22,7 @@
"react": "^17.0.2",
"react-bootstrap": "^1.5.2",
"react-dom": "^17.0.2",
+ "react-leaflet": "^3.1.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"typescript": "^4.2.4",
diff --git a/src/components/PoolMap.tsx b/src/components/PoolMap.tsx
index db1a236..a4ec61b 100644
--- a/src/components/PoolMap.tsx
+++ b/src/components/PoolMap.tsx
@@ -1,5 +1,4 @@
-import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
-import { GOOGLE_MAPS_API_KEY } from '../api/google';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
const center = {
lat: 0,
@@ -13,15 +12,16 @@ const position = {
export default function PoolMap() {
return (
-
- console.log('Loaded Base Map')}
- onTilesLoaded={() => console.log('Loaded Tile Map')}
- >
-
-
-
+
+
+
+
+ A pretty CSS3 popup.
Easily customizable.
+
+
+
);
}
diff --git a/yarn.lock b/yarn.lock
index c7a01c4..10c8ea0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1522,6 +1522,11 @@
resolved "https://registry.yarnpkg.com/@react-google-maps/marker-clusterer/-/marker-clusterer-2.1.1.tgz#fa6cdcbbfee6a529a4d60b1575168a7aa1fedf91"
integrity sha512-LIqf1T2dVXRaf/gqk/7kEDpRvr1aQGlqOv/p5zwZus3qI6/3qK4jxNpc89gQ2WkCMrGwcI/fTQrnI55BZCxsLA==
+"@react-leaflet/core@^1.0.2":
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-1.0.2.tgz#39c6a73f61c666d5dcf673741cea2672fa4bbae1"
+ integrity sha512-QbleYZTMcgujAEyWGki8Lx6cXQqWkNtQlqf5c7NImlIp8bKW66bFpez/6EVatW7+p9WKBOEOVci/9W7WW70EZg==
+
"@restart/context@^2.1.4":
version "2.1.4"
resolved "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz"
@@ -1805,6 +1810,11 @@
resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz"
integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
+"@types/geojson@*":
+ version "7946.0.7"
+ resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.7.tgz#c8fa532b60a0042219cdf173ca21a975ef0666ad"
+ integrity sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==
+
"@types/glob@^7.1.1":
version "7.1.3"
resolved "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz"
@@ -1879,6 +1889,13 @@
resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
+"@types/leaflet@^1.7.0":
+ version "1.7.0"
+ resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.7.0.tgz#3700fb5d29a8214fbd496565b08ec28e40cee808"
+ integrity sha512-ltv5jR+VjKSMtoDkxH61Rsbo0zLU7iqyOXpVPkAX4F+79fg2eymC7t0msWsfNaEZO1FGTIQATCCCQe+ijWoicg==
+ dependencies:
+ "@types/geojson" "*"
+
"@types/minimatch@*":
version "3.0.3"
resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz"
@@ -9338,6 +9355,13 @@ react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz"
integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+react-leaflet@^3.1.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-3.1.0.tgz#42deb5e454518016eff8bc85511ae58812f910f5"
+ integrity sha512-kdZS8NYbYFPmkQr7zSDR2gkKGFeWvkxqoqcmZEckzHL4d5c85dJ2gbbqhaPDpmWWgaRw9O29uA/77qpKmK4mTQ==
+ dependencies:
+ "@react-leaflet/core" "^1.0.2"
+
react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"