RouteViewer 3.0 plugin
Inhoudstafel
- Introduction
- Free RouteViewer plugin
- Basic version (iframe)
- Advanced version (JavaScript)
- Parameters
- Compatibility
- Plans & pricing
Introduction
You can show your route with its places of interest on your own site using the RouteViewer 3.0 plugin. There are three 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.
- The basic version works the same way as the free version, but allows for more customization. If you are interested in this version, please contact sales[at-r.]. This is part of a PRO and ENTERPRISE product.
- With the advanced version, you can adapt the plugin to fit your site's design, in layout, placement of the components, color, fonts, mobile friendliness, ... 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 the code into the HTML of your own website, adjust the width and height if necessary.
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" frameborder="0" allowfullscreen></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. For the free version, not all parameters are available. The available parameters are marked with .
Example
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&params.route.id=44" width="800" height="500" frameborder="0" allowfullscreen></iframe>
We have created an interactive demo where you can see above code in action and can experiment with the settings, feel free to play around and get familiar with the parameters.
Basic version (iframe)
Getting started
This is part of a PRO and ENTERPRISE product, and you need a key to make use of it.
This version is iframe-based and works the same way as the free version. To add it to your site, add the following code where you want the plugin to appear:
<iframe src="//plugin.routeyou.com/routeviewer/basic/?token=<your RouteYou web service token, see below>&language=en" width="800" height="500" frameborder="0" allowfullscreen></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. Some parameters are not applicable to this version. The available parameters are marked with .
We've created a interactive demo to illustrate the above code. Feel free to change the parameters and inspect how that impacts the site. Happy with the result? Copy/paste the code in your website/blog.
For demonstration purposes, we have used a RouteYou test key in stead of working with a server side generated token. This is not to be used in production. For an explanation on token and keys, check this topic token.
Examples
Very simple, using the defaults
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/basic/?key=25578206faf6c7cd92fc96526177379d&language=en&params.route.id=44" width="800" height="500" frameborder="0" allowfullscreen></iframe>
More extensive example
The next example customises the look and feel, check out the interactive demo and description below
Customisation | Code |
---|---|
Hide Route Details pane | tabPane.position=null |
Change the color of the route The route is drawn by painting a slim line over a wide line. |
|
For satellite images, it's often better to pick a lighter color as the sides of the line of the route. | map.route.line.normal.satellite.color=%23FFFFFF |
Here the colors for the height profile are defined | style.fill.color=%23eb9334 style.fill.opacity=0.73 style.line.width= style.line.color=%23777777 |
Defining the available map types Satellite = Google imagery, roadmap = Google maps, OSM=OpenStreetMap, terrain= Google terrain model |
map.availableTypes=%5B%22satellite%22,%22roadmap%22,%22osm%22,%22terrain%22%5D |
Defining the available map overlays Hybrid overlay shows labels on top of Google Satellite. |
map.overlays=%5B%22hybrid%22,%22terrain%22%5D |
Pick the default maptype | map.type=satellite |
Adding navigation
Navigation functionality is also provided in this great plugin. Simply add following parameters to enable
Customisation | Code |
---|---|
Enable navigation |
|
Check it out in this interactive demo.
Advanced version (JavaScript)
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. 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" style="margin-bottom: 10px;"></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>
Tabs
You can also show a tabbed version of the RouteViewer plugin. Use the code below for a similar layout as above, but with added tabs for download and lodging.
<div id="routeYouRouteViewerTitle"></div> <div style="margin-left: 10px; width: 300px; float: right;"> <div id="routeYouRouteViewerTabButtons" style="margin-bottom: 10px;"></div> <div id="routeYouRouteViewerTabPane"></div> </div> <div id="routeYouRouteViewerProfile" style="margin-bottom: 10px;"></div> <div id="routeYouRouteViewerMap"></div>
<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', 'tabButtons.div': 'routeYouRouteViewerTabButtons', 'tabPane.div': 'routeYouRouteViewerTabPane', 'tabPane.components': ['detail', 'download', 'lodging'] }); </script>
Route planner
By adding a few more settings to the tabbed version of the RouteViewer plugin, you can turn it into a full-fledged route planner. Use the code below for a similar layout as above.
<div style="margin-left: 10px; width: 300px; float: right;"> <div id="routeYouRouteViewerTabButtons" style="margin-bottom: 10px;"></div> <div id="routeYouRouteViewerTabPane"></div> </div> <div id="routeYouRouteViewerProfile" style="margin-bottom: 10px;"></div> <div id="routeYouRouteViewerMap"></div>
<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>', 'profile.div': 'routeYouRouteViewerProfile', 'map.div': 'routeYouRouteViewerMap', 'tabButtons.div': 'routeYouRouteViewerTabButtons', 'tabPane.div': 'routeYouRouteViewerTabPane', 'tabPane.components': ['planner', 'detail', 'download'], 'map.show.undoControl': true, 'map.show.saveControl': true, 'map.show.routeStatistics': true, 'planner.enable': true }); </script>
Configuring the plugin
To further configure the plugin, add parameters from the "Parameters" section below as needed to the JavaScript object. Some parameters are not applicable to this version. The available parameters are marked with .
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).
Styling the plugin
The plugin will automatically use the CSS of the surrounding page, which means fonts, colors and most other styling will match your website. Some tips and important guidelines:
- If possible, set a default text color and font on your
<body>
element, this guarantees that all elements will at minimum use that styling. - Never target specific elements of the plugin through their class names or through pseudo-classes such as first-child or nth-child, as elements' class names, order and place in the DOM hierarchy may change without notice, breaking your implementation. There are many parameters available to hide certain elements and to change the order of some elements (see below).
- If you need to apply styling specifically to (parts of) the plugin, target only semantically appropriate tags (h2, p, ...) and keep it as general as possible.
Mobile-friendly
The plugin can be made responsive (different settings on small and large screens) by setting a responsive breakpoint with the layout.breakpoints parameter. Contact sales[at-r.] for more information.
Example
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
Some parameters are not available in all versions. Each parameter is marked with the version(s) in which it is available:
- Free iframe plugin
- Basic iframe plugin
- Advanced JavaScript plugin
General
- 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
Lowercase 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'.
Content
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 places of interest in this language, regardless of the interface language. If omitted, the route and places of interest will be shown in the interface language (if available).
Possible values: an ISO code of a language in which the route is available. Optional. Default: null.
Layout and behaviour
The plugin adapts to the height of the user's browser window or the iframe. When resizing, the map takes the height of the title and profile into account, while the detail, statistics, download, comments and lodging components take the height of the tab buttons and title into account. The following parameters influence this behaviour.
- tabPane.position
The position of the route info. Setting this to null will hide the info column, including all tabs. Setting this to 'left' or 'right' will put the info column on the left or right of the map.
Possible values: null, 'left', 'right'. Optional. Default: 'right'. - layout.breakpoints
A list of responsive breakpoints. Different settings can be applied when the screen width crosses such a breakpoint. Contact sales[at-r.] for more information.
Possible values: a list of integers equal to or larger than 0. Optional. Default: [0]. - layout.map.height.enable
Whether or not to adjust the map's height to the browser window height. If you disable this, you will need to set the height of the map div explicitly.
Possible values: true, false. Optional. Default: true. - 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.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. 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.subtract.tabButtons
Whether or not to take the height of the tab buttons into account when calculating the map's height.
Possible values: true, false. Optional. Default: false. - layout.map.height.subtract.title
Whether or not to take the height of the title into account when calculating the map's height.
Possible values: true, false. Optional. Default: true. - layout.map.height.subtract.profile
Whether or not to take the height of the profile into account when calculating the map's height.
Possible values: true, false. Optional. Default: true. - layout.detail.height.enable
Whether or not to adjust the route/POI detail component's height to the browser window height.
Possible values: true, false. Optional. Default: true. - layout.detail.height.minimum
The minimal height of the route/POI detail component. The 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. - layout.detail.height.remainder
The space to leave when making the route/POI detail component fit the browser window height. Setting this to zero will make the component fit the available vertical space exactly. Setting it to anything higher will leave room above and/or below the component.
Possible values: any integer equal to or larger than 0. Optional. Default: 100. - layout.detail.height.subtract.tabButtons
Whether or not to take the height of the tab buttons into account when calculating the route/POI detail component's height.
Possible values: true, false. Optional. Default: true. - layout.detail.height.subtract.title
Whether or not to take the height of the title into account when calculating the route/POI detail component's height.
Possible values: true, false. Optional. Default: true. - layout.detail.height.subtract.profile
Whether or not to take the height of the profile into account when calculating the route/POI detail component's height.
Possible values: true, false. Optional. Default: false. - layout.statistics.height.enable
Whether or not to adjust the statistics component's height to the browser window height.
Possible values: true, false. Optional. Default: true. - layout.statistics.height.minimum
The minimal height of the statistics component. The 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. - layout.statistics.height.remainder
The space to leave when making the statistics component fit the browser window height. Setting this to zero will make the component fit the available vertical space exactly. Setting it to anything higher will leave room above and/or below the component.
Possible values: any integer equal to or larger than 0. Optional. Default: 100. - layout.statistics.height.subtract.tabButtons
Whether or not to take the height of the tab buttons into account when calculating the statistics component's height.
Possible values: true, false. Optional. Default: true. - layout.statistics.height.subtract.title
Whether or not to take the height of the title into account when calculating the statistics component's height.
Possible values: true, false. Optional. Default: true. - layout.statistics.height.subtract.profile
Whether or not to take the height of the profile into account when calculating the statistics component's height.
Possible values: true, false. Optional. Default: false. - layout.download.height.enable
Whether or not to adjust the download component's height to the browser window height.
Possible values: true, false. Optional. Default: true. - layout.download.height.minimum
The minimal height of the download component. The 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. - layout.download.height.remainder
The space to leave when making the download component fit the browser window height. Setting this to zero will make the component fit the available vertical space exactly. Setting it to anything higher will leave room above and/or below the component.
Possible values: any integer equal to or larger than 0. Optional. Default: 100. - layout.download.height.subtract.tabButtons
Whether or not to take the height of the tab buttons into account when calculating the download component's height.
Possible values: true, false. Optional. Default: true. - layout.download.height.subtract.title
Whether or not to take the height of the title into account when calculating the download component's height.
Possible values: true, false. Optional. Default: true. - layout.download.height.subtract.profile
Whether or not to take the height of the profile into account when calculating the download component's height.
Possible values: true, false. Optional. Default: false. - layout.comments.height.enable
Whether or not to adjust the comments component's height to the browser window height.
Possible values: true, false. Optional. Default: true. - layout.comments.height.minimum
The minimal height of the comments component. The 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. - layout.comments.height.remainder
The space to leave when making the comments component fit the browser window height. Setting this to zero will make the component fit the available vertical space exactly. Setting it to anything higher will leave room above and/or below the component.
Possible values: any integer equal to or larger than 0. Optional. Default: 100. - layout.comments.height.subtract.tabButtons
Whether or not to take the height of the tab buttons into account when calculating the comments component's height.
Possible values: true, false. Optional. Default: true. - layout.comments.height.subtract.title
Whether or not to take the height of the title into account when calculating the comments component's height.
Possible values: true, false. Optional. Default: true. - layout.comments.height.subtract.profile
Whether or not to take the height of the profile into account when calculating the comments component's height.
Possible values: true, false. Optional. Default: false. - layout.lodging.height.enable
Whether or not to adjust the lodging component's height to the browser window height.
Possible values: true, false. Optional. Default: true. - layout.lodging.height.minimum
The minimal height of the lodging component. The 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. - layout.lodging.height.remainder
The space to leave when making the lodging component fit the browser window height. Setting this to zero will make the component fit the available vertical space exactly. Setting it to anything higher will leave room above and/or below the component.
Possible values: any integer equal to or larger than 0. Optional. Default: 100. - layout.lodging.height.subtract.tabButtons
Whether or not to take the height of the tab buttons into account when calculating the lodging component's height.
Possible values: true, false. Optional. Default: true. - layout.lodging.height.subtract.title
Whether or not to take the height of the title into account when calculating the lodging component's height.
Possible values: true, false. Optional. Default: true. - layout.lodging.height.subtract.profile
Whether or not to take the height of the profile into account when calculating the lodging component's height.
Possible values: true, false. Optional. Default: false.
Colors and more
The following parameters change the style (color scheme and related properties) of all components.
- style.line.color
The color of lines, if nothing more specific is set.
Possible values: any valid hexadecimal color, starting with a #. Optional. Default: '#644c2a'. - style.line.width
The width of lines, if nothing more specific is set.
Possible values: any integer larger than 0. Optional. Default: 3. - style.line.opacity
The opacity of lines, if nothing more specific is set.
Possible values: any decimal number between 0 and 1, inclusive. Optional. Default: 1. - style.fill.color
The color of fill areas, if nothing more specific is set.
Possible values: any valid hexadecimal color, starting with a #. Optional. Default: '#647c00'. - style.fill.opacity
The opacity of fill areas, if nothing more specific is set.
Possible values: any decimal number between 0 and 1, inclusive. Optional. Default: 0.4.
Media
The following parameters change the behaviour of the route and place of interest media.
- media.position
The position of the media in relation to the description. Setting this to null will put the media above the description. Setting this to 'left' or 'right' will put the media on the left or right of the description, allowing the description to flow around it.
Possible values: null, 'left', 'right'. Optional. Default: null. - media.width
The width of the image or video. Setting this to null will make the image fill the available horizontal space (or half of that when the position is set to 'left' or 'right').
Possible values: any integer larger than 0, or null. Optional. Default: null. - media.height
The height of the image or video.
Possible values: any integer larger than 0. Optional. Default: 250.
Title component
- title.visible
If true, the title will be shown above the other components.
Possible values: true, false. Optional. Default: true. - title.div
The HTML div element on which to place the title.
Possible values: any valid div id, a DOM element, or null. Optional. Default: null.
Profile component
- profile.div
The HTML div element on which to place the profile.
Possible values: any valid div id, a DOM element, or null. Optional. Default: null. - profile.show.profile
If true, the profile will be visible when the plugin loads.
Possible values: true, false. Optional. Default: true. - profile.show.pois
If true, the route's places of interest will be shown on the profile (except when the lodging component is the active tab).
Possible values: true, false. Optional. Default: true. - profile.show.lodgings
If true, the lodgings will be shown on the profile when the lodging list is visible.
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.viaPoints
If true, the route's intermediate points will be shown on the profile (only applies to the route planner).
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.
Map component
- map.div
The HTML div element on which to place the map.
Possible values: any valid div id, a DOM element, or null. Optional. Default: null. - map.show.profileControl
If true, the button to show or hide the route profile will be shown on the map.
Possible values: true, false. Optional. Default: false. - map.show.startControl
If true, the start/stop button to begin/end navigation will be shown on the map.
Possible values: true, false. Optional. Default: false. - map.show.instruction
If true, instructions will be shown over the map while navigating.
Possible values: true, false. Optional. Default: false. - map.show.positionData
If true, position related data such as speed will be shown over the map while navigating.
Possible values: true, false. Optional. Default: false. - map.show.undoControl
If true, the route planner undo/redo buttons will be shown on the map.
Possible values: true, false. Optional. Default: false. - map.show.saveControl
If true, the route planner save button will be shown on the map.
Possible values: true, false. Optional. Default: false. - map.show.routeStatistics
If true, the route's length and ascent will be shown on the map.
Possible values: true, false. Optional. Default: false. - map.api.key
The Google API key with which to load the Google Maps API. Google Maps layers will only be available if this is set. Consult this topic for more information on the Google API key and how to obtain one.
Possible values: any valid Google API key. Optional. Default: null. - map.availableTypes
A list of map base layers and overlays the user can choose from.
Possible values: a JavaScript array containing one or more of the map layer names listed below,['
(layer name)', '
(layer name)',
(...)]
. Optional. Default: ['roadmap', 'satellite', 'osm', 'terrain', 'hybrid', 'satellite45'].
Base layer names:- osm
OpenStreetMap. - roadmap
Google Maps roadmap. Only available with a Google API key. - satellite
Google Maps satellite. Only available with a Google API key.
- terrain
Google Maps terrain overlay (on the roadmap base layer). Only available with a Google API key. - hybrid
Show labels on the Google Maps satellite base layer. Only available with a Google API key. - satellite45
Show tilted imagery on the Google Maps satellite base layer. Only available with a Google API key.
- osm
- map.type
The initial map type.
Possible values: one of the base layer names listed above. Optional. Default: 'roadmap' if the Google API key is set, 'osm' otherwise. - map.overlays
The initial map overlays.
Possible values: a JavaScript array containing one or more of the overlay names listed above,['
(overlay name)', '
(overlay name)',
(...)]
. Optional. Default: ['hybrid']. - map.center
The initial center of the map. If both center and bounds (see below) are set, the bounds will take precedence.
Possible values: a JavaScript object of the form{ lat:
(decimal number), lon:
(decimal number)}
. Optional. Default: null. - map.zoom
The initial zoom level of the map. This can be used together with map.center to define the initial area to show on the map.
Possible values: any integer between 0 and 18, inclusive. Optional. Default: 1. - map.bounds
The initial area to show on the map. If both center and bounds are set to null, the map will pan and zoom to the optimal bounds for the search parameters.
Possible values: a JavaScript object of the form{ min: { lat:
(decimal number), lon:
(decimal number)}, max: { lat:
(decimal number), lon:
(decimal number)} }
. Optional. Default: null. - map.show.pois
If true, the route's places of interest will be shown on the map (except when the lodging component is the active tab).
Possible values: true, false. Optional. Default: true. - map.show.lodgings
If true, the lodgings will be shown on the map when the lodging list is visible.
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.viaPoints
If true, the route's intermediate points will be shown on the map (only applies to the route planner).
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.standard.color
The default color of the route line when shown on a map.
Possible values: any valid hexadecimal color, starting with a #. Optional. Default: the value of style.line.color. - map.route.line.normal.standard.width
The default width of the route line when shown on a map.
Possible values: any integer larger than 0. Optional. Default: the value of style.line.width. - map.route.line.normal.standard.opacity
The default opacity of the route line when shown on a map.
Possible values: any decimal number between 0 and 1, inclusive. Optional. Default: 0.9. - map.route.line.normal.standard.fill.color
The default color of the route line's fill when shown on a map. Combine with the next parameter to create a two-toned line.
Possible values: any valid hexadecimal color, starting with a #. Optional. Default: the value of style.fill.color. - map.route.line.normal.standard.fill.width
The default width of the route line's fill when shown on a map.
Possible values: any integer equal to or larger than 0. Optional. Default: 0. - map.route.line.normal.standard.fill.opacity
The default opacity of the route line's fill when shown on a map.
Possible values: any decimal number between 0 and 1, inclusive. Optional. Default: 0.9. - map.route.line.normal.standard.arrow.color
The default color of the arrows on the route line when shown on a map.
Possible values: any valid hexadecimal color, starting with a #. Optional. Default: the value of style.line.color. - map.route.line.normal.standard.arrow.width
The default width of the arrows on the route line when shown on a map.
Possible values: any integer larger than 0. Optional. Default: the value of style.line.width. - map.route.line.normal.standard.arrow.opacity
The default opacity of the arrows on the route line when shown on a map.
Possible values: any decimal number between 0 and 1, inclusive. Optional. Default: 0.9. - map.route.line.normal.standard.arrow.fill.color
The default color of the route line arrows' fill when shown on a map. Combine with the next parameter to create a two-toned arrow.
Possible values: any valid hexadecimal color, starting with a #. Optional. Default: the value of style.fill.color. - map.route.line.normal.standard.arrow.fill.width
The default width of the route line arrows' fill when shown on a map.
Possible values: any integer equal to or larger than 0. Optional. Default: 0. - map.route.line.normal.standard.arrow.fill.opacity
The default opacity of the route line arrows' fill when shown on a map.
Possible values: any decimal number between 0 and 1, inclusive. Optional. Default: 0.9. - 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.roadmap.arrow.color
The color of the arrows on 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'. - map.route.line.normal.satellite.arrow.color
The color of the arrows on 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'.
Detail component
- detail.div
The HTML div element on which to place the detail component.
Possible values: any valid div id, a DOM element, or null. Optional. Default: null. - detail.show.header
If true, the 'Route details' header will be shown on the detail component.
Possible values: true, false. Optional. Default: true. - detail.show.downloadButton
If true, the download button will be shown on the detail component.
Possible values: true, false. Optional. Default: true. - detail.route.show.name
If true, the route's name will be shown on the detail component.
Possible values: true, false. Optional. Default: true. - detail.route.show.typeIcon
If true, the route's type icon will be shown on the detail component.
Possible values: true, false. Optional. Default: false. - detail.route.show.media
If true, the route's media will be shown on the detail component.
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. - detail.route.show.begin
If true, the route's begin address will be shown on the detail component.
Possible values: true, false. Optional. Default: true. - detail.route.show.end
If true, the route's end address will be shown on the detail component.
Possible values: true, false. Optional. Default: true. - detail.poi.show.name
If true, each place of interest's name will be shown on the detail component.
Possible values: true, false. Optional. Default: true. - detail.poi.show.typeIcon
If true, each place of interest's type icon will be shown on the detail component.
Possible values: true, false. Optional. Default: true. - detail.poi.show.media
If true, each place of interest's media will be shown on the detail component.
Possible values: true, false. Optional. Default: true. - detail.poi.show.description
If true, each place of interest's description will be shown on the detail component.
Possible values: true, false. Optional. Default: true.
Statistics component
- statistics.div
The HTML div element on which to place the statistics component.
Possible values: any valid div id, a DOM element, or null. Optional. Default: null. - statistics.show.header
If true, the 'Statistics' header will be shown on the statistics component.
Possible values: true, false. Optional. Default: true.
Download component
- download.div
The HTML div element on which to place the download component.
Possible values: any valid div id, a DOM element, or null. Optional. Default: null. - download.show.header
If true, the 'Download • Print' header will be shown on the download component.
Possible values: true, false. Optional. Default: true.
Comments component
- comments.div
The HTML div element on which to place the comments component.
Possible values: any valid div id, a DOM element, or null. Optional. Default: null. - comments.show.header
If true, the 'Comments' header will be shown on the comments component.
Possible values: true, false. Optional. Default: true.
Lodging component
- lodging.div
The HTML div element on which to place the lodging component.
Possible values: any valid div id, a DOM element, or null. Optional. Default: null. - lodging.show.header
If true, the 'Lodging' header will be shown on the lodging component.
Possible values: true, false. Optional. Default: true. - lodging.params.limit
The maximum number of lodgings to display.
Possible values: any integer larger than 0. Optional. Default: 10.
Planner component
- planner.div
The HTML div element on which to place the planner component.
Possible values: any valid div id, a DOM element, or null. Optional. Default: null. - planner.show.header
If true, the 'Plan your route' header will be shown on the planner component.
Possible values: true, false. Optional. Default: true. - planner.enable
If true, the plugin will be shown in planner mode.
Possible values: true, false. Optional. Default: true. - planner.params.route.type.id
The route's type id.
Possible values: any integer larger than 0. Optional. Default: null. - planner.params.route.roundTrip
If true, the plugin will suggest a round trip, otherwise it will route from A to B.
Possible values: true, false. Optional. Default: false. - planner.params.route.begin
The route's starting coordinates.
Possible values: a JavaScript object of the form{ lat:
(decimal number), lon:
(decimal number)}
. Optional. Default: null. - planner.params.route.viaPoints
A list of intermediate coordinates for the route. Only applies to A to B mode.
Possible values: an array of JavaScript objects of the form{ lat:
(decimal number), lon:
(decimal number)}
. Optional. Default: []. - planner.params.route.end
The route's final coordinates. Only applies to A to B mode.
Possible values: a JavaScript object of the form{ lat:
(decimal number), lon:
(decimal number)}
. Optional. Default: null. - planner.params.route.length
The route's intended length. Only applies to round trip mode.
Possible values: any integer equal to or larger than 0. Optional. Default: null. - planner.params.route.heading
The route's intended heading. Only applies to round trip mode.
Possible values: any integer between 0 and 360, inclusive. Optional. Default: null.
Tabs
- tabButtons.div
The HTML div element on which to place the tab buttons.
Possible values: any valid div id, a DOM element, or null. Optional. Default: null. - tabPane.div
The HTML div element on which to place the tabbed components.
Possible values: any valid div id, a DOM element, or null. Optional. Default: null. - tabPane.components
A list of components that should be shown as tabs.
Possible values: a JavaScript array containing one or more of the component names listed below,['
(component name)', '
(component name)',
(...)]
. Optional. Default: ['detail', 'statistics']. - tabPane.activeTab
Which tab to show when the plugin loads. If set to null, the first tab from the components list will be shown.
Possible values: one of the component names listed below, or null. Optional. Default: null.
Component names:- profile
- map
- detail
- statistics
- download
- comments
- lodging
- planner
Links
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. Default: www.routeyou.com route link. - 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> <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.