Elisa Beshero-Bondar PRO
Professor of Digital Humanities and Chair of the Digital Media, Arts, and Technology Program at Penn State Erie, The Behrend College.
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
OFKN Labs TimeMapper:
https://timemapper.okfnlabs.org/
Students learn:
- work with spreadsheets to curate information
- how to visualize data with a simple web application
- Fun way to collect events, write in multimedia and decorate with images
- 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...
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!
Educational Opportunites (in house):
for DIGIT @ 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?
- Recommend: VSCodium with XML plugin
- Recommend a quick tutorial on XML, like this from w3Schools
- 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?
Wait...really? Code? vs. "no code" or "low code"
- 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?
BabyTimeMapper
By Elisa Beshero-Bondar
BabyTimeMapper
Presentation for the PA TRIO's 54th Annual Conference: A Beacon for Student Success. 7 October 2026
