This site uses cookies to improve your experience and the quality of our services. By using this site you agree to its use of cookies. More information Hide
RouteViewer 3.0 plugin
Table of contents
Introduction
You can show your route with its POIs on your own site using the RouteViewer 3.0 plugin. There are two versions of this plugin.
- The free version can easily be added to your own website in a matter of minutes. For this free version, please refer to the section below.
- With the more advanced version, you can adapt the plugin to fit into your site's design, in layout, placement of the components, and color. If you are interested in this version, please contact sales[at-r.].
Free RouteViewer plugin
Via the RouteYou website
- On www.routeyou.com, surf to the route you want to show on your website.
- Click
Share.
- Click Embed.
- Copy the code.
- Paste this code into the HTML of your own website.
Getting started
This version is iframe-based. To add it to your site, add the following code where you want the plugin to appear:
<iframe src="//plugin.routeyou.com/routeviewer/free/?language=en" width="800" height="500"></iframe>
You can change the iframe's width and height to suit your website.
Configuring the plugin
The parameters should be passed in the URL of the iframe. Numbers, strings and booleans can be passed in a simple key=value pattern. Complex values can be passed as JSON encoded strings (remember that these will then need to be URL-encoded as well).
You can find the list of parameters in the "Parameters" section. Note that for the free version, not all parameters are available. The available parameters are marked with a *.
Examples
Simple viewer
The example below will show you the route 'Walking in Ghent'. Both the interface and the route's data will be in English.
<iframe src="//plugin.routeyou.com/routeviewer/free/?language=en¶ms.route.id=44" width="800" height="500"></iframe>
Advanced version
Getting started
To add the advanced version of the plugin to your site, two pieces of code need to be added. First, you need to provide HTML div elements where the RouteViewer components will be placed. You can set their id's to any name you prefer, but make sure they are unique. You can position these divs in any way that fits your site design. The example code below will put the title first, then the profile above the map and the detail component (which will contain a.o. the route's and POIs' description and media) on the right of both the profile and the map. Except for the map, you can omit any component by not creating a div for it and not passing a div id in the configuration object.

