Embed Cyclopath
From Cyclopath
Cyclopath provides a route-finding widget that can be embedded in other websites. The widget is implemented in Javascript and is flexible and easy to install.
Here is a screenshot of the widget in its default configuration. Custom color and pre-filled to/from addresses can be added.
Contents |
[edit] How to Add the Widget to Your Web Page
We explain how to add the widget to your web page by showing examples. Copy and paste the example code into your website to include the desired variation.
[edit] Simple Example
This example creates a simple widget with the default color and user-editable starting and destination addresses.
<!-- begin Cyclopath embed code -->
<script id="cyclopath_script"
type="text/javascript"
src="http://magic.cyclopath.org/route_widget.js">
</script>
<script type="text/javascript">
embedCyclopath("cp_widget");
</script>
<div id="cp_widget"/>
<!-- end Cyclopath embed code -->
Note: The <script> tag for route_widget.js must have the ID cyclopath_script in order for the widget to work.
[edit] Pre-Specified Destination
Here we add a pre-filled destination (that the user cannot edit).
<!-- begin Cyclopath embed code -->
<script id="cyclopath_script"
type="text/javascript"
src="http://magic.cyclopath.org/route_widget.js">
</script>
<script type="text/javascript">
embedCyclopath("cp_widget",
null,
["200 Union St SE", "Minneapolis", "55455"]);
</script>
<div id="cp_widget"/>
<!-- end Cyclopath embed code -->
[edit] Custom Color and Pre-Specified Destination
Here we add custom coloring to the widget.
<!-- begin Cyclopath embed code -->
<script id="cyclopath_script"
type="text/javascript"
src="http://magic.cyclopath.org/route_widget.js">
</script>
<script type="text/javascript">
embedCyclopath("cp_widget",
"#002266",
["200 Union St SE", "Minneapolis", "55455"]);
</script>
<div id="cp_widget"/>
<!-- end Cyclopath embed code -->
[edit] Complete Example
Here is an example that provides a simple but complete Web page with one embedded Cyclopath widget.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Cyclopath Route Widget Example</title>
</head>
<body>
<!-- begin Cyclopath embed code -->
<script id="cyclopath_script"
type="text/javascript"
src="http://magic.cyclopath.org/route_widget.js">
</script>
<script type="text/javascript">
embedCyclopath("cp_widget",
null,
["200 Union St SE", "Minneapolis", "55455"]);
</script>
<div id="cp_widget"/>
<!-- end Cyclopath embed code -->
</body>
</html>
[edit] embedCyclopath() Argument Reference
Note: if you want to use the default for one optional argument and specify a value for a later optional argument, you must specify "null" for the first one.
- divId
- Required. The id of the <div> tag that should contain the embedded widget.
- color
- Optional. Widget color, stored as a hexstring (e.g. '#abcdef') that modifies the background colors of the widget. If null or unspecified, the default Cyclopath background color is used.
- to
- Optional. A pre-filled destination for the route, which the user cannot modify. It is an array of 3 strings; the elements are address, city, and zip code (Minnesota is assumed), e.g. ['200 Union St SE', 'Minneapolis', '55455']). If this is null or unspecified, then the user is presented with text fields to enter any destination.
- from
- Optional. Like to, but for the starting location of the route.
- autoFind
- Optional. If true (the default), the route will be displayed immediately when Cyclopath loads. If false, Cyclopath's own route-finding dialog will be displayed with the values entered in the widget already inputted; this is useful if you want users to be able to customize their routing preferences before the route is found, but it makes the user experience slower and more complex.
[edit] Known Bugs
The following DOCTYPE types are known to work correctly: "-//IETF//DTD HTML//EN" and "-//W3C//DTD HTML 4.01//EN". There are small layout problems (text fields 2 px too large) when using transitional XHTML.
The widget has been tested in Firefox 3, Safari 3, Opera 9.6, Chrome, IE6 and IE7.
