Citi Map: Urban Data Collection & Mapping Tool
Citi Map is a React template for creating a web app to collect on-the-ground data to visualize on a map. The tool allows users to click on icons that represent categories of items or behaviors occurring around their city. For example, trash piles, cherry blossoms in bloom, or mask wearing behavior. By clicking on the icon that represents the occurrence, the user logs a count under the respective icon and as a geolocation point on the map. With Citi Map, users may easily collect timestamped, geolocation data of their interest while moving around a city.
Data collected through Citi Map can be visualized through the map interface itself or downloaded as a CSV. The data points saved simply are: Timestamp, GPS Coordinates, Icon Number, and Accuracy of Location Data.
Requirements
- Node V16.0.0 or higher
- Yarn V1.17.3 or higer
Basic Usage
- Clone or fork the Citi-Map repository.
- Run
yarn install
to download the required packages
- Run
yarn start
to launch the app
- Click each icon to raise the count of that category. This increments the number below that object and display its location on the map.
- Click the
Download CSV
button to download your session data.
How to Customize the App
- Upload your images to the
src/images/
folder. Name them in a format like icon1.png
, icon2.png
, etc. starting your numbering from 1 and up to 4. Note: for best results, use square sized images (e.g. 100 x 100)
- [WIP] We're still working on a simple way to customize the number of icons you can have. At the moment, the only way is to change the code in JS. For now, you may checkout the branch corresponding with the number of icons you would like. The main branch supports 3 icons.
Hosting the App on Firebase
The app may be hosted on any platform of your choice. Here is an example of how to host the app and database using Firebase. To follow these steps you need a google account and the firebase CLI installed on your computer (Follow these instructions to install firebase cli tools)
- Create the project on the Firebase console following Step 1 in this documentation.
- Go to the Project Settings page in your Firebase console and select the
</>
option to add a web app
- Follow the instructions to add Firebase to your web app
- Note: make sure to use
yarn add
instead of npm install
for installation
- Run
yarn add firebase
on the command line
- Set up the Firebase Command Line Tools following this documentation
- Select the
Hosting options for Firebase CLI features
- Select
Use an existing project
and connect to the project you created in step 1.
- Choose
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
- Use
build
as your public directory
- Yes, configure as a single-page app
- Run
yarn build
to compile the project and prepare for deployment
- Run
firebase deploy
to deploy the app
Connecting the App with a database
Using a firebase realtime database
- First, make sure you have the project in your Firebase console. If not please refer to Hosting the App on Firebase section of this page
- Create a new file
config.js
in the /src
folder of the app
- Copy the config information provided on your Project settings page in the
/src/config.js
file. Here's an example of the content of the file with some random values:
export const firebaseConfig = {
apiKey: "123",
authDomain: "456",
databaseURL: "789",
projectId: "123",
storageBucket: "456",
messagingSenderId: "789",
appId: "123"
measurementId: "456"
};
- In
App.js
uncomment the firebase imports
- In
App.js::updateData
uncomment the following lines:
const firebaseApp = firebase.initializeApp(firebaseConfig);
and
firebaseApp.database().ref('/').push(body);
This is what will be used to push to the database
- On the Firebase console, go to the Realtime Database page and select Create Database to start logging data.
- Choose whether you want a test database or a production ready one (Start with test in order to test logging data)
- Choose a suitable region for your project (If most of the users will be in the US, choose US-central-1, for example)
- Now, if you log data through your app, you should be able to see them in the firebase realtime UI (See attachment below)
- Enjoy collecting and analyzing your data!🚀
Datasets
Examples
- Citi Map is a live platform for collecting data on street trash, puddles, and poo.
- Mask Map was the first iteration of Citi Map. The project's goal was to collect real-time mask behavior data around NYC in 2020 and 2021. 20,000+ data points collected in this time period demonstrated the changes in mask wearing practices across space in time. Learn more about the project results here.
- Street Lighting Map A tool to log the street lighting levels in different areas around a city. This data can be used to map out safe paths for walks at night.
- Street Art Locator A tool to collect data about artists performing in your streets. It supports logging data for musicians, performers and painters