Where's the Trash?

An interactive map that visualizes the New York Department of Sanitation's [DSNY] public trash bins across all 5 boroughs. Try it out

About

This is a website that provides an interactive map for users to navigate and view all the DSNY public trash bins. Users can click and view the bins in two perspectives: Citywide and By Borough. In "Citywide" View, users can view all the data points on the map at the same time. In "By Borough", users can can click on the borough of their choice and only view points corresponding to the borough. Users can also find trash bins near them by clicking the geolocator icon on the map.

A detailed guide of the map's features is found on the website's 'Help' tab here).

Prerequisites

1. A text editor or Integrated Development Environment (IDE)- preferably VS Code to view code on your computer if you wish to download.

2. Node.js with NVM. To install on your computer, follow the instructions here Node.js

Installation

1. Install a package manager like npm, yarn, brew. I use npm Note: npm is the standard package management system for Javascript based projects.
2. Navigate to your project directory in the terminal.
3. Run the command npm install to install project dependencies.
4. Run npm start to run a local development server.
5. Visit http://localhost:3000 to view live site.

Deployment

This project is hosted on Vercel. You can visit the rendered website here)

Built with

• VS Code
• Github
• Vercel
• Node.js
• MongoDB
• Postman
• NYC Open Data
• Leaflet
• FontAwesome

Process

1. I installed npm on my computer.

2. I created a folder to store all my webserver files and created a web server using Node.js that has dependencies on express, mongoose, and dotenv libraries.

3. Next, I created a database on mongodb and linked it to my server. I designed my data schema and loaded the DSNY Public Litter Bins GEOJSON data into my database, removing some attributes from the original file to lighten the load of data.

4. I set up my API endpoints and tested the HTTP requests locally using Postman to make sure my code was working properly. To read more about the specific API endpoints click here

5. After I finished my backend, I began thinking about the design of the website and drew a quick wireframe.

6. Next, I built my front-end website using html and css. I created the foundation for the map using Leaflet and various Leaflet plugins by linking the libraries files in the index.html.

7. I deployed the website on Vercel.

Future Work

I would like to continue working on this project to add aditonally functionality and distance analysis. I also would like to build a sister site that visualizes public recycling bin data.

License

Please reach out if you would like to fork this project or contribute to development

Author

• Julie Lizardo -- Creative Engineer

References

• DSNY Public Litter Bins GEOJSON for the geojson file that contains all of the points of the New York Department of Sanitation's public trash bins
• Borough Boundaries for the geojson file that contains all the points of the 5 bouroughs of NY
• Leaflet Sidebar Plugin for the library to create side panel on map
• Leaflet Spin Plugin for the library to create loading gif on map
• Leaflet Locate Plugin for the library to create geolocation button and marker