I plan to map out the donated bricks surrounding the seal.
The map will be interactive on click. If a user clicks on a brick it will highlight the brick clicked and create a small pop up that shows who donated that specific brick. Users can close out of the pop up and the brick will stay highlighted until they click another brick.
They will be a search bar that allows users to search their name to find their brick. The search bar will draw data from a file with all of the names of donors and provide an autofill for the bricks.
I want users to be able to zoom in and out of the map so they can explore the map and use it to orient themselves.
I was planning to use an image map for the interactive map but then I realized I couldn't use the zoom feature if I did this so instead I plan to place an svg of my map in the background and place invisible divs on top of the image.
For the search bar I still need to do more research to find a good library to help me create the search bar or find a tutorial to create the search bar.
For the zoom in and out feature I need to play around with how to best code this. I also want to learn how to use the drag feature so that once the user zooms they can move the map like on google maps.
I think most of the things I want to do with the project I already have the skills to make a basic version of those interactions. If I have time I can maybe do something more advanced but if not I will stick to the simple version. I think the thing I am the most worried about is the search bar. However, if the search bar ends up being out of my skill set I have the idea of adding a separate page where there is a list of names alphabetically that users can search for their name the old fashioned way.