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

MapSearch 2.0 plugin

Table of contents

Introduction

You can show your routes and/or places of interest on your own site using the MapSearch 2.0 plugin. There are three versions of this plugin.

Free MapSearch plugin

Via the RouteYou website

  1. On www.routeyou.com, surf to the group 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/mapsearch/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 .

Examples

Only motorised routes in a specific area

The example below will show you only the car and motor routes in the area of the Netherlands, places of interest will be shown without restrictions. The interface will be in Dutch.

<iframe src="//plugin.routeyou.com/mapsearch/free/?language=nl&amp;map.bounds={%22min%22:{%22lat%22:51.35120063065597,%22lon%22:3.262939453125},%22max%22:{%22lat%22:53.5076512854543,%22lon%22:7.196044921875}}&amp;params.route.type.id=45" width="800" height="500" frameborder="0" allowfullscreen></iframe>

In below interactive demo, you can experiment with the settings and then copy/paste in your site

Routes of a specific user

The example below will show only the routes and places of interest that belong to a specific user. The interface will be in English.

<iframe src="//plugin.routeyou.com/mapsearch/free/?language=en&amp;params.owner.id=2482" width="1000" height="600" frameborder="0" allowfullscreen></iframe>

Routes of a specific user in a specific area, not clustered

The example below will show you the same as the previous example, except that only a specific area will be shown (done with the map.bounds parameter) and the routes will not be clustered (achieved with params.route.clustered=false).

<iframe src="//plugin.routeyou.com/mapsearch/free/?language=en&amp;map.bounds={%22min%22:{%22lat%22:50.79,%22lon%22:3.79},%22max%22:{%22lat%22:50.99,%22lon%22:3.99}}&amp;params.owner.id=2482&amp;params.route.clustered=false" width="1000" height="600" frameborder="0" allowfullscreen></iframe>

Basic version (iframe)

Getting started

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

Upgrading from the free version

To upgrade from the free version, simply change the /free/ part in the URL to /basic/ and add your key or token (see below) to the list of parameters.

For example, if you currently have this:

<iframe src="//plugin.routeyou.com/mapsearch/free/?language=en&amp;params.owner.id=2482" width="800" height="500" frameborder="0" allowfullscreen></iframe>

You will need to change it to this:

<iframe src="//plugin.routeyou.com/mapsearch/basic/?key=<your RouteYou web service key, see below>&amp;language=en&amp;params.owner.id=2482" width="800" height="500" frameborder="0" allowfullscreen></iframe>

Examples

Only motorised routes in a specific area

The example below will show you only the car and motor routes in the area of the Netherlands, places of interest will be shown without restrictions. The interface will be in Dutch.

<iframe src="//plugin.routeyou.com/mapsearch/basic/?token=<your RouteYou web service token, see below>&amp;language=nl&amp;map.bounds={%22min%22:{%22lat%22:51.35120063065597,%22lon%22:3.262939453125},%22max%22:{%22lat%22:53.5076512854543,%22lon%22:7.196044921875}}&amp;params.route.type.id=45" width="800" height="500" frameborder="0" allowfullscreen></iframe>

Routes of a specific user

The example below will show only the routes and places of interest that belong to a specific user. The interface will be in English.

<iframe src="//plugin.routeyou.com/mapsearch/basic/?token=<your RouteYou web service token, see below>&amp;language=en&amp;params.owner.id=2482" width="1000" height="600" frameborder="0" allowfullscreen></iframe>

Routes of a specific user in a specific area, not clustered

The example below will show you the same as the previous example, except that only a specific area will be shown (done with the map.bounds parameter) and the routes will not be clustered (achieved with params.route.clustered=false).

