[Sprint 5c]: Edit School Location 📍 - Jack & Hansini

[danglorioso]

💻 Summary

For this sprint, you’ll build a component that will allow users to modify the longitude and latitude coordinates of an existing school by placing a pin on a map. Also, each school profile page should show a small view of a map with a point on the school’s location.

Goals of this sprint:

• Create a reusable map component that allows users to drop a pin and update a selected school’s longitude and latitude in the schools table of our database.
• Add a map component to the school profile page that dynamically displays the location of a school with an option to edit its location.

⚙️ Setup

Before starting:

1. PLEASE: **Pull the latest changes from main: git pull
2. Create a new branch for this sprint.
3. Install dependencies.
4. Run the dev server and verify the site builds.
5. Confirm everything runs.
   If you experience problems, check your .env is up to date!

🧭 Implementation

Step 1: Retrieve a school’s longitude and latitude

• Familiarize yourself with the schools table of the database: Each entry in the schools table is a school that has once participated in MHD. Upon upload, each school is matched with its corresponding longitude and latitude coordinate pairs.
• Create a component that first retrieves the longitude and latitude for a school and then plots a dot at that location on a map. For our project, we are using mapcn as our mapping system, which is built on MapLibre maps. Look at the heat map page for details on how to implement a similar component. Your component should take in an identifier for the school as a parameter so that you can easily reuse your component for every school.
• Adjust the map window so that it is zoomed in/out enough for it to be useful.

Step 2: Add map to school profile page

• Look at the school profile page. Each page is dynamically generated for each of the schools and populated with that school’s specific data. Add a component box onto the page with your map component for that given school.
• Ensure that the map window is responsive to the page size and allows the user to interact with it by zooming in and out, exclusively.
• Test that the map accurately positions the school dot according to the long/lat stored in the database and that the map is properly displayed across multiple schools.
• Users should not be able to move around the map too much as this is just a quick reference for the school’s location and isn’t meant to be interacted with.

Step 3: Edit a school’s location

• Within your map component from above, add an edit button that allows users to modify the location of the school and update its entry in the database.
• Since your map component on the school profile page is a smaller map, clicking the edit button should open a pop-up that displays a wider, full-screen view of a map that will make it easier for users to navigate and pin-point a location. Allow users to zoom in and out and drag across the map. You should show the previous location of the school dot in some way as well as allow the user to click on the map to drop a pin for the new location.
• The popup should have a “Cancel” button along the bottom and a “Save” button that is only active when a new location pin has been dropped.
• Add some brief instructions to inform the user of how to select the new location. Add a title that tells the user which school they are modifying.
• Ideally, we would love to have a search bar on the map to help users get closer to the location they are trying to find. Look into these plugins from MapLibre that search a map.
• When the save button is clicked, the long/lat coordinates of the newly dropped pin should be retrieved and then sent to update that school’s location in the database.
• Display a confirmation toast when the process is successfully completed.

Step 4: Create an editable map component in the Settings page

• The last part of this sprint requires you to create another map component in the settings page. On a high level, this map will allow you to change the location of any school in the database. This means that it will be a similar component to step 3, but with distinct differences.
• Since this map is on the settings page, it does not pertain to any single school. Thus, there should be a dropdown that allows users to search for and select which school’s location they would like to edit (which will require you to fetch the schools from the database). Once a user clicks on the school they would like to edit, then the map should re-center on the school's location.
• There should be an edit button that appears when a school is selected (and only when a school is selected) that, when clicked, allows users to zoom in and drag the map around. When the user clicks on the map when in edit mode, the school’s pin should change to the clicked location. The resulting coordinates of the click should then be written to the database table schools, overwriting the previous coordinates.
• Keep in mind that, once a school is selected on the map, it is much easier to keep track of their ID rather than their name. You will have to display their name to clients, but the corresponding entry in the database can be identified by its ID for simplicity (e.g. some schools have evry similar names).

🙌 Acceptance Criteria

• UI matches Figma exactly
• Code runs locally without errors and builds successfully
• Two map components: one for school profile pages and one for settings page
• School locations are accurately displayed for every school on their school profile page
• Error handling/messages for unsuccessful database update
• Sleek editing flows for the map components that make changes to a school’s location easy to perform and understand.
• Merge via PR

⁉️ Questions

If you get stuck or have questions:

• DM Dan or Shayne on Slack
• Come to office hours or ask during a hack night
• Ask questions during team meetings – we’re here to help!

📝 Resources

• Figma:
• Tailwind CSS
• shadcn/ui
• npm package manager
• mapcn