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"