Skip to content

Speculative Tourism: Sea Change

Jump to bottom
Adam Kariv edited this page May 13, 2021 · 9 revisions

This is a timeline for historic and speculative geographic narratives. It allows to create events in the form of media on the map (audio, YouTube embeds, images, fake tweets, fake Wikipedia articles, fake Instagram embeds etc...

You can find it here: https://medliq.art/speculative-tourism-sea-change

Here you will learn how to:

How to add content to this map

The Sea Change storyline was conceived as a complete piece. However if you are interested in suggesting new item to the timeline, the authors would love to talk to you. Please contact them here: https://airtable.com/shrVFdAjiZeZ3of9o

How to create a new instance of this map

This project consists of three moving parts:

  • an AirTable Base, as the backend in which all information is stored (see the documentation on its structure. (This is the link to the base for you to review and copy: https://airtable.com/shrN6Tmup3CV0X7Ky)
  • a MapBox Style, containing various layers which might be used in the timeline
  • an Angular Component, which binds all the pieces together.

In order to create a new map, you need to duplicate these 3 components and add there your content.

More on duplicating AirTable bases can be found here: How To: Duplicate an AirTable Base

Adding the Angular component

This project is an Angular base project, which means that any new content must follow this framework's guidelines and rules.

The Speculative Tourism map is an instance of the TimelineMap component, which is a generic component that implements the logic of the map without referencing the specific content of the map.

To add new functionality to the map, you can either add it in your own component, or generalize the base component so that this functionality will be available to all maps that are based on it.

In order to create a new map component, use Angular's command

$ ng g c maps/demo-map (replace demo-map with your map's name)

It will create three files for code, html and style. The code and style files can be left as-is, and the html should contain the following content:

<app-timeline-map
    id='M2'
    airtableBase='appk4QxOhg2XleeTM'
    subtitle='Speculative Tourism / '
    title='Sea Change'
    infobarTitle='Speculative Tourism: Sea change'
    infobarSubtitle='A turn of the tide in the Mediterranean'
    mapStyle='mapbox://styles/atlasmedliq/ckiodibg82x1k17tcof8e9pmd'
>
</app-timeline-map>

(You need to replace the values based on your own content, of course).

Notice the airtableBase and mapStyle identifiers which bind this map to its content and map style.

To add the final component to the map, please follow the steps in How To: Add a new map to the project

AirTable Base structure

The data that feeds this map is structured through a set of tables we will describe below:

Content

This is where we manage each item on the timeline and connect it to map views etc...

Review it here: https://airtable.com/shrUSOfb1JQzgyaw1

Each item should include:

  • Title*
  • Type*: Audio / Video / Image / Twitter / Instagram / Wikipedia
  • map_view* - what do we see on the map, we set it up on the MapViews table
  • Variants: full / medium (how large will the item appear on the timeline)
  • And a set of additional optional fields based on the type of the item (their titles are mostly self explanatory)

Timeline

This table manages the publishing of the content to the timeline Review it here: https://airtable.com/shr4VT39KOVQk1D6u

Each item should include:

  • Content* - linked to items from the Content map
  • Date* - at this point the timeline shows only the year
  • Status* - draft items will not appear on the timeline until they are switched to staging or published

MapViews

This sets a reusable view of the map including geolocation, camera angle and dynamic layers

Review it here: https://airtable.com/shrme8ZypQ2eIqTCy

Each item should include:

  • Name* - Use something descriptive that would help you know what's there.
  • Geo* - This is the code that sets the location and the camera angle. Use this [location helper map](use https://demos.mapbox.com/location-helper/) to set up the angle and copy the code to this field.
  • map_layers - This is a list of the Mapbox layer groups you would like to turn on in this map view, they are listed on the MapLayers table. Leaving it blank would leave the map as-is.

MapLayers

Each item here is a composition of Mapbox layers to turn on or off together. We would mention only the Mapbox layers we might want to turn on or off at some point.

Review it here: https://airtable.com/shrdLXlAycHnLD7IZ

Each item should include:

  • Name* - Use something descriptive that would help you know what's there.
  • on_layers* - which layers are turned on when this item is selected? Use the exact name of the layer from the Mapbox style (no spaces).
  • MapViews - shows which mapiews make use of this item.

AudioTimestamps

Experimental feature, not documented at this point.

Authors

Experimental crediting feature, not documented at this point.

Settings

This is where we put some general settings for the map.

Review it here: https://airtable.com/shrG4VHrT0XwnDxqg

  • about* - this is the rich text format that would appear in the about tab.
  • from year* - earliest year of the timeline.
  • to year* - latest year of the timeline.
  • start year* - the year the timeline should start on.
  • inline css - experimental feature, not documented at this point.

Issue Tracking

Used internally for project management and bug tracking

Contact Form

Used internally for incoming inquiries

Clone this wiki locally