Hazel_Sun_storymap

[SunJiayu04]

Topic: Philadelphia Public Art & Community Interaction – an interactive map exploring how public art engages with neighborhoods, historical landmarks, and contemporary urban culture in Philadelphia.

Data Sources:

1. City of Philadelphia Open Data Portal – Historic sites, historic districts, public art installations
2. Custom‐curated GeoJSON layers – manually compiled key public art locations, landmark points, and Percent for Art data
3. Images and descriptions collected and documented during project development

Target Audience: Urban planning and design students, city residents, visitors, and anyone interested in how public art shapes Philadelphia’s community identity and public spaces.

[mjumbewu]

Hey Hazel, this is a strong start. I like the visual style of your splash screen; it sets a great mood right away.

I have a few specific changes that will make this project portfolio-ready:

1. File Structure: Currently, your code is hidden inside the Hazelmap folder. Please move all the files inside Hazelmap to the main root folder of your repository. This makes it easier for GitHub Pages to host your site correctly. Then, enable GitHub Pages in your repository settings (i.e. Settings > Pages > Build and deployment, and choose "GitHub Actions" as the source).

2. Performance & Data: Your first slide's data file is very large (~12MB). Once people are loading this over the web, it will take a long time for that data to download. I recommend two actions to improve this:

   • Remove all the attribute columns you aren't using (keep only the one you need for the label), and maybe simplify the geometry slightly.

   • In js/index.js, update your map initialization to use the Canvas renderer, which handles large datasets much better:

3. Add Your Images: You have great photos in your images/ folder; incorporate them in the slides; it's a project about art after all!

4. Linting: Set up GitHub Actions to automatically lint your code on every push. Fix any linting issues that come up. Many of these issues may be automatically fixable with npx eslint --fix . and npx stylelint --fix "**/*.css".

5. Field Names: I like how you use nameField to choose a different field to label features on the map for each slide, however it does appear that you have the field names mismatched with what's in your data files. Please double-check that the field names you are using in nameField match the actual attribute names in your data files.