From dc2865e752ae9251cc97194c6b224eb91cca52e0 Mon Sep 17 00:00:00 2001 From: Wellington Johnson Date: Wed, 15 Feb 2023 20:35:33 -0500 Subject: [PATCH 1/4] Add in a legend component with last updated metadata --- package-lock.json | 2 +- package.json | 2 +- public/css/main.css | 5 +++++ src/Map.js | 27 ++++++++++++++++++++++++++- src/index.js | 4 ++-- 5 files changed, 35 insertions(+), 5 deletions(-) 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..a026fb4 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..9f9e220 100644 --- a/src/Map.js +++ b/src/Map.js @@ -3,8 +3,10 @@ import "leaflet/dist/leaflet.css"; import {MapContainer, TileLayer} from "react-leaflet"; import {LayerGroup} from "react-leaflet/LayerGroup"; import {useMap} from "react-leaflet/hooks"; +import L from "leaflet"; import TournamentMarker from 'components/TournamentMarker' +// import Legend from "components/Legend"; const DEFAULT_ZOOM_LEVEL = 10; const LOCATION_CACHE_KEY = "userLatLng"; @@ -55,6 +57,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 +79,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 +93,7 @@ const Map = () => {
} + { return null; } +const Legend = ({metadata}) => { + const map = useMap() + useEffect(() => { + if (map && metadata.updated_at) { + const legend = new L.Control({ position: "bottomleft" }); + + legend.onAdd = () => { + const div = L.DomUtil.create("div", "mapbox-legend"); + div.innerHTML = `

Last Updated: ${new Date(metadata.updated_at * 1000).toLocaleString()}

`; + return div; + }; + + legend.addTo(map); + } + }, [map, metadata.updated_at]); + return null; + } + export default Map; diff --git a/src/index.js b/src/index.js index 8db5acb..72f646f 100644 --- a/src/index.js +++ b/src/index.js @@ -4,7 +4,7 @@ import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + // - + // ); From e35d3c01f843444eeeeb2efb3e2a79113f2b1b9a Mon Sep 17 00:00:00 2001 From: Wellington Johnson Date: Wed, 15 Feb 2023 20:43:39 -0500 Subject: [PATCH 2/4] remove commeting of strict mode --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 72f646f..8db5acb 100644 --- a/src/index.js +++ b/src/index.js @@ -4,7 +4,7 @@ import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - // + - // + ); From 61b99f173412388f7a721db4ee94b89f695dc6a9 Mon Sep 17 00:00:00 2001 From: Wellington Johnson Date: Wed, 15 Feb 2023 20:49:10 -0500 Subject: [PATCH 3/4] use id instead of class for legend element --- public/css/main.css | 2 +- src/Map.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/public/css/main.css b/public/css/main.css index a026fb4..753ee05 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -137,7 +137,7 @@ ol { background-size: 65px 20px; } -.mapbox-legend { +#mapbox-legend { background-color: white; padding: 1em; } diff --git a/src/Map.js b/src/Map.js index 9f9e220..0dc53a3 100644 --- a/src/Map.js +++ b/src/Map.js @@ -130,7 +130,8 @@ const Legend = ({metadata}) => { const legend = new L.Control({ position: "bottomleft" }); legend.onAdd = () => { - const div = L.DomUtil.create("div", "mapbox-legend"); + const div = L.DomUtil.create("div"); + div.id = "mapbox-legend" div.innerHTML = `

Last Updated: ${new Date(metadata.updated_at * 1000).toLocaleString()}

`; return div; }; From af813de561fa0ce52742d96de3ed2669c50e2341 Mon Sep 17 00:00:00 2001 From: Wellington Johnson Date: Fri, 17 Feb 2023 13:11:38 -0500 Subject: [PATCH 4/4] remove old comment --- src/Map.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Map.js b/src/Map.js index 0dc53a3..a45dc83 100644 --- a/src/Map.js +++ b/src/Map.js @@ -4,9 +4,7 @@ import {MapContainer, TileLayer} from "react-leaflet"; import {LayerGroup} from "react-leaflet/LayerGroup"; import {useMap} from "react-leaflet/hooks"; import L from "leaflet"; - -import TournamentMarker from 'components/TournamentMarker' -// import Legend from "components/Legend"; +import TournamentMarker from 'components/TournamentMarker'; const DEFAULT_ZOOM_LEVEL = 10; const LOCATION_CACHE_KEY = "userLatLng";