diff --git a/package-lock.json b/package-lock.json index 49db765..51b38d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,7 @@ "html-webpack-plugin": "^5.5.0", "jest": "^27.4.3", "jest-watch-typeahead": "^1.0.0", - "leaflet": "^1.8.0", + "leaflet": "^1.9.3", "mini-css-extract-plugin": "^2.4.5", "postcss": "^8.4.4", "postcss-flexbugs-fixes": "^5.0.2", diff --git a/package.json b/package.json index 02410c4..4608225 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "html-webpack-plugin": "^5.5.0", "jest": "^27.4.3", "jest-watch-typeahead": "^1.0.0", - "leaflet": "^1.8.0", + "leaflet": "^1.9.3", "mini-css-extract-plugin": "^2.4.5", "postcss": "^8.4.4", "postcss-flexbugs-fixes": "^5.0.2", diff --git a/public/css/main.css b/public/css/main.css index 43036ae..753ee05 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -136,3 +136,8 @@ ol { background-position: 0 0; background-size: 65px 20px; } + +#mapbox-legend { + background-color: white; + padding: 1em; +} diff --git a/src/Map.js b/src/Map.js index 5b5ade4..a45dc83 100644 --- a/src/Map.js +++ b/src/Map.js @@ -3,8 +3,8 @@ import "leaflet/dist/leaflet.css"; import {MapContainer, TileLayer} from "react-leaflet"; import {LayerGroup} from "react-leaflet/LayerGroup"; import {useMap} from "react-leaflet/hooks"; - -import TournamentMarker from 'components/TournamentMarker' +import L from "leaflet"; +import TournamentMarker from 'components/TournamentMarker'; const DEFAULT_ZOOM_LEVEL = 10; const LOCATION_CACHE_KEY = "userLatLng"; @@ -55,6 +55,7 @@ const getLocation = () => { const Map = () => { const [tourneyData, setTourneyData] = useState([]); + const [tourneyMetadata, setTourneyMetadata] = useState({}); const [mapCenter, setMapCenter] = useState(FALLBACK_INITIAL_LOCATION); const [locationLoading, setLocationLoading] = useState(true); @@ -76,7 +77,10 @@ const Map = () => { return await response.json() } - fetchTournamentData().then((tourneyData) => { setTourneyData(tourneyData.tournament_data) }) + fetchTournamentData().then((tourneyData) => { + setTourneyData(tourneyData.tournament_data) + setTourneyMetadata(tourneyData.metadata) + }) }, []); return <> @@ -87,6 +91,7 @@ const Map = () => {
>}