A13 – Client-Oriented Overview

*Note – “you” in here refers to the client, Daniel Toben, as this was created as an overview for him.

Major Implemented Pieces:

  • Please see this link for the architecture diagram (sorry, uploading images is not currently working on the site.) WE created a heatmap overlay for the website than can be toggled on or off via the heatmap button on the main page. If toggled, it will communicate with the predict.js file (our predictive algorithm) to figure out the weights for the current location it is looking at and will display it accordingly. This requires a little more work such as querying google maps API to figure out where we are currently looking at and also querying the OSM API to get the tags for that area, but the majority of the data flow is from the heatmap overlay being toggled on the main page and communicating with the predictive algorithm. More info on architecture choices can be found here.
  • Heatmap Overlay – New file HeatMapOverlay.jsx and changes to Map.jsx were implemented. This file creates the table and coloring for the heatmap overlay. It does not calculate the values, but rather gets the weights for each box and colors the table correctly. This means if you ever want to change to your predictive methods (as we will later discuss) this overlay can continue to be used. All you have to do is give it the numbers for the weights and the heatmap will be generated.
  • Predictive algorithm – New file predict.jsx was implemented. This is based off of the excel spreadsheet we received with all the weights for each individual tag. It takes in the coordinates of where you want weights from, and with that information and the spreadsheet labels, it then queries for the OSM tags. It does some logic and gives back the weights(in an array format) that should be used for the heatmap.
  • Unit Testing – New file predict.test.jsx was implemented. This file uses jest (more info on our webpage here) to create unit tests for predict.jsx. This ensure it gives correct values based on input.


  • Everything was created under the current littermap github repository that you own, deployed as Ildar has instructed; so you will not need any access from us.
  • All the code we created is under the MIT license (more available on the README for info), with full permission given to you as long as we are credited for what we created.
  • The lived app is, as you know, on this domain littermap.com.

Goals Completed:

  • All “Need-to-have” features as created at the beginning of the semester have either been completed, or, from out change of focus to only working on the heatmap, were given to Ildar, your other developer. As such there are no pending tasks from that list left for us to complete.
  • From the “Nice-to-have” features, only the first story, allowing ZIP code/address insertion was done by Ildar. The other stories were not completed as we had a change of focus, as discussed with you, to focus on the heatmap and prediction.
  • Our next goals include:
    •  Fixing the git history/.gitignor problems so that the code better combines with Ildars main repository.
    • Fixing UI problems and ensuring it has a good look.
    • Testing out the Amazon storage for hosting tags data on their instead of needing to query Planet.OSM. As a reminder, we spoke with you about how currently calling the OSM database is burdensome, slow, and unreliable. Thus, we wish to move the data from OSM, which is public, to a private hosted database on Amazon. This will allow us to query the data with no throttle on queries and with much great speed, improving usability.

Moving Forward:

  • The Heatmap overlay is modular, as described above, so it will be easy to use with other methods of predicting the data. We know that recently you have been contacting others to get more data about litter and also wish to incorporate reports into your predictive model. Doing this will require significant changes/additions to the predict.js file, but the heatmap overlay files should be fine to keep as is. With new changes you can just send the calculated weights to the heatmap and it will show them correctly. We do recommend gathering more data and incorporating it into your predictive model as currently the tags do  not provide great coverage. They are hand selected and so have some bias, plus they are not present everywhere, and so more data will make the heatmap much better to use.
  • Currently, the Amazon server is free as we are still testing its functionality and usability, but should our tests prove it to be useful, uploading the whole database and hosting it there will require payment. We discussed this earlier and recommend that for privacy sake you email us if you have any questions regarding this and the costs again.

A Final Word:

Lastly, thank you for working with us this semester! We hope you have gotten much out of it this experience, as we certainly have! We learned  a lot about modeling, user experience, and api usage working on this project, as well as much about project management through working with you! Thank you for your patience with us and we hope your project continues with success! If you have any questions about anything above please feel free to reach out to us via our contact info here!