GeoReplay¶ ↑

View this as a GitHub Page

[An in-progress project for the purpose of exploring Javascript, Google Maps API, Bootstrap, Ruby On Rails, Git, and cloud deploy systems. The Javascript/Google Maps part is pretty much done, but the Rails part is still rough.]

GeoReplay allows the user to enter one or more paths in Google Maps with annotations at each node, and then push a “play” button to watch icons trace the path(s). I thought it might be interesting to create historic ‘simulations’ that gave a more visceral feeling about the geography and time. Planned topics included:

• Pony Express vs Transcontinental Railroad – They followed similar paths around the same period. This is the one that got finished. See below for how to run it.

• Presidential travels of George Washington vs travels of some modern day President – Washington never left the US, but did make tours of the NE and South. It was a major investment at the time. Might interesting to see his Presidential travels concurrent with a recent president.

• Battle lines – find an interesting battle of the Revolution or Civil War and trace it out in time and geography

The system was designed to be a multi-user web site with people being able to create ‘replays’ privately and then share them publically. Was going to explore the whole social-thing with forums and likes.

Basically, it’s a javascript app that moves a symbol along a path segment based on a configurable speed. Some attributes of each segment are configurable: markers, labels, label styles, label offsets, detail text, destination lat/long, and a time code taken to reach the destination. Other attributes are set at the path level: color, width, symbol, and a bunch of default values for segments.

Example¶ ↑

To get a sense for what a GeoReplay might look like:

1. checkout the screenshot at public/pony_demo.jpg

or

1. checkout the tree from GitHub

2. edit lib/assets/javascripts/replay.js and change assetPath to ../app/assets/images

3. open public/pony_demo.html in a browser

The Rails application is pretty rough in its current framework state to play around with edit and display functionality.

Design¶ ↑

Libraries used: bootstrap, elabels3, Devise

The two main GeoReplay javascript applications in lib/assets/javascripts were written in flat HTML before being integrated into Rails, so they aren’t done in the “Rails Way”.

Replay paths

• index –> shows all public replays

• show –> uses replay.js to display the chosen replay

• new –> calls edit

• edit –> brings in the “replay_edit” javascript

• create –> called by edit to create an entry for the first time

• update –> called by edit to update an entry

• delete

Schema - only two objects completed

• replay

• user –> set up by the Devise user management GEM

Functionality still on the drawing board: Tags, Markers, Styles, Metrics

GeoReplay JSON Format¶ ↑

A sample JSON block that feeds replay.js and replay_edit.js

