Example Dynamic Web Site¶
The CitySpeed distribution includes a sample JavaScript-powered web site to display collected data using Google Maps and in tabular form. You can see an example here: http://infinitemonkeycorps.net/projects/cityspeed/
The (X)HTML, JavaScript, and CSS files can be found in the www/ directory of the source distribution. They expect to find the .json data files in a subdirectory data/ on your web site. If you don’t want to generate your own, you can steal some sample data. The web pages don’t require any special server-side support; all the action happens client-side in JavaScript.
- index.html
- The main page shows a color-coded Google Map and tabulates the stats for each city. It gets its data from data/citystats.json via AJAX.
- city.html
- The city detail page; shows a Google Map with the starting and ending points for that city. The city file name is passed as a URL parameter and the corresponding .json files are retrieved and displayed via AJAX. Shows a table with the addresses of all starting and ending points.
- cityspeed.css
- The Cascading Style Sheet that makes the whole thing look pretty.
- cityspeed.js
- The JavaScript code for index.html and city.html. Handles retrieving and parsing the JSON data, as well as populating the maps and tables. This code is LAGPLv3 licensed like the Python source.
- json2.js
- Douglas Crockford’s JSON parser from http://json.org/js.html. Incidentally, all the CitySpeed JavaScript code (cityspeed.js) is JSLint Good Parts-clean; JSLint rocks. This code is in the public domain.
- ajaxCaller.js, util.js
- AjaxCaller is an XMLHttpRequest wrapper from Ajax Design Patterns, copyright by Michael Mahemoff. It’s been slightly patched to fix a bug and you’ll need to use this patched version. This code is Creative Commons Attribution Noncommercial Share Alike 2.5 licensed.
- sorttable.js
- sorttable is Stuart Langridge’s lovely dynamic table sorting script. It’s X11 licensed.
