Map of firehouses in New York City built with Vue.js and Mapbox. View working component.
Project meets general accessibility (WACG) and cross-browser requirements. More testing with a dedicated services (e.g., Sauce Labs) would be helpful if deploying to production.
- Map with firehouse in Queens selected.
Clone down this repository. You will need node and npm installed globally on your machine.
Installation:
npm install
To Run Vue:
npm run dev
To Visit App:
Visit the localhost port displayed in the terminal after running npm run dev.
My goal was to build an app that allows NYC residents to quickly locate firehouses. I experimented with numerous ways. At first, I built a filtering system that let users search by neighborhood and zip code. This worked okay, but neighborhood names often lack clear boundaries. This can lead to confusion. With zip codes, people usually know their own zip code but not other areas. In the end, a map seemed the best method.
I retrieved data from Open Data NYC and built the GeoJSON file MapBox needed from it. I considered trying to generate a GeoJSON file "on the fly" from Open Data NYC, but it added complexity. Since firehouse locations rarely change, manually building the GeoJSON file seemed to be a much easier and stable solution.
For design, I followed the color scheme and page layout used by the FDNY. I used Material design for guidance with other colors.
- Firehouse data from NYC Open Data.
- FDNY logo Wikimedia.
- NYC logo Wikimedia.
- Readme guidance from Brenna Martenson.
- Linting guidance from ESLint and Stylelint.
- Design guidance and icons from Google's Material Design.
- Accessibility guidance from Chrome's Lighthouse and Firefox's Accessibility Tools.
- Shields from Shields.