<div id="routeYouRouteViewerTitle"></div>
<div id="routeYouRouteViewerDetail" style="margin-left: 10px; width: 300px; float: right;"></div>
<div id="routeYouRouteViewerProfile"></div>
<div id="routeYouRouteViewerMap"></div>
Second, add the JavaScript code that launches the plugin. To minimise the load time of your page, it is best to put this code as far down the page as possible.
<script type="text/javascript" src="//plugin.routeyou.com/routeviewer/3.0.js"></script>
<script type="text/javascript">
RTY.RouteViewer.load({
'token': '<your RouteYou web service token, see below>',
'language': '<your language, see below>',
'title.div': 'routeYouRouteViewerTitle',
'profile.div': 'routeYouRouteViewerProfile',
'map.div': 'routeYouRouteViewerMap',
'detail.div': 'routeYouRouteViewerDetail'
});
</script>
Configuring the plugin
To further configure the plugin, add parameters from the "Parameters" section below as needed to the JavaScript object. Some important guidelines:
- Make sure that each line ends with a comma, except the last line.
- Do not put quotes around numbers (integer or decimal) and boolean values (i.e. true and false).
Examples
Simple viewer
The example below will show you the route 'Walking in Ghent'. Both the interface and the route's data will be in English.
<script type="text/javascript" src="//plugin.routeyou.com/routeviewer/3.0.js"></script>
<script type="text/javascript">
RTY.RouteViewer.load({
'token': '<your RouteYou web service token>',
'language': 'en',
'title.div': 'routeYouRouteViewerTitle',
'profile.div': 'routeYouRouteViewerProfile',
'map.div': 'routeYouRouteViewerMap',
'detail.div': 'routeYouRouteViewerDetail',
'params.route.id': 44
});
</script>
Parameters
The parameters marked with a * are available for both the free and the advanced version, the others are only available for the advanced version.
General parameters
- token
Your RouteYou web service token. Do not put your web service key here. Consult this topic for more information on how to generate a token with your key.
Required (unless key is provided).
- key
Your RouteYou web service key. You can put your web service key here if you cannot generate a server side web service token, but keep in mind that it is safer to use the token method, and your key may be blocked if it is abused by someone else.
Required (unless token is provided).
- language *
ISO code of the interface language.
Possible values: 'en', 'nl', 'fr', 'de', 'es', 'it', 'ca'. Optional. Default: 'en'.
- unit.system
The unit system to use. When using 'metric', all distances will be displayed in meters or kilometers; when using 'imperial', all distances will be displayed in feet or miles.
Possible values: 'metric', 'imperial'. Optional. Default: 'metric'.
Layout and behaviour parameters
The plugin adapts to the height of the user's browser window. When resizing, the map takes the height of both the title and the profile into account, while the detail component only takes the height of the title component into account. The following parameters influence this behaviour.
- layout.enable
Whether or not to adjust to the browser window height. If you disable this, you will need to set the height of the map and detail divs explicitly.
Possible values: true, false. Optional. Default: true.
- layout.map.height.remainder
The space to leave when making the map fit the browser window height. Setting this to zero will make the map fit the available vertical space exactly (not recommended). Setting it to anything higher will leave room above and/or below the map.
Possible values: any integer equal to or larger than 0. Optional. Default: 100.
- layout.map.height.minimum
The minimal height of the map. The map's height will never be smaller than this, even when the browser window height gets smaller.
Possible values: any integer larger than 0. Optional. Default: 200.
- layout.detail.height.remainder
The space to leave when making the route/POI detail component fit the browser window height.
Possible values: any integer equal to or larger than 0. Optional. Default: 100.
- layout.detail.height.minimum
The minimal height of the list. The route/POI detail component's height will never be smaller than this, even when the browser window height gets smaller.
Possible values: any integer larger than 0. Optional. Default: 200.
The following parameters change the style (color scheme and related properties) of all components.
- style.line.color
The color of the lines, if nothing more specific is set (route, elevation, axes, ...).
Possible values: any valid hexadecimal color, starting with a #. Optional. Default: '#644c2a'.
- style.line.width
The width of the lines, if nothing more specific is set (route, elevation, ...).
Possible values: any integer larger than 0. Optional. Default: 3.
- style.line.opacity
The opacity of the lines, if nothing more specific is set (route, elevation, ...).
Possible values: any decimal number between 0 and 1, inclusive. Optional. Default: 1.
- style.fill.color
The color of the elevation graph's fill area, if nothing more specific is set.
Possible values: any valid hexadecimal color, starting with a #. Optional. Default: '#647c00'.
- style.fill.opacity
The opacity of the elevation graph's fill area, if nothing more specific is set.
Possible values: any decimal number between 0 and 1, inclusive. Optional. Default: 0.4.
The following parameters change the behaviour of the title component.
- title.div
The id of the HTML div element on which to place the title.
Required.
The following parameters change the behaviour of the profile component.
- profile.div
The id of the HTML div element on which to place the profile.
Required.
- profile.show.pois
If true, the route's POIs will be shown on the profile.
Possible values: true, false. Optional. Default: true.
- profile.route.show.begin
If true, the route's first point will be shown on the profile.
Possible values: true, false. Optional. Default: true.
- profile.route.show.end
If true, the route's last point will be shown on the profile.
Possible values: true, false. Optional. Default: true.
The following parameters change the behaviour of the map component.
- map.div
The id of the HTML div element on which to place the map.
Required.
- map.api.key
The Google API key with which to load the Google Maps API. While the plugin may work without it, this is not recommended. Consult this topic for more information on the Google API key and how to obtain one.
Possible values: any valid Google API key. Required.
- map.type
The initial map type.
Possible values: 'roadmap', 'satellite'. Optional. Default: 'roadmap'.
- map.show.pois
If true, the route's POIs will be shown on the map.
Possible values: true, false. Optional. Default: true.
- map.route.show.begin
If true, the route's first point will be shown on the map.
Possible values: true, false. Optional. Default: true.
- map.route.show.end
If true, the route's last point will be shown on the map.
Possible values: true, false. Optional. Default: true.
- map.route.line.normal.roadmap.color
The color of the route line, when it is shown on a map with type 'roadmap' (including the 'terrain' overlay).
Possible values: any valid hexadecimal color, starting with a #. Optional. Default: the value of style.line.color.
- map.route.line.normal.satellite.color
The color of the route line, when it is shown on a map with type 'satellite' (including the 'hybrid' overlay).
Possible values: any valid hexadecimal color, starting with a #. Optional. Default: '#ff6000'.
The following parameters change the behaviour of the detail component.
- detail.div
The id of the HTML div element on which to place the detail component.
Required.
- detail.show.downloadButton
If true, the download button will be shown on the detail component, above the route description.
Possible values: true, false. Optional. Default: true.
- detail.route.show.name
If true, the route's name will be shown on the detail component, above the route description.
Possible values: true, false. Optional. Default: true.
- detail.route.show.description
If true, the route's description will be shown on the detail component.
Possible values: true, false. Optional. Default: true.
View parameters
You can decide what to show with the following parameters.
- params.route.id *
The id of the route to show.
Possible values: any integer that is a valid route id. Required.
- params.language *
If set, show the route and POIs in this language, regardless of the interface language. If omitted, the route and POIs will be shown in the interface language (if available).
Possible values: an ISO code of a language in which the route is available. Optional.
Link parameters
By default, the download button links back to the RouteYou website. The following parameters influence this behaviour.
- route.download.link
The URL users are directed to when clicking on the route download button. Put the string "%id%" (without the quotes) in this URL, it will be replaced with the route's id.
Optional.
- route.download.target
The URL target for the route download button.
Possible values: any valid frame name, including '_blank', '_top', '_self', ... Optional. Default: '_top'.
Compatibility
The RouteViewer 3.0 plugin is compatible with all major browsers. However, to ensure full compatibility, it is vital that the pages on which you place the plugin begin with a valid DOCTYPE, for example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html ...
Plans & pricing
For a list of the RouteYou functionalities per type of account, take a look at the RouteYou Functionality Overview per account type.