BabyTimeMapper

Ashton Maloney and Elisa Beshero-Bondar

Penn State Erie, The Behrend College

 

Developing an Educational Resource to Visualize Space and Time

Presentation for the 54th Annual TRIO Conference: A Beacon for Student Success, Erie, PA

7 October 2026 @ 10:30am

Link to these slides: https://bit.ly/BabyTimeMapper 

 

Time Mapping and TimeMapper

Open Knowledge Foundation Labs TimeMapper:

https://timemapper.okfnlabs.org/ 
 

Students learn:

  • how to work with spreadsheets to curate information
  • how to visualize data with a simple web application
  • how to collect events, write in multimedia and decorate with images
  • a way to visualize relationships in space and time.

iframe embedding of a student's published TimeMapper 

(Previous slide might not load directly from ofknlabs.org, so here's a static image)

The only way to visualize the spreadsheet data is via https://timemapper.okfnlabs.org/

Changes in the Public Internet

  • Not TimeMapper's fault, but...
  • Increasingly websites prevent us from embedding their content directly
    • ("hot links" and iframes are blocked)
    • API services like OpenStreetMaps are increasingly overwhelmed by bot scrapers
    • (And they are underfunded...)
  • TimeMapper remains free and "no-code" for everyone to use, but is increasingly brittle

TimeMapper's reliance on direct API calls to Open Street Maps is brittle.

File + Network Dependencies of original TimeMapper

  • Google sheets (or uploaded spreadsheet)
  • TimeMapper Web API for publishing: 

Unless. . . 

There should be a way to run this locally, right?

But the overworked prof has no time to sort it out, and keeps using the original TimeMapper in the intro classes...

Unless. . . 

This is an opportunity for a student's Senior Project!

Ashton to the rescue!

Localizing in JavaScript

  • Why is JavaScript helpful?
  • The original TimeMapper was made with JavaScript but we didn't control it locally

BabyTimeMapper puts some of the same JS libraries in the students' hands to control, and reconstructs others!

  • Leaflet.js: for the map
  • We made our own JS to replace Timeline.js!

Did you know...

Node.js  (+ Reveal.js) is running this very slide deck...

Our BabyTimeMapper is powered by Node.JS

For BabyTimeMapper it makes a localhost development environment, runs on a local computer while you're developing!

Demo the BabyTimeMapper

localhost environment

  • We see lots of students incoming to our program who have little knowledge of computer file systems on any platform
    • Chromebook or iPad / Tablet in schools
    • Didn't grow up with a computer they could use
    • Was there a computer lab at school?
  • Students working with this structure are learning to carefully maintain file directories! We want to introduce this early and often! 
<events>
 <track type="1" name="">
  <event>
    <title></title>
    <date type="start">
      <year></year>
      <era></era>
    </date>
    <date type="end">
      <year></year>
      <era></era>
    </date>
    <description></description>
    <lat></lat>
    <lon></lon>
    <media></media>
  </event>
</events>

XML Data Structure

  • This is an example of what our XML data structure looks like.
  • Students will fill out these areas in order to build BabyTimeMapper!
<events>
 <track type="1" name="early">
  <event>
    <title>Julius Caesar invades Britain</title>
    <date type="start">
      <year>0080</year>
      <era>BC</era>
    </date>
    <date type="end">
      <year>0054</year>
      <era>BC</era>
    </date>
    <description>Julius Caesar led the first Roman 
    expedition to Britain, landing on the Kent 
    coast.</description>
    <lat>51.1789</lat>
    <lon>1.1713</lon>
    <media>https://en.wikipedia.org/wiki
    /Julius_Caesar%27s_invasions_of_Britain#
    /media/File:Campagne_Bretagne_-54.png</media>
  </event>
</events>

You might've noticed that there is no year 0 on the timeline ruler...

This is because the year 0 doesn't actually exist!

We can thank a monk named Dionysius Exiguus and a later monk named Bede the Venerable

​​

Educational Opportunites (in house):

for DIGIT @ Penn State Behrend

  • Students are learning git and GitHub
    • They can learn how to make a "fork" of this project and edit the XML file.
    • Our majors keep using GitHub and XML in other classes
  • Students are learning to collect historical data about events, locations, times, and information resources.
  • Advanced students learn about the JavaScript and how to build/adapt with Node.js
  • ALL students can critique the new interface, stress-test the software, and contribute to issues on the source repo! 

Educational Opportunities (for others?)

  • The instructor would need to be interested in learning a little code, but not a lot...
  • No need to learn GitHub: (just download the repository as a zipped directory)
  • What is XML?
  • What code editor is needed? 
  • Need to learn about your command line and how to make local installations
  • Estimate: one week of prep?
    • Share with students: A two-week module?

Source: Bubert (not AI generated), iStock by Getty Images

Wait...really? Code? vs. “no code” or “low code”

Source: Bubert (not AI generated), iStock by Getty Images

  • Should you need to code to build with BabyTimeMapper?
  • We want this to be a tool to learn about coding and file management as well as about tracking events in space + time.
  • However(!) Let's think...
  • ...What if we made a web service like the original TimeMapper?
  • How would it work?
    • Submit your XML file through a form?
    • (Web form submissions like this Rustbelt Digital Network site we made?)
    • Who hosts and distributes?
    • Will it be you?

 

Thanks, PA TRIO!

Find Ashton's project on GitHub at:

https://github.com/spacetimeexperiments

 

We are . . . 

Digital Media, Arts, and Technology ("Digit") @