Add in a legend component with last updated metadata#56
Add in a legend component with last updated metadata#56ajistrying wants to merge 4 commits intoperrycate:mainfrom
Conversation
|
Will take a closer look at this soon, probably tomorrow. Thanks! |
| const Legend = ({metadata}) => { | ||
| const map = useMap() | ||
| useEffect(() => { | ||
| if (map && metadata.updated_at) { |
There was a problem hiding this comment.
We want to make sure something is actually inside of the metadata object before we go through with adding the legend to the map, otherwise it'll populate prematurely without waiting for the actual data.
perrycate
left a comment
perrycate
left a comment
There was a problem hiding this comment.
I'm hesitant to add something as a "legend" when it's not a real map legend per se - this feels like a bit of a hack. Rather than using built-in leaflet stuff to modify the map itself, what about some sort of overlay? I'm hardly an expert but this feels like something with display property and/or Z-index might be helpful here. Failing that, I think I would prefer to just add an element to the text area than messing with the map, since I suspect that will be simpler to implement. Let me know if you wanna talk more about options!
|
|
||
| #mapbox-legend { | ||
| background-color: white; | ||
| padding: 1em; |
There was a problem hiding this comment.
Let's shrink the padding so this takes up less space - maybe something similar to whatever the padding is for the attribution in the other corner?
| legend.onAdd = () => { | ||
| const div = L.DomUtil.create("div"); | ||
| div.id = "mapbox-legend" | ||
| div.innerHTML = `<h4>Last Updated: ${new Date(metadata.updated_at * 1000).toLocaleString()}</h4>`; |
There was a problem hiding this comment.
Having to manually manipulate innerHTML feels a little suspicious to me. I suspect there may be a better way to do this with the react-leaflet library, but moreso I bet there's a way we can accomplish this without needing to do that, either.
In general one should probably not need to touch innerHTML or similar things inside a react project.
|
I know it's been a couple weeks while you focused on that other PR - feel free to ping me if you have any questions or wanna chat more about this! |
|
Will take a look back at this later today, it's been a busy past few days! |
2 participants
Aims to finish up #36
Couple things:
map, metadata.updated_atto the dependency array of the useEffect call for the legend component in order to make sure the data was there to render. If there's a better way to write that useEffect call lmk. I'm meh at react, so if I did anything ridiculous I'm down for any and all improvements lol. I'd like to get better at react too 👍