Back to RouteYou

Choose a language

Search

More help

Can't find the solution to your problem?

User status

You are not logged in.



Forgot your password?

Related topics

© 2006-2024 RouteYou

Advertisement

RouteViewer 3.0 plugin

Table of contents

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.

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 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&amp;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>&amp;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&amp;language=en&amp;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.
The first 3 parameters define the inside color.

The next 3 parameters the outside color 


map.route.line.normal.standard.color=%23777777
map.route.line.normal.standard.width=5
map.route.line.normal.standard.opacity=1
map.route.line.normal.standard.fill.color=%23eb9334
map.route.line.normal.standard.fill.width=3
map.route.line.normal.standard.fill.opacity=0.7
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
Start button
Instructions while navigating
Show current position


map.show.startControl=true
map.show.instruction=true
map.show.positionData=true

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:

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:

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:

General

Content

You can decide what to show with the following parameters.

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.

Colors and more

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

Media

The following parameters change the behaviour of the route and place of interest media.

Title component

Profile component

Map component

Detail component

Statistics component

Download component

Comments component

Lodging component

Planner component

Tabs

Links

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

Back to RouteYou

© 2006-2024 RouteYou - www.routeyou.com