var replayData= {
"appName":"Pony Express vs Transcontinenal Railroad",
"appDescription":"Compares the paths of the Pony Express (1860) and the Transcontinental Railroad",
"author":"bretg",
"tags":"history, united states, 1800's",
"sources":"wikipedia articles",
"mapCenter":{"lat":39.5,"lng":-103.35},
"mapZoom":5,
"mapType":"roadmap",
"mapStyle":"normal",
"defaultLabelStyle":"labelStyle3",
"animLength":30,
"animSmoothness":20,
"labelStyles": [ {"name":"labelStyle1", "value":"border: 1px solid black; margin-top: 2px; background: #FFFF00; padding: 2px; font-size: 75%; font-weight:bold; white-space:nowrap;"} ,
{"name":"labelStyle2", "value":"border: 1px solid black; margin-top: 2px; background: #99FF66; padding: 2px; font-size: 75%; font-weight:bold; white-space:nowrap;"},
{"name":"labelStyle3", "value":"border: 1px solid black; margin-top: 2px; background: #00FFFF; padding: 2px; font-size: 75%; font-weight:bold; white-space:nowrap;"},
{"name":"labelStyle4", "value":"border: 1px solid black; margin-top: 2px; background: #FF9933; padding: 2px; font-size: 75%; font-weight:bold; white-space:nowrap;"},
{"name":"labelStyle5", "value":"border: 1px solid black; margin-top: 2px; background: #FF8181; padding: 2px; font-size: 75%; font-weight:bold; white-space:nowrap;"},
{"name":"labelStyle6", "value":"border: 1px solid black; margin-top: 2px; background: #E0E0EB; padding: 2px; font-size: 75%; font-weight:bold; white-space:nowrap;"}
],
"paths":[
{"pathName":"Pony Express","animSymbol":"circle",
"pathColor":"#BB0000","pathWidth":"2","defaultTextOffsetX":"10",
"defaultTextOffsetY":"-20","defaultMarkerImage":"markers/marker.png",
"points":[{"lat":"39.76633","lng":"-94.84497","text":"Pony Express, 1960 - 10 days","time":"1","details":"St. Joseph, MO", "markerImage":"markers/house_flag.png"},
{"lat":"39.82541","lng":"-97.62451","text":"","time":"11","details":"Marysville, KS"},
{"lat":"40.69730","lng":"-99.11865","text":"","time":"21","details":"Fort Kearny, NE"},
{"lat":"40.89691","lng":"-100.08545","text":"","time":"25","details":"Gothenburg, NE"},
{"lat":"42.16340","lng":"-104.54315","text":"","time":"40","details":"Fort Laramie, WY"},
{"lat":"42.86993","lng":"-106.32980","text":"","time":"50","details":"Fort Caspar, WY"},
{"lat":"41.32733","lng":"-110.38239","text":"","time":"65","details":"Fort Bridger, WY"},
{"lat":"40.79510","lng":"-111.89232","text":"","time":"75","details":"Salt Lake City, UT"},
{"lat":"39.17372","lng":"-119.76093","text":"","time":"100","details":"Carson City, NV"},
{"lat":"38.58950","lng":"-121.48699","text":"","time":"110","details":"Sacremento, CA - mail got on a steam boat"},
{"lat":"37.77506","lng":"-122.42203","text":"","time":"115","details":"San Francisco, CA", "markerImage":"markers/sailing.png"}]},
{"pathName":"Transcontinenal Railroad","animSymbol":"long-rect",
"pathColor":"#000000","pathWidth":"2","defaultTextOffsetX":"10","defaultTextOffsetY":"-20",
"defaultMarkerImage":"markers/marker_white.png",
"points":[{"lat":"41.25923","lng":"-95.87494","text":"Transcontinental Railroad, circa 1869 - around 7 days","time":"1","details":"Council Bluffs, IA - train cars were ferried across the river at this point until a bridge was built and the eastern line met up with the western", "markerImage":"markers/star-3.png"},
{"lat":"41.45199","lng":"-96.49567","text":"","time":"5","details":"Fremont, NE"},
{"lat":"41.45971","lng":"-97.37869","text":"","time":"10","details":"Columbus, NE"},
{"lat":"40.72046","lng":"-99.10423","text":"","time":"15","details":"Kearny, NE"},
{"lat":"41.14570","lng":"-100.75527","text":"","time":"20","details":"North Platte, NE"},
{"lat":"41.16321","lng":"-104.82588","text":"","time":"25","details":"Cheyenne, WY"},
{"lat":"41.34128","lng":"-105.59226","text":"","time":"30","details":"Laramie, WY"},
{"lat":"41.81203","lng":"-107.23888","text":"","time":"35","details":"Rawlins, WY"},
{"lat":"41.28904","lng":"-110.98181","text":"","time":"40","details":"Evanston, WY"},
{"lat":"41.20805","lng":"-111.96612","text":"","time":"45","details":"Ogden, UT"},
{"lat":"41.49543","lng":"-112.02981","text":"","time":"50","details":"Brigham, UT"},
{"lat":"41.59348","lng":"-112.53407","labelStyle":"labelStyle1","text":"Golden Spike","time":"54","details":"Promontory Summit, UT"},
{"lat":"40.83907","lng":"-115.78272","text":"","time":"58","details":"Elko, NV"},
{"lat":"41.04948","lng":"-117.70917","text":"","time":"62","details":"Winnemucca, NV"},
{"lat":"39.52902","lng":"-119.79025","text":"","time":"66","details":"Reno, NV"},
{"lat":"39.33407","lng":"-120.17986","text":"","time":"70","details":"Truckee, CA"},
{"lat":"38.61461","lng":"-121.50625","text":"","time":"75","details":"Sacremento, CA"},
{"lat":"37.78808","lng":"-122.44263","text":"","time":"80","details":"San Francisco, CA", "markerImage":"markers/sailing.png"}]}
]
};

• The animSymbol attribute can have these values: arrow, circle, box, diamond, wide-rect, long-rect

• A set of markerImage PNGs are provided in app/assets/images/markers.

• The labelStyle attribute of a line or point maps to the labelStyles array. These can be overridden in the JSON, but not currently in the interface.

To-Do¶ ↑

• Fix preview when editing a replay

• Add ability to see private replays on index page – fill the search div with ability to see your own rpelays with statusId=0

• Pre-populate a replay on initial start

• Search by tags, display available tags in a nav bar

• Like button

• Figure out how to track view metrics

• Create thumbnail maps

• Admin/editor screens

Bugs

• Map is messed up if the center and zoom aren’t set