<iframe src="//plugin.routeyou.com/mapsearch/basic/?token=<your RouteYou web service token, see below>&amp;language=en&amp;map.bounds={%22min%22:{%22lat%22:50.79,%22lon%22:3.79},%22max%22:{%22lat%22:50.99,%22lon%22:3.99}}&amp;params.owner.id=2482&amp;params.route.clustered=false" width="1000" height="600" frameborder="0" allowfullscreen></iframe>

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 MapSearch 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 parameter box above the map and the list on the right of both the parameter box 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="routeYouMapSearchList" style="margin-left: 10px; width: 300px; float: right;"></div>
<div id="routeYouMapSearchParameterBox" style="margin-bottom: 10px;"></div>
<div id="routeYouMapSearchMap"></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/mapsearch/2.0.js"></script>
<script type="text/javascript">
RTY.MapSearch.load({
        'token': '<your RouteYou web service token, see below>',
        'language': '<your language, see below>',
        'parameterBox.div': 'routeYouMapSearchParameterBox',
        'map.div': 'routeYouMapSearchMap',
        'list.div': 'routeYouMapSearchList'
    });
</script>

Tabs

You can also show a tabbed version of the MapSearch plugin. Use the code below to show all components in tabs.

<div id="routeYouMapSearchTabButtons" style="margin-bottom: 10px;"></div>
<div id="routeYouMapSearchTabPane"></div>

<script type="text/javascript" src="//plugin.routeyou.com/mapsearch/2.0.js"></script>
<script type="text/javascript">
RTY.MapSearch.load({
        'token': '<your RouteYou web service token, see below>',
        'language': '<your language, see below>',
        'tabButtons.div': 'routeYouMapSearchTabButtons',
        'tabPane.div': 'routeYouMapSearchTabPane',
        'tabPane.components': ['map', 'list', 'parameterBox']
    });
</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.

Examples

Only motorised routes in a specific area, tabbed version

The example below will show you only the car and motor routes in the area of the Ghent, places of interest will be shown without restrictions. The interface will be in Dutch.

<script type="text/javascript" src="//plugin.routeyou.com/mapsearch/2.0.js"></script>
<script type="text/javascript">
RTY.MapSearch.load({
        //RouteYou key
        'key': 'f3af0f9cb548aab76a774096206887e1',
  
        'language': 'nl',
        'tabButtons.div': 'routeYouMapSearchTabButtons',
        'tabPane.div': 'routeYouMapSearchTabPane',
        'tabPane.components': ['map', 'list', 'parameterBox'],
        'map.bounds': {
            min: {
                lat: 50.9795,
                lon: 3.5798
            },
            max: {
                lat: 51.1881,
                lon: 3.8492,
            }
        },
        'params.route.type.id': 45,
        'params.route.clustered':false
    });
</script>

Routes of a specific user, with modified links

The example below will show only the routes and places of interest that belong to you. The map will automatically pan and zoom to fit them as well as possible. When a user clicks on a route or place of interest, he will be directed to your site.

<script type="text/javascript" src="//plugin.routeyou.com/mapsearch/2.0.js"></script>
<script type="text/javascript">
RTY.MapSearch.load({
        'token': '<your RouteYou web service token>',
        'language': 'en',
        'map.div': 'routeYouMapSearchMap',
        'list.div': 'routeYouMapSearchList',
        'params.owner.id': <your user id>,
        'route.view.link': 'http://www.yoursite.com/your-route-page?route=%id%',
        'poi.view.link': 'http://www.yoursite.com/your-poi-page?poi=%id%'
    });
</script>

Routes only

The example below will show only routes. The user will not be able to hide the routes. No places of interest will be shown, and the Places of interest header will not be visible in the list.

<script type="text/javascript" src="//plugin.routeyou.com/mapsearch/2.0.js"></script>
<script type="text/javascript">
RTY.MapSearch.load({
        'token': '<your RouteYou web service token>',
        'language': 'en',
        'map.div': 'routeYouMapSearchMap',
        'list.div': 'routeYouMapSearchList',
        'content.routes.optional': false,
        'content.pois.show': false,
        'content.pois.optional': false
    });
</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 parameter box into account, while the list takes the height of the tab buttons 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.

Parameter box (filters) component

Map component

List component

Route blocks

The following parameters change the behaviour of the route components (both in the list and on the map).

Place of interest blocks

The following parameters change the behaviour of the place of interest components (both in the list and on the map).

Tabs

Links

By default, all routes and places of interest link back to the RouteYou website. The following parameters influence this behaviour. You can use these parameters to link directly to the RouteViewer plugin.

Compatibility

The MapSearch 2.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