Yaohan_Xu_Yellowstone_National_Park

[YaohanXu]

This project is a dashboard designed for visitors to Yellowstone National Park.

It not only provides basic information about the location, name, type, subcategory, and estimated travel time of each POI, but it also allows visitors to select their preferred POIs and plan their trips.

The interactive logic is as follows:

For the POI list, users can filter the POI list based on three criteria:

• Type of the POI
• Search method (either by the POI's name or subcategory)
• Search input

For selected POIs, users can select or deselect their preferred POIs in two ways:

• By clicking the button in the POI list
• By clicking the POI point on the map

For the daily trip schedule chart, it roughly shows the total estimated travel time based on the user's selected POIs (see the “pois_chart.js” file for more details).
The chart is updated whenever a user selects or deselects a POI.
Users can also reset the selected POI list or save the schedule chart as an image using the buttons below.

[mjumbewu]

Hey @YaohanXu, this is pretty great. Some things I notice in particular:

Overall responsiveness -- The general interactive aspects of the project work very well. I like how you even attend to the details, like if I enter a search term and then toggle back and forth between "By POI Name" and "By Subcategory", the POI list gets filtered appropriately.

Saving the canvas -- I think it's a pretty clever idea to allow the user to save an image of their itinerary.

The map -- I think you chose good colors that work well together, and the light base tiles are a good choice too. Because on slightly narrower screens, or windows that aren't entirely maximized, the poi-type buttons will overlap the map data, I might recommend calculating the width of the poi-type buttons and using the that width as the right-side padding when resetting the map view.

You'd have to find some way to communicate the width to the map component, but really that might be a case where reaching across the component boundary would be fine. So maybe these lines could become something like:

...

    const padding = mapWidth * 0.05;
    const rightPadding = document.querySelector('#poi-type').clientWidth;
    const panDistance = mapWidth * 0.08;

    if (boundaryLayer && boundaryLayer.getBounds().isValid()) {
      map.fitBounds(boundaryLayer.getBounds(), {
        paddingTopLeft: [padding, padding],
        paddingBottomRight: [rightPadding, padding],
        // animate: false,
      });

...

Though there are certainly cleaner ways to get the padding size without having to violate the component's boundaries like that.

Layout on small screens -- I was surprised that the general layout didn't look too bad on mobile screens, even without the use of any @media queries in your CSS.

The map isn't visible on mobile, but that's not necessarily a bad thing. There are certainly some things that could be tweaked on a small screen, e.g.:

• The map reset button remains visible even though the map is not. You could solve that by either using media queries, or by making the reset button a Leaflet Control (like the zoom buttons).
• The title text wraps and gets cut off. This could also be fixed with media queries, particularly by something like using vw units for the size of the title text on small screens, where "small screens" is something like less than 768px. Chrome (and I think Firefox) give suggestions for common screen size breakpoints in its device emulator.
  

Commits -- I like that you're committing in small chunks and you have frequent commits, but note that git is already going to record the time that you make a commit, so you could add more retrospectively helpful content into your messages.