Add interactive map for building locations #532
Conversation
|
Accidentally leaked my Google API key lol. I deleted it and made a new one. Using client .env for the key as VITE_GOOGLE_API_KEY |
is it safe to leak google api key on the client? any client environment variables are automatically public |
You have a point. How do we get around this? |
Apparently it's fine to expose it to the client, as long as you setup restrictions on the allowed referers for requests (https://developers.google.com/maps/documentation/javascript/get-api-key) Regarding the UX of this feature, I think it would be better if you could just click on the building in the schedule and have it the map pop up in a dialog/modal, since the schedule can have sections in completely different buildings. |
terror
changed the title
|
Hey Winkel, I think we want to go toward making this a modal popup when a location is clicked on the schedule. I made a patch with some rough changes this should follow |
I applied your patch file, just changed the defaultCenter to be set to the coordinate of the selected building instead of the placeholder it was. Is there anything else to be done for this issue? |
|
Can you add a close button on the popup dialog? (just like an X) I just noticed that on mobile you have to touch the corner of your phone to reach outside of the dialog to close it and its a bit of a pain |
| @@ -72,6 +72,9 @@ export const sortSchedulesByBlocks = (schedules: Schedule[]) => { | |||
|
|
|||
| export const getUrl = (): string => import.meta.env.VITE_API_URL ?? ''; | |||
|
|
|||
| export const getGoogleAPIKey = (): string => | |||
| import.meta.env.VITE_GOOGLE_API_KEY ?? ''; | |||
There was a problem hiding this comment.
can you add this in the .env.example as well?
Here's a draft of how I envisioned the building location to look like. Only the UI has been implemented. Next step would be to implement the logic for determining the buildings for a given course.