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.

Free RouteViewer plugin

Via the RouteYou website

  1. On www.routeyou.com, surf to the route you want to show on your website.
  2. Click  Share.
  3. Click Embed.
  4. Copy the code.
  5. 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 *.

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&amp;params.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.

RouteVIEWR components

<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:

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

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

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.

The following parameters change the style (color scheme and related properties) of all components.

The following parameters change the behaviour of the title component.

The following parameters change the behaviour of the profile component.

The following parameters change the behaviour of the map component.

The following parameters change the behaviour of the detail component.

View parameters

You can decide what to show with the following parameters.

Link parameters

By default, the download button links back to the RouteYou website. The following parameters influence this behaviour.

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.

© 2006-2018 RouteYou - www.routeyou.com