This project is a proposal for the 40th ward's 2023 Participatory Budget.
Powered by: Gatsby, React-Leaflet
Most of the spatial data used were created manually by referencing various CDOT planning documents and the 2022 Western Avenue Corridor Study data. As well as by filling in incorrect data and missing routes in the "Bike Routes" data source from the Chicago Data Portal.
Because the submission deadline was fast approaching, a few design considerations (i.e. shortcuts) were taken for this application. Since the MVP was done for web only, a rudementary web/mobile split logic approach was used (by rendering different css if a mobile browser is detected), rather than using a mobile-first design.
Additionally, rather than rendering the custom point icons/markers programatically, they are hard coded because gatsby did not mix well with using custom markers on geojson objects in react-leaflet. Others found a way to make it work for single marker objects but not for mapping custom icons by feature properties on an entire GeoJSON component. With more time, I would dig more into this issue but for the needs of this project, hard coding the icons was sufficient.
Because the app is relatively simple and getting state working with react-leaflet was proving troublesome, local state was used in the main App component instead of using redux. One minor annoying issue that came about from this is that switching "story panes" on mobile keeps the current scroll amount on the Story Pane div. A better user experience would have the Story Pane scroll reset to top upon rendering new content, but simple implementations for this did not work.