City Systems has developed a customizable web tool for showcasing places on a map. For example, a downtown association can highlight locally-owned businesses, a community-based organization can feature urban greening efforts, or a public health department can share vaccine resources. After building a few of these types of tools for clients in 2021, we decided to generalize the code base and create an easy-to-use framework that doesn’t require knowing how to code. The City Systems ShowPlace just requires the following steps:

  1. Create an Airtable account
  2. Copy our starter Airtable base
  3. Decide on a visual configuration
  4. Import your data
  5. Share your Airtable with us
  6. We’ll host your tool for free!

Let’s walk through these steps in more detail. Note: ShowPlace and this guide are optimized for desktop viewing.

Getting Started

Create an Airtable account

Airtable is like Google Sheets with additional useful features. For example, if you want each row to be a single place, it’s easy to add multiple images to a field called Image URL. If you don’t already have an account, signing up only takes a couple of minutes. You can use the free version, but you will only be able to showcase a maximum of about 1,200 places (which is probably much more than you need!).

Copy our starter Airtable base

Open our starter base, and click the Copy base button. Then you can begin to modify this template.

Decide on a visual configuration

The starter base (above) has two tabs. The first one is called Configuration. This should look familiar to you as a spreadsheet format. Only the first row matters, so you can edit this row, or, if you switch to the pink view called Configuration Input Form and click Open form, you can fill in your preferences, and a new entry will be created back in the Grid view at the top. The choices you need to make are described below, and you can view 5 examples later in this document.

  • Page Title: This will be the title at the top left of the final website.
  • Map Width: This is the width of the map portion of the tool. You need to put a number out of 12. We recommend 8 (two thirds of the screen).
  • Card Width: This is the width of the side bar, beside the map, that typically will feature your list of places. Map and Card width need to add up to 12 exactly, or the tool won’t work.
  • Map Type: You have two options for how the map looks. marker gets you Google Maps style point markers. shape gets you a predetermined geographic boundary.
  • Shape Type: If you selected shape previously, then this field lets you specify state or county (more shape options to be added in the future).
  • List Type: In the side bar, table gets you a list of place names, while cards gets you Polaroid-style cards for each place. For the standard Card Width of 4, you can expect to see one card per row, but if you choose a Card Width of 7 and have a wide enough screen, you can expect to see two cards per row.
  • Photo Gallery: If you choose on, then clicking on a table item or card takes you to a full-screen place view, where the place information is on the left side, and images are on the right side. If you choose of, then clicking on a table item or card just converts the side bar itself into a more compact place view.
  • Theme Icons: If you want to enable a home screen where the side bar first shows a set of icons for your different themes, choose on.
  • Icon URL: If you choose on for Theme Icons, then you must include an image URL (where the image is publicly hosted elsewhere online) for each theme option in your place data. Make sure the order of photos matches the order of your theme options.

You can rearrange these fields, but do not rename them. Once your site is live, you can edit these configuration inputs whenever you want, and the site should be reconfigured on the next refresh. But beware that some errors in configuration (like Map Width and Card Width not adding up to 12) will cause the site to break, and you’ll need to reset to a working configuration. There is a History button near the top right that can help you revert back to old versions.

Import your data

