View the live site at: https://www.awarechicago.com

I'm an independent contractor helping companies build custom cloud apps and leverage data science, visual analytics, and AI. I offer low introductory rates, free consultation and estimates, and no minimums, so contact me today and let's chat about how I can help!

https://www.bryce-chamberlain.com/

This project displays my skill in React, OpenLayers, and Cloud Functions.

A public safety map that only shows crime that you might actually experience while walking in the city.

My hope is that it will help you stay safe and informed - but not overly terrified, which is what woud happen if I threw a whole year of crime data at you.

The code has been shared publicly to provide the community with a neat example of how to use React, OpenLayers maps, public data, and serverless computing, as well as to invite ideas and contributions.

This is only possible because of these awesome projects and resources:

• Chicago Data Portal and specifically the dataset Crimes - One Year Prior to Present.
• OpenLayers and the OpenStreetMap community.
• React web framework and the Create React App project by Facebook Open Source.
• Intro.js.
• Articles by Max Dietrich and Taylor Callsen

Important Files

The entire app is only about 400 lines of custom code. If you'd like to understand how the app works, you can review it easily.

• src/MappWrapper.js: All the UI stuff (React 18) including buttons, intro.js, OpenLayers.
• public/index.html: Web page stuff.
• cloud-functions/get-crimes/index.js: API call to the Chicago Data Portal and contextual data filtering.

Run Locally

• To run locally, install Node and run npm install in the project directory. Then run the app with npm start.
• By default, the app will call my cloud function at ~line 173 of src/MapWrapper.js but you can also copy in the code from cloud-functions/get-crimes/index.js if you want to change how that part works. You'll need to get an API key from https://data.cityofchicago.org/.

Publishing

The publishing process is really interesting, so I share it here even though I don't expect many people to follow it. Hopefully it'll help you publish your own serverless app!

• Run npm run build to compile the app into the build/static folder.
• Upload your app files to a Google Cloud Storage bucket (this can also be done at AWS but I prefer GCP).
• Follow this guide to set up your bucket as a website.
• Create a cloud function, set your API key from https://data.cityofchicago.org/ as a runtime environment variable called api_key, and paste in the code from cloud-functions/get-crimes/index.js.
• If you want a custom URL, the guide also has steps for that. You'll need to set up a load balancer, SSL certificate, static IP, DNS routing etc. which sounds complicated but GCP actually makes it pretty easy.

I am an independent contractor. Please reach out to me if you would like some help building a custom cloud app or leveraging data science, visual analytics, or AI in your business.

If you would like to contribute, please reach out as well! I'll happily accept Issues and Pull Requests if you would like to add features or data.

Good luck and enjoy!

Bryce Chamberlain
Independent Technical Contractor
bryce@bryce-chamberlain.com