- Learn about scriptaculous, and sortables
- Know that google maps allows you to input multiple to addresses
- 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:
This is a nice example of how small code can make a rich web application !!!
Will try this googlemaps example myself, thanks !
Post a Comment