Monday, May 14, 2007

How to build a route planner in 3 steps

  1. Learn about scriptaculous, and sortables
  2. Know that google maps allows you to input multiple to addresses
  3. Use a sortable list to quickly sort of a list of addresses into a route for your busy end users.

Here's the result.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="" xml:lang="en" lang="en">
<title>Route planning example</title>
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>
<style type="text/css">
#routes {
cursor: pointer;
<script type="text/javascript">
function buildLink(ol) {
var items = $A(ol.getElementsByTagName('li'));
var url = '';
var i = 0;

url += escape('from:');
items.each(function(item) {
if (i++ > 0) {
url += escape(' to:');
url += escape(item.textContent);

return url;

function updateLink() {
$('link').href = buildLink($('routes'));
<h1>Planning my Routes</h1>
<ol id="routes">
<li>38 Fife St, Klemzig, South Australia</li>
<li>132 Greenhill Rd, Unley, South Australia</li>
<li>18 Stephen St, Mt Barker, South Australia</li>
<li>19 Young St, Unley, South Australia</li>
<a id="link" href="">Show routes</a>
<script type="text/javascript">
Sortable.create("routes", {onChange: updateLink});
window.onload = updateLink;

If you were given a presorted list of your appointments over the day, this list lets you start doing them in less than a second.

1 comment:

Anonymous said...

This is a nice example of how small code can make a rich web application !!!

Will try this googlemaps example myself, thanks !