ggetzie / mrg_site

Margolies Mapping site

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.tsx.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

mrg_site's Issues

Touch up the titles in the marker pop up

Make a few changes to improve the display of the list of titles in the pop up

1. Decrease the font size a little so the title fits in the box better
2. Add an index to the beginning of the title like (1 of n) where "n" is the total number of photos listed at that marker
3. Add some visual distinction like a border between the elements in the list
4. Add the year at the end of the title. This way people can quickly tell if the same location was photographed multiple times over different years.

Slider widget

Create a react component for a double-ended slider widget and replace the text boxes for the minimum year and maximum year with it. For example: https://frontendscript.com/javascript-dual-range-slider/

Popup window re-centers map

When clicking on a marker near the top edge of the map, the popup with the photo and information stays within the map box and forces the map to move in order to view the popup window. Change the popup so it does not move the map and floats outside the map area if necessary.

Filter the photos list by keywords

I added a new file called keywords.json in the data folder. This is an object mapping keywords extracted from the photo titles to an array of id numbers of the associated photos. For example we might have

{
...
"hotel(s)": [2017711183, 2017713731, 2017713732],
"motel": [2017710527, 2017710052, 2017705915]
...
}

Let's add a multiple select control to the filter form to allow the user to select one or more keywords and display only the photos matching those keywords on the map. Filter the photo list to only the entries where the id is present in at least one of the selected keyword arrays.

This should be additive to the year filter, so if the years are set to 1985 - 1990 and the keywords "hotel(s)" and "motel" are selected, only hotel and motel photos from between 1985 and 1990 are shown.

If the result of the filter is empty, add a message below the form reading "No photos match the given search criteria".

Map re-renders on when typing in year boxes

The input boxes to filter by year cause the map to re-render when they are changed, which makes them too slow. Defer the changes until the "Filter" button is clicked.