Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
How to add a city to Click That ’Hood
(Any problems with these instructions? Contact email@example.com).
1. Find a file with neighborhood boundaries
Search for an open data portal for your city. Try to find a file with neighborhood boundaries, often referred to as a “shapefile.” It’s most often in the SHP, KML or GeoJSON format (or very often a ZIP archive containing a number of files inside; you don’t have to unpack it).
2. Check and process the neighborhood file
If you can’t code, send the file and the URL to the page you got it from to us at firstname.lastname@example.org. You’re done.
If you know how to code, read on…
2.1. Upload the neighborhood file to CartoDB
Click That ’Hood needs the data in GeoJSON format. A good way to import the neighborhood file, check it, and output the file in GeoJSON format is CartoDB.
2.1.1. Create an account there if you don’t already have it, and log in.
2.1.2. Create a new table and import the file you downloaded in part 1. (Pro tip: Just drag the file onto CartoDB window.)
2.2. Check the neighborhood data
2.2.1. After the neighborhood data is imported, check its quality on both the table and the map view.
In table view:
- the name of the neighborhood should be in a column titled “name”
- there should be no neighborhoods with empty names
In map view:
- whether the neighborhoods are aligned with the underlying map
- the neighborhoods should not overlap
You don’t have to worry about tiny/hard to click neighborhoods as Click That ’Hood will ignore them automatically.
2.2.2. Delete all the columns (by clicking on their titles) except cartodb_id, the_geom, name, created_at, and updated_at. We don’t need them.
2.3. Export the neighborhood data
Export the data to a GeoJSON file by using Edit > Export… in the upper right corner menu.
3. Add the neighborhood data to the game
3.1. Clone the Click That ’Hood repository on GitHub and set it up on your machine using these instructions.
3.2. Test whether the game works correctly by going to http://127.0.0.1:8020
3.3. Copy the GeoJSON file you exported in step 2.3 to the
public/data directory, and rename it as
CITY-ID.geojson (all lowercase), where
CITY-ID is a unique lowercase identifier of your city (e.g.
3.4. In the same
public/data directory, make a copy of the
_TEMPLATE.metadata.json file to
CITY-ID.metadata.json. Edit it and fill out all the information needed.
3.5. Restart your Node server by terminating the
node app.js process (Ctrl-C) and running it again. The app will check for common issues and help you out.
4. Test the game
4.1. Check whether your new city displays correctly on the homepage at http://127.0.0.1:8020.
4.2. Choose your city, start a difficult game, and finish it once.
If you see any weirdness or unexpected issues, let us know.