The second tab on the starter base is called Places. You can add as many rows as you’d like, and each will represent one place. You can add entries using the Place Input Form. You should also be able to easily copy and paste in data from another spreadsheet tool. The information you need to provide is as follows:

  • Name: The name of the individual place.
  • Description: As long of a description as you’d like for your place
  • Location: This is required if you choose shape for Map Type in the configuration, but recommended for every place, as it will show up in your place view. Depending on the Shape Type you choose, you need to write your location accurately (e.g., “California” or “San Francisco”).
  • latlon: If you choose marker for Map Type, then you need to input latitude and longitude coordinates, separated by a comma. The easiest way to do this is to right-click on Google Maps where your place is located, and click the first option, which will copy the correctly formatted coordinates to your clipboard. Then you can just paste directly into Airtable.
  • Thematic Areas: We recommend you provide a thematic category for all of your places. If you choose on for Theme Icons, these will be a key way to navigate through your places. To configure the theme options, right-click on the field name and select Customize field type. Then, in the window that shows up, you can add and rename your theme options. The order should match the order of your icon images, if you choose on for Theme Icons.
  • Image URL: Add as many image URLs as you’d like (where the image is publicly hosted elsewhere online). The first one is the one that will be featured in a card view, or as the only image if you choose off for Photo Gallery.
  • Reviewed: This is a way to decide whether to make individual place records visible on the site or not.
  • ID: This should be filled in automatically and dictates the order in which the places are listed.

As before, you can rearrange these fields, but do not rename them. Once your site is live, you can edit place details whenever you want, and the site info should be updated on the next refresh. But beware that some errors (like latlon being incorrectly formatted) will cause the site to break, and you’ll need to reset to a working configuration. The History button near the top right can help you revert back to old versions.

Share your Airtable with us

When you are ready to link your Airtable to the interactive web display we’ve designed, just add info@city.systems as a collaborator to your base using the SHARE button, and we’ll get you set up. We recommend you give us edit permissions in case we need to make any corrections to your configurations or place data. Within a day or two, we’ll then give you a URL for your site, which will look like city.systems/yoursitename. You can then embed this directly into another website, like a Squarespace site, using code like this:

<iframe width="100%" height="800" src="city.systems/yoursitename"></iframe>

We’re happy to host your site for free, as long as you’d like. If you have customization needs beyond the preset configuration options, let us know and we can discuss how to make those happen.

Examples

The following examples showcase animal refuges in different states in the U.S. All five versions have the same underlying place data, but different configuration options. The embedded Airtable below shows the place data and five configuration tabs.

Table view with markers

The following live ShowPlace is linked to Config Sheet 1 above. The table view is easier to start with if you don’t yet have pictures for every place. Click on a list item and note how the side bar then features the single place you selected. Click Back to All to return to the list view. Also, clicking anywhere on the map that isn’t a place resets the tool back to its starting view.

Card view

The following live ShowPlace is linked to Config Sheet 3 above. It has the same configuration options as the previous example, except it has changed List Type from table to cards.

Shapes with changed widths

The following live ShowPlace is linked to Config Sheet 4 above. It has the same configuration options as the previous example, except it has changed Map Type from marker to shape, which replaces individual markers with just the state boundaries of places. Clicking on the state boundary will filter the list items by state. The configuration also changed the map-to-side-bar ratio from 8-4 to 5-7, which lets you view two cards per row.

Theme icons

The following live ShowPlace is linked to Config Sheet 5 above. It has the same configuration options as the previous example, except it has gone back to an 8-4 ratio, and set Theme Icons to on. The effect is that the home screen has icons on the side bar. Clicking on the icons gets you to a list view filtered by theme. In all the other examples, you could also filter by theme using the dropdown menu. But this configuration is useful if you want to emphasize the theme options right at the start of the tool. Clicking anywhere on the map that’s not a marker or shape resets you to the home screen.

Release Notes

September 11, 2023

Airtable no longer allows for images uploading into an Airtable to be easily published in external sites, so we’ve updated the instructions to indicate that you must separately host your images (like on Flickr) and directly paste those URLs.

November 25, 2021

We’re releasing v1.0 on Thanksgiving Day with gratitude for the many community-based and public-sector organizations that work everyday to make the places we love better. We hope ShowPlace will make it easier to celebrate those places. If you know of an organization that could use ShowPlace, please share this page! Big thanks to Julia Wagenfehr – ShowPlace would not have been possible without you!

Reach out to info@city.systems if you notice any bugs, or have any feature requests. We look forward to improving and expanding this tool, based on feedback!