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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Route planning example</title>
<script src="http://script.aculo.us/prototype.js" type="text/javascript"></script>
<script src="http://script.aculo.us/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
#routes {
cursor: pointer;
}
</style>
<script type="text/javascript">
function buildLink(ol) {
var items = $A(ol.getElementsByTagName('li'));
var url = 'http://maps.google.com/maps?q=';
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'));
}
</script>
</head>
<body>
<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>
</ol>
<a id="link" href="">Show routes</a>
<script type="text/javascript">
Sortable.create("routes", {onChange: updateLink});
window.onload = updateLink;
</script>
</body>
</html>


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 !