Thursday, December 8, 2016

timeMapper: timeline and story map from okfnlabs


examples (map empty)

one of my story map:


1. Create a Spreadsheet
Add your dates and places to a Google Spreadsheet.

2. Connect and Customize
Connect your spreadsheet with TimeMapper and customize the results.

3. Publish, Embed and Share
Publish your TimeMap at your own personal url, then share or embed on your site.

TimeMapper is an open-source project of Open Knowledge Foundation Labs. It is possible thanks to a set of awesome open-source components including TimelineJS, ReclineJS, Leaflet, Backbone and Bootstrap. You can find the full open-source source for TimeMapper on GitHub here:

The Spreadsheet

What structure must the spreadsheet have?

TimeMapper recognizes certain columns with specific names. The best overview of these columns is the template, which has rows of instructions and examples:

Not all fields are required. The only required fields are Title and Start fields, and even Start can be omitted if you just want a map. Note that you can add any number of other columns beyond those that TimeMapper uses.

How do I format dates?

The preferred date format is ISO 8601 (YYYY-MM-DD), but TimeMapper recognizes most types of date.

If a date's month and day are ambiguous (e.g. is 08-03-1798 UK notation for 8 March, or is it US notation for 3 August?), by default, the first number will be interpreted as the month. You can change this by clicking the edit button in the top right corner of your TimeMap's display and selecting between US- and non-US-style dates.

What kinds of geodata are supported?

The Location column accepts two types of geodata: latitude-longitude coordinates or GeoJSON objects.

Coordinates must be in the format lat, long (e.g. 37.5, -122). The spreadsheet template includes a formula which automatically looks up coordinates corresponding to human-readable place names in the Place column:
This formula is explained in a School of Data blog post:

Advanced users who want to go beyond simple coordinates can use GeoJSON feature objects. For an example, see this blog post on adding GeoJSON country boundaries to spreadsheets:

Dynamic Google Spreadsheet

If the owner select a wide sharing rule, you can do a narrative story map this many people.
Sharing options:


  • long time for upload your story map
    It's a dynamic process:
    1. it reads your Google Spreadsheet, 
    2. builds the interface...
  • For the first slide, don't put too much texte because on the first view the slider doesn't work. With http at the end with #0, it works.

  • zoom is fixed for all slides (you must zoom manually, no auto-zoom)
    if the zoom was on the center of this DOM, we could use zoom by touch ;)
  • user events: click allowed but you can only view the "Title" (but this Title is an HTML structure , then you can add audio, img...
  • user events: no hover events
  • Embed button is out...
  • audio is OK for chrome (v55) but with firefox not easy to stop if you put this in the "Title", and with Safari (sierra) many problems...

GitHub timeMappper

Data View info

Stored in datapackage.json following Data Package spec.
Key points:

  • name, title, licenses etc as per Data Package
  • info on google doc data source stored in first resources item in format compatible with Recline

resources: [{
  backend: 'gdocs',
  url: 'gdocs url ...'

No comments:

Post a Comment