-
Notifications
You must be signed in to change notification settings - Fork 640
How to add a city to Click That ’Hood
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.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.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. san-francisco or brooklyn).
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.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.