Hangzhou Through the Years - Haoyu Zhu

[haoyu25]

This story map shows the urban growth and green space development in Hangzhou, China, from 1990 to 2020. It highlights key parks and urban areas over time, showing how the city integrates natural spaces with urban expansion. The map is designed for both Hangzhou residents and urban planners interested in urban development and green space planning.

[mjumbewu]

suggestion: The images you've included in the popups look so nice -- I'd say make them a little bigger. By default, Leaflet will match the width of your popup to the width needed by the content contained in it. Since you set the width of your images to 100%, you're instructing the browser to first calculate with the width of the container (the popup) should be, and then set the width of the image, so the image itself has no say over the width of the popup. If you add a min-width to this rule, you're instructing the browser to:

1. Calculate with the width of the container (the popup) should be without considering the image, because of the width: 100%
2. If that width is more than 300px (because of the min-width: 300px below), then use that width as the width of the image.
3. If that width is less than 300px, then enforce the width of the image as 300px and recalculate the width of the parent container.

Suggested change

	width: 100%;
	width: 100%;
	min-width: 300px;

[mjumbewu]

It looks like there are some linter failures for your project. The linter isn't being run in your GitHub Actions for some reason (did you enable actions for your repository?):

But you can run the linter on your computer as well by going into a terminal in your folder, running npm install, and then npx eslint . (the . is supposed to be there). Many of the errors can be fixed automatically by running npx eslint . --fix. You can ignore the errors about "Missing JSDoc comment", but I'd encourage you to resolve the others.

For the styles, you can run npx stylelint **/*.css, and likewise add --fix to fix what can be fixed automatically.