One of the main pieces of "environmental" technology I was thinking about while brainstorming was a map of human fecal matter present in the streets of San Francisco. This is a real problem in that area, and by mapping out those locations, people are aware of which areas to avoid, while also allowing city sanitizers to know which areas need cleaning. In larger cities like New York City, a large problem present is trash in the streets. Thus, I connected the San Francisco fecal matter solution with New York City's litter problem to create this litter mapping web app.

What it does

This app allows people to submit their current location or longitudinal/latitudinal coordinates and place a trashcan in that location to represent litter in that specific area. The litter locations persist through a data base, so that more and more people can add litter locations to the map, allowing a large amount of data to be aggregated and thus be presented to city officials in order to brainstorm effective manners of litter/trash removal.

How we built it

The main "library" that was used was Mapbox GL JS, which is a mapping library that allows users to display a map. However, that was the extent of that library, and all of the functionality was written by me. Essentially, I created a form that submits latitudinal and longitudinal data and places a trash can on the map at those coordinates to represent the litter there. The coordinates are then sent to a MongoDB and are stored there, so that whenever a new user connects to the site, the data is fetched, and the coordinates entered by previous users display trash cans on the new user's session. I am using to transfer the data from the front end to the back end, and am using a Node.JS Express server.

Challenges we ran into

One of the main challenges that I ran into was trouble shooting permissions on mobile. Often times, there were intricate directions that had to be taken in order to enable location permissions to allow myself to test my web application on my phone. Another issue included displaying the user input forms and beautifying it, as the pre-styling of the Mapbox map interfered with my CSS.

Accomplishments that we're proud of

I am frankly accomplished by just how simple, easy to use, and practical my application is. Anyone can use this and understand what it does. The simplicity of being able to pinpoint trash and allow others to use it ensures the practicality of this app, while also having significance as city officials can use this data to help clean up areas with lots of litters (by placing strategically placing trash cans in those areas, perhaps).

What we learned

I learned how to use Mapbox GL JS library. It was interesting going through the documentation to figure this out. I also enjoyed learning how to use MongoDB to store and fetch data.

What's next for GeoLit- Geographical Litter Mapper

I would like to add a feature where every period of time, the data is refreshed, or a system in which users can manually remove the trash cans.

Share this project: