UIUC Crime Map

Introduction

The goal of our project is to create a simple web application that displays crimes recorded on the University Police Daily Crime Log. Our goal is to provide members of the UIUC community with an easy way to identify areas where crimes are occuring so they can be avoided. We were initially inspired to do this because of the rise in Asian Hate Crimes occuring in neighborhoods we thought were safe. We wanted a way to bring awareness and promote safety in our communities and this seemed like the best way to do so.

Design Process

In our project we used react.js to create a front end and display a map with leaftlet.js and react-leaflet.js. For our backend we used the express.js package, and for our database we used MongoDB Atlas. To fetch the pdf we use selenium and beautifulsoup4. For decrypting the pdf, we are using tabula.py in python, as well as Geocoding with the Google Maps API in order to convert street addresses to latitude and longitude for the front-end. Finally we are using pymongo to connect our python program with the MongoDB Atlas database.

Features

As of now our features include a homepage with a map displaying markers with popups showing crime info. We also have a legend describing what each color of marker refers to and linking to maps that only have those markers displayed. We have a Time of Day Slider that can be used to see crimes withing a certain time range and a Crime Threshold Slider that can be used to set a custom date range the colors of the markers. We also have a brief description of the project on our about page as well as introductions to each of the team members on our team page.

How to Run

Backend (API)


yarn // to install dependencies in package.json


yarn start // starts the backend server (no need to open this in a browser)

Frontend (Client)

Open a new terminal to make sure your backend is still running.


cd mapclient


yarn // to install dependencies in package.json


yarn start // starts the frontend in